[phpBB3]Profil total schimbat

Salut Vizitator,

Astazi am sa va prezint un mic tutorial care o sa va schimbe interfata (designul) profilului din topic.

Sa incepem:

Adaugati in Gestiunea codurilor Javascript urmatorul cod:

Cod:

$(function(){
 var a=$('.postprofile').get();
  for(i=0;i<a.length;i++) {
    var b=a[i].getElementsByTagName('dt')[0].getElementsByTagName('a')[1];
    var unm=$(b).text(); var uid=b.href.substring(b.href.indexOf('/u')+2);
    $(a[i]).append('<div class="kevin-profile"><a href="/u' + uid + 'profile"><img src="http://cdn4.iconfinder.com/data/icons/comfi-telecom-icons/my-profile.png" /></a></div>');
    $(".postprofile dl dd:last-child").addClass("kevin-contact");
    $(".postprofile dl dd").addClass("kevin-info");
    $(".postprofile dl dd:last-child").addClass("kevin-last");}
});

$(function(){if(
$('.post')[0]){$('.post dt a span').addClass('kevin-nume')}});

Titlu: Profil
Amplasare: Topicuri

Apoi introduceti urmatorul cod in Foaia de stil CSS:

Cod:

.postprofile dl dd .rang{
text-align: center;
position: relative;
bottom: 12px;
background-color: #FBFBFB;
margin: 0 17px;
border: 1px solid #DDD;
border-top: none;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-top: -20px;
margin-left: 22.5px;
width: 140px;
}

.postprofile dl dt{
text-align: center;
}

.postprofile dl dt a img{
background-color: #EEE;
border: 1px solid #DDD;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 5px;
}

.postprofile dl dt strong[style] a{
position: relative;
top: 20px;
}

.kevin-info {
position: absolute;
visibility:hidden;}
  
.kevin-last {
padding-top: 35px;
visibility:visible;}

.kevin-nume {
width: 140px;
padding: 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ddd;
background: #EBEBEB;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
margin-top: -15px;
position: relative;
text-align: center;
text-decoration: none;
margin-left: 55px;
}

.kevin-contact {
-webkit-border-radius: 3px;
padding: 2px;
width: 140px;
left: 57px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #DDD;
background: white;
height: 20px;
margin-top: 19px;
}

.kevin-profile {
margin-left: 8px !important;
width: 187px !important;
text-align: center !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #ddd;
background: #fff;
display:none;}

.kevin-profile img, .kevin-contact img {
width: 22px;
height: 20px;
margin-left: 8px;
}

.kevin-info .rang { 
visibility: visible !important;
display: block !important;
position: relative !important;}

Demonstratie: [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

Tutorial creat de Kevin pentru Extrem-Tutorials.

Comentarii

Scuze ca iti spun dar acele coduri js nu sunt create de tine !
PS: Trebuie sai ai minim 50% experienta js pentru a realiza un cod ca asta :

 var a=$('.postprofile').get();
  for(i=0;i<a.length;i++) {
    var b=a[i].getElementsByTagName('dt')[0].getElementsByTagName('a')[1];
    var unm=$(b).text(); var uid=b.href.substring(b.href.indexOf('/u')+2);
    $(a[i]).append('<div class="kevin-profile"><a href="/u' + uid + 'profile"><img src="http://cdn4.iconfinder.com/data/icons/comfi-telecom-icons/my-profile.png" /></a></div>');});

Re: [phpBB3]Profil total schimbat
VizitatorJoi 11 Oct - 19:27