test

 :: CODAGE. :: Test test :: test 1

Voir le sujet précédent Voir le sujet suivant Aller en bas

test

Message par blackheart. le 20.09.15 4:04

Le template


J'ai fait très peu de modifications au template viewtopic_body, juste celles nécessaires pour le fonctionnement du script.

Ajout de la class cell_profil à la cellule entourant l'ensemble du profil (ligne 135)

Code:
<td class="{postrow.displayed.ROW_CLASS} cell_profil"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
Ajout d'une div avec la class infos_profil autour des informations du profil (c'est juste en dessous, vers la ligne 140)

Code:
<div class="infos_profil">
   <span class="postdetails poster-profile">
       <!-- BEGIN profile_field -->
       {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
       <!-- END profile_field -->
       {postrow.displayed.POSTER_RPG}
   </span>
</div>


Pour ceux qui n'ont rien suivi  jairienfait :
Intégralité du template:


L'ajout de class cell_profil nous permettra de cibler l'élément contenant le profil.
L'ajout de class infos_profil nous permettra de cibler l'élément contenant les informations du profil, c'est celui dont nous changerons la couleur.

J'ai ajouté un poil de CSS juste pour légèrement styliser .infos_profil
Code:Sélectionner le contenu
.infos_profil {
   padding: 5px;
}

Le Javascript


En fait, on récupère la couleur du pseudo du posteur, et ensuite on ajoute cette couleur comme fond pour l'élément qu'on veut modifier Smile.
Code:Sélectionner le contenu
$(function() {
   var color;
   var s_pseudo = ".name span"; /* le sélecteur du pseudo */
   var s_conteneur = ".cell_profil"; /* le sélecteur du profil */
   var s_modification = ".infos_profil"; /* le sélecteur de l'élément à modifier */
   
   $(s_pseudo).each(function(){
       color = $(this).css('color');
       $(this).parents(s_conteneur).find(s_modification).css('background-color',color)
   });
});

Et voilà, ça maaaarche <3

Si vous voulez, vous pouvez vous arrêter là ou bien lire la suite des explications !

Explications et modifications


Les explications ne s'adressent pas au complet débutants, j'explique donc rapidement
Spoiler:


Pour les modifications, il vous suffit de toucher à cette partie là :
Code:Sélectionner le contenu
  var s_pseudo = ".name span"; /* le sélecteur du pseudo */
   var s_conteneur = ".cell_profil"; /* le sélecteur du profil */
   var s_modification = ".infos_profil"; /* le sélecteur de l'élément à modifier */
Vous devez remplacer par la class de votre élément à chaque fois (d'où la présence du point, car c'est une class).
Vous pouvez pour s_modification mettre plusieurs éléments, séparés par des virgules.
avatar
blackheart.
Administratrice


Messages : 730
Date d'inscription : 26/11/2010
Age : 25
Localisation : encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours. encours.

Vie Sociale
Vie sociale:

Voir le profil de l'utilisateur http://blackheart-tm.forumgratuit.org

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 :: CODAGE. :: Test test :: test 1

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum