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

Foto

[HTML] Advanced Avatar Uploading (v1.0)



This forum is locked: you cannot post, reply to, or edit topics.  This topic is locked: you cannot edit posts or make replies.

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

1
Offline

  Shadow

avatar
Administrator
Administrator


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)


- 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 -->
- 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;
                      }
                      
- Preview
http://i.imgur.com/GH5WKTb.png





© PunBB Design


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

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

2
Offline

  LeePark

avatar
Punbb Rookie
Punbb Rookie
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]


This forum is locked: you cannot post, reply to, or edit topics.  This topic is locked: you cannot edit posts or make replies.

Topic URL's

URL
BBcode
HTML

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