Giriş Yap

**#Captain** · (Son Düzenleme: 07-24-2014, 03:20 AM, Düzenleyen: #Captain.)

Admin KP - Şablon & Stil - Kullandığınız Tema - Global.css giriyoruz, aşağıdaki kodları en altına ekliyoruz..

Kod:

.imgholder{
     position:relative;
     width:120px;
     height:120px;
     border-radius:100px;
     float:left;
     margin:40px 30px;
 }
 /* thumbnails style */
 .imgholder img{
     position:absolute;
     left:0;
     top:0;
     width:120px;
     height:120px;
     z-index:5;
     border-radius:100px;
     -moz-border-radius:100px;
     -webkit-border-radius:100px;
     opacity:0.3;
     filter: alpha(opacity = 30);
     box-shadow:0 0 5px #000;
     -moz-box-shadow:0 0 5px #000;
     -webkit-box-shadow:0 0 5px #000;
     
     transform: scale(0.5,0.5);
     -ms-transform: scale(0.5,0.5);
     -moz-transform: scale(0.5,0.5);
     -webkit-transform: scale(0.5,0.5);
     
     transition: 
         opacity 1s,
         transform 1s ease-in-out 0.3s;
     -moz-transition: 
         opacity 1s,
         -moz-transform 1s ease-in-out 0.3s;
     -webkit-transition: 
         opacity 1s,
         -webkit-transform 1s ease-in-out 0.3s;
 }
 .imgholder:hover img{
     opacity:1;
     filter: alpha(opacity = 100);
     transform: scale(1,1);
     -ms-transform: scale(1,1);
     -moz-transform: scale(1,1);
     -webkit-transform: scale(1,1);
 }

 .imgholder figcaption{
     position:absolute;
     left:-5px;
     top:40%;
     width:130px;
     color:#004E87;
     font-weight:bold;
     text-shadow:-1px -1px 0 #fff;
     z-index:4;
     
     transition: 
         top 0.5s ease-out;
     -moz-transition: 
         top 0.5s ease-out;
     -webkit-transition: 
         top 0.5s ease-out;
 }
 .imgholder:hover figcaption{
     top:120%;
 }
 /* decorations style */
 .imgholder .circle{
     position:absolute;
     border-radius:100px;
     -moz-border-radius:100px;
     -webkit-border-radius:100px;
 }
 .imgholder .outer1{
     top:-8px;
     left:-8px;
     width:120px;
     height:120px;
     z-index:2;
     
     border:8px solid;
     border-color:#DEEBFC;
     box-shadow:0 0 3px #AFD3FF;
     -moz-ox-shadow:0 0 3px #AFD3FF;
     -webkit-box-shadow:0 0 3px #AFD3FF;
     
     background: #ffffff;
     background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
     background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
     background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
     
     transform:rotate(90deg);
     -ms-transform:rotate(90deg);
     -moz-transform:rotate(90deg); 
     -webkit-transform:rotate(90deg);
     
     transition: 
         transform 1.8s ease-in-out,
         box-shadow 1s ease-out,
         border-color 1.5s;
     -moz-transition: 
         -moz-transform 1.8s ease-in-out,
         -moz-box-shadow 1s ease-out,
         border-color 1.5s;
     -webkit-transition: 
         -webkit-transform 1.8s ease-in-out,
         -webkit-box-shadow 1s ease-out,
         border-color 1.5s;
 }
 .imgholder:hover .outer1{
     border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
     box-shadow:0 0 10px #0285E2;
     -moz-box-shadow:0 0 10px #0285E2;
     -webkit-box-shadow:0 0 10px #0285E2;
     transform:rotate(-10deg);
     -ms-transform:rotate(-10deg);
     -moz-transform:rotate(-10deg); 
     -webkit-transform:rotate(-10deg);
 }
 .imgholder .outer2{
     top:-18px;
     left:-18px;
     width:136px;
     height:136px;
     z-index:1;
     
     border:10px solid;
     border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
     box-shadow:0 0 20px #8EB9FF;
     -moz-box-shadow:0 0 20px #8EB9FF;
     -webkit-box-shadow:0 0 20px #8EB9FF;
     opacity:0;
     filter: alpha(opacity = 0);
     
     transform: scale(1.3,1.3) rotate(180deg);
     -ms-transform: scale(1.3,1.3) rotate(180deg);
     -moz-transform: scale(1.3,1.3) rotate(180deg);
     -webkit-transform: scale(1.3,1.3) rotate(180deg);
         
     transition: 
         opacity 0.5s,
         transform 0.7s ease-out;
     -moz-transition: 
         opacity 0.5s,
         -moz-transform 0.7s ease-out;
     -webkit-transition: 
         opacity 0.5s,
         -webkit-transform 0.7s ease-out;
 }
 .imgholder:hover .outer2{
     opacity:0.9;
     filter: alpha(opacity = 90);
     transform: scale(1,1) rotate(-10deg);
     -ms-transform: scale(1,1) rotate(-10deg);
     -moz-transform: scale(1,1) rotate(-10deg);
     -webkit-transform: scale(1,1) rotate(-10deg);
 }

Admin KP - Şablon & Stil - Şablonlar - Kullandığınız Tema - Postbit Şablonları - Postbit_avatar şablonuna giriyoruz içindeki herşeyi silip aşağıdaki kodu ekliyoruz..

Kod:

<div align="center" class="imgholder">
         <div class="outer1 circle"/></div>
         <div class="outer2 circle"/></div>
         <figure>
 <div class="postuseravatar1" href="{$post['profilelink_plain']}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">
 <center>
 <img src="{$post['avatar']}" alt="{$post['avatar']}" title="{$post['avatar']}"/>
 </center>
 </div>
 <figcaption class="caption">
             <span class="username">
              <div class="username_container">
             
             </span>
     </figcaption>        
         </figure>
     </div>

Yapımcı -> DieseL

Giriş Yap
Kullanıcı Adı:
Şifreniz:	Şifremi Unuttum?
	Beni Hatırla