Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de Zeus Mar 27 Sept - 21:23
» Cum retusam imaginile
Scris de cristimare Mar 27 Sept - 14:27
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
Cuvinte-cheie

profil  cautare  edit  subiecte  chenar  Statistici  ultimele  animate  Bara  legenda  punbb  subforumuri  banner  avatar  html  tutorial  radio  reclama  Metin2  Mesaje  menu  meniu  tema  drop  phpBB2  navigare  

[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 inscris si conectat pentru a vedea aceasta imagine]

Tutorial creat de Kevin pentru Extrem-Tutorials.

Comentariile utilizatorilor
Vizitator
la data de Joi 11 Oct - 19:27
Vizitator Vizitator
Conectat
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 :
Cod:
 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>');});
Membru veteran
la data de Mar 16 Oct - 20:08
Raykim Membru veteran
Conectat
Mutat in sectiunea corespunzatoare!
Membru premium
la data de Mar 16 Oct - 21:32
Hissae2 Membru premium
Conectat
Este destul de folositor acest cod.
Membru ET
la data de Mar 16 Oct - 21:36
Soricelul Membru ET
Conectat
Bun codul!