Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Board Index » Forumotion » Tutorials  »  [OLD] Tutorials & Codes »[HTML] Advanced Avatar Uploading (v1.0)

Foto

[HTML] Advanced Avatar Uploading (v1.0)

by ,


View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

Shadow
Administrator
Administrator
2013-11-07, 14:24

[HTML] Advanced Avatar Uploading (v1.0) Config10
Tutorial: Advanced Avatar Uploading (v1.0)

This form will give you better, easier and more advanced uploading system just with small HTML corrections.


--> Tutorials, tips and tricks <--
Advanced Avatar Uploading (v1.0)


1º - Edit Template
In [ic]profile_add_body[/ic] find following content:
Code:
[panda=html]    <!-- BEGIN switch_avatar_block -->
***Content here***
<!-- End switch_avatar_block -->
Replace with:
Code:
[panda=html]    <!-- BEGIN switch_avatar_block -->
                    
                     <div class="main-head"><h1 class="page-title">{L_AVATAR_PANEL}</h1></div>
     <div class="main-content frm">
     <p class="infopro">{L_AVATAR_EXPLAIN}</p>
     <div class="macroleft">
     <div id="macroavatar">
    
                           <div class="miavatarpro">{AVATAR}
                              <span id="textpoup">Current Avatar</span></div>
     </div>
     <div class="uploadavatargb">
                              <!-- BEGIN switch_avatar_local_upload -->
     <div class="subiravatar">
     <div class="textupload">Select a photo from your computer</div>
                              <div class="uploadavatarpro"><input type="file" name="avatar" class="uploadavatar" /></div>
     </div>
     <!-- END switch_avatar_local_upload -->
     <div class="or"><span id="ortext">OR</span></div>
                              <!-- BEGIN switch_avatar_remote_link -->
     <div class="remoteipload">
     <div class="inputremotead">Url avatar (example: http://r13.imgfast.net/users/1317/45/26/16/avatars/1-36.jpg)</div>
     <div class="remoteinput">
                                      <input type="text" placeholder="Enter URLs to upload photos" autocomplete="off" name="avatarremoteurl" class="inputbox" />
     <span class="warning">{L_LINK_REMOTE_AVATAR_EXPLAIN}</span>
     </div>
     </div>
                              <!-- END switch_avatar_remote_link --></div>
     </div>
     <!-- END switch_avatar_block -->
2º - CSS
Add following code to the stylesheet:

Code:
[panda=css]  
    .uploadavatargb ,.miavatarpro {
        -webkit-user-select: none;  -khtml-user-select: none;  -o-user-select: none;  user-select: none;
        cursor: auto;
    }
    .infopro {
        border-bottom: 2px solid #6AA500;
        padding: 20px;
        background: #E5FFD8;
        font: bold 13px 'Trebuchet MS'verdana;
        color: #08A510;
        text-shadow: 0 1px 0 #E3FFDA;
    }
    #macroavatar {
        background: #FFFAD2;
        text-align: center;
    border-bottom: 2px solid #FF8F00;}
    #macroavatar .miavatarpro img {
        width: 150px;
        height: 150px;
        transition: all 0.4s ease 0s;  -o-transition: all 0.4s ease 0s;  -ms-transition: all 0.4s ease 0s;  -moz-transition: all 0.4s ease 0s;  -webkit-transition: all 0.4s ease 0s;
        border: 5px solid #FFF;  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);  margin: 2px 2px 7px 2px;
    }
    .miavatarpro {  
       padding: 15px;
        transition: all 0.4s ease 0s;  -o-transition: all 0.4s ease 0s;  -ms-transition: all 0.4s ease 0s;  -moz-transition: all 0.4s ease 0s;  -webkit-transition: all 0.4s ease 0s;
    }
    .textupload {
    font-weight: bold;
    padding: 10px;
    border-radius: 3px 3px 0px 0px;
    margin: -2px;
    background-color: #F3F3F3;
    border-bottom: 1px dashed #E9E9E9!important;
    border: 2px dashed #DDD;
    margin-bottom: 2px;
    }
    .uploadavatarpro .uploadavatar {
        cursor: pointer;
        padding: 24px 101px;
    }
    .miavatarpro img:hover {
        transform: scale(1.15);
       -o-transform: scale(1.15);
       -ms-transform: scale(1.15);
       -moz-transform: scale(1.15);
       -webkit-transform: scale(1.15);  transition: all 0.4s ease 0s;  -o-transition: all 0.4s ease 0s;  -ms-transition: all 0.4s ease 0s;  -moz-transition: all 0.4s ease 0s;  -webkit-transition: all 0.4s ease 0s;  -webkit-backface-visibility: hidden;
    }
    .miavatarpro > img:hover + #textpoup {
        opacity: 1;
        z-index: 1;
        -webkit-transition: 0.5s;  -moz-transition-duration: 0.5s;  -htm-transition-duration: 0.5s;
    }
    #textpoup {
        position: absolute;
        background: rgba(0, 0, 0, 0.69);
        margin-left: -168px;
        padding: 10px;
        width: 152px;
        margin-top: -4px;
        color: white;
        font: bold 13px helvetica , arial;
        text-shadow: 0 1px 0 black;
        z-index: -1;
        box-shadow: 0 1px 0px rgba(255, 253, 253, 0.2);
        text-align: center;
        opacity: 0;
        -webkit-transition: 0.3s;
       -moz-transition-duration: 0.3s;
       -htm-transition-duration: 0.3s;
    }
    .inputremotead {
    color: #929292;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    }
    .remoteinput {
       text-align: center;
        padding-bottom: 20px;
    }
    .uploadavatargb {
        border: 2px dashed #DDD;
        border-radius: 3px;  margin: 24px 10px;
        color: #8A8A8A;
        text-align: center;
        font-size: 14px;
        padding: 4px 0;
        padding-top: 0px;
    }
    .or {
        border-bottom: 2px solid #A2ABAC;
        margin: 10px;
    }
    .or #ortext {
        background: white;
        position: relative;
        top: 7px;
        padding: 2px 10px;
    }
    .remoteinput .inputbox {
        width: 500px;
        margin: 10px 4px;
    }
    .remoteinput .warning {
        width: 300px;
        height: 32px;
        display: block;
        text-align: left;
        background: rgba(0, 0, 0, 0.81);
        border-radius: 3px;
        padding: 3px 10px;
        box-shadow: 0px 0px 0px 1px#020202 inset;
        margin: auto;
        color: #FFFFFF;
        text-shadow: 0 1px 0 #803800;
        padding-bottom: 15px;
        font: italic 11px helvetica;
        opacity: 0;
        -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    }
    .remoteinput .warning::before {
        display: block;  height: 0;
       content: " ";
       position: relative;    width: 0;
       top: -9px;
        left: 50%;
        border-left: 6px solid rgba(0, 0, 0, 0);
       border-right: 6px solid rgba(0, 0, 0, 0);
       border-bottom: 6px solid #000000;  
   opacity:0;
        -webkit-transition: 0.3s;  -moz-transition-duration: 0.3s;  -htm-transition-duration: 0.3s;
    }
    .uploadavatarpro .uploadavatar:hover {
        background: #F1F1F1;
    }
    .remoteinput .inputbox:focus + .warning, .remoteinput .inputbox:focus +.warning::before, .remoteinput .inputbox:hover +.warning::before, .remoteinput .inputbox:hover + .warning{
        opacity: 1;
                      }
                      
3º - Preview
https://i.imgur.com/GH5WKTb.png




© PunBB Design


[HTML] Advanced Avatar Uploading (v1.0) Act_bottom If you have any questions related to this topic create a topic with the following title:
Advanced Avatar Uploading (v1.0)

Powered by PunBB
Thanks
Currently 0 users have thanked Shadow for this post:

2
Offline

  LeePark

LeePark
Punbb Rookie
Punbb Rookie
2014-06-07, 02:19
Thank you so much for this... It really works on my forum ^^

Powered by PunBB
Currently 0 users have thanked LeePark for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum

 

About PunBB Design

PunBB Design (ex. PunBB Community) Forum is Forumotion hosted forum created 2012 as a test forum for helping out members and improving design and quality of the Forumotion forums. Over the time it became bigger and bigger in term of content, members and activity. That's why several times Forumotion offered us a free domain name for our community (www.punbb.biz). Today we want to back it's old activity and make it even better! In 2013 PunBB Design is awarded for best Forumotion forum.

General Links

Forum Resources

Forumotion Links

BtT
  • This skin is designed by Shadow for PunBB Design™.