Cadre autour de l'avatar en fonction du groupe

[Ocsidot]

Bonjour à tous,

J'essaie depuis quelque temps de changer une ou deux chose dans la partie affichant les informations sur l'utilisateur dans un post.

J'ai réussi grâce à divers informations trouvées ici à obtenir quasiment ce que je voulais mais il y a un dernier point que je n'arrive pas à résoudre.

Actuellement, pour différencier les différents groupes, le pseudo de l'utilisateur a la couleur de son groupe. Comme tous les avatars sur mon forum sont carrés et ont la même taille, je souhaitais mettre un cadre en couleur autour de celui-ci, cependant, je n'arrive pas à récupérer l'information du groupe qui me permettrait de changer la classe de la div autour de l'image. La seule info que j'ai trouvée est le rang de l'utilisateur ({postrow.displayed.POSTER_RANK}).

Je viens donc vous demander si par hasard vous pourriez m'aider sur mon problème ?

Merci de toute l'aide que vous pourrez m'apporter

[Ocsidot]

Un petit up

[Psyaliah]

Coucou !
J'ai réussi à faire un script pour changer la couleur du cadre de l'avatar en fonction de la couleur d'un groupe !
Voici une explication donc !

I. Modification du template

En premier lieu, il faut se rendre ici:
Panneau d'administration
Affichage
Templates
Général

Ensuite, on va modifier ce template "viewtopic_body" en cliquant sur .

Si ton template n'est pas modifié, rends toi à la ligne 94, sinon cherche cette ligne:

Code:

{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />

La, on va rajouter une div à l'avatar, ainsi qu'une ID, pour pouvoir faire les paramétrages de la taille ect si souhaité, mais aussi pour pouvoir l'utilisé dans le(s) code(s) JavaScript.
Ce qui donne à présent ceci:

Code:

{postrow.displayed.RANK_IMAGE}<div id="avatar">{postrow.displayed.POSTER_AVATAR}</div><br /><br />

Cliquez sur le bouton puis n'oublier pas de cliquer sur pour publier le template.


II. Modification des rangs

Pour pouvoir assigner une couleur de cadre à un groupe, il faut que chaque groupe est un rang assigné.
Par exemple créer un rang graphiste pour chaque membre du groupe graphiste, et lui associer.

Pour créer ou modifier un rang, c'est par là:
Panneau d'administration
Utilisateurs & Groupes
Rangs
Administration des rangs

Maintenant, soit vous créez un rang, soit vous en éditez un déja crée.
C'est au niveau du nom du rang que se joue le plus important.
Tout les noms des rangs auxquels vous voudrez assigner une couleur, devra avoir un nom de cette mise en forme:

Code:

<span class="Nomdurang">Nom du rang</span>

Par exemple, pour le rang administrateur:

Code:

<span class="Administrateur">Administrateur</span>

Si votre rang comporte des espaces dans le nom, supprimez les espaces dans "class="Nomdurang"", par exemple:

Code:

<span class="Administrateurenchef">Administrateur en chef</span>

Répétez ceci pour tout les rangs que vous désirez.

III. Création du code JavaScript

Pour réaliser le code, il faut se rendre ici:
Panneau d'administration
Modules
HTML & JAVASCRIPT
Gestion des codes Javascripts

Cliquez sur le bouton " Créer un nouveau Javascript"

Dans le nom, mettez par exemple "Couleur cadre avatars", peu importe, c'est pour vous en sortir quand vous voudrez faire des modifications.
Puis, cochez seulement cette case: "Sur les sujets" et seulement celle ci !

Ensuite, pour le code Javascript.
De base, on aura tout en haut et tout en bas ceci:

Code:

$(function() {
<-- On écrit ici -->
});

Puis, pour chaque rang, on rajoute cette ligne:

Code:

$('.nomdurang').parent().children('#avatar').addClass('nomdunecouleur');

On remplace ".nomdurang" par le nom du rang, en gardant bien le "." et en faisant attention aux majuscules !
Ici présent, mon ".nomdurang" deviendra ".Administrateur".
Ensuite, le "#avatar" dit qu'on veut appliquer la couleur sur celui ci.
Puis le 'nomdunecouleur' mettez simplement le nom d'une couleur, (pas de code ni rien !! C'est pour s'y reconnaître dans le css !), pour ma part je met 'rouge' car je sais que je voudrais y appliquer un contour rouge.

Rajoutez autant de lignes que de rangs que vous avez créer pour ajouter une couleur.
A la fin votre code doit ressembler à quelque chose comme ceci par exemple:

Code:

$(function() {
$('.Administrateur').parent().children('#avatar').addClass('rouge');
$('.Moderateur').parent().children('#avatar').addClass('bleu');
$('.Graphiste').parent().children('#avatar').addClass('vert');
});

IV. Le CSS

Maintenant, on va définir notre contour à l'aide du css !
Rendez-vous par ici:
Panneau d'administration
Affichage
Images et couleurs
Couleurs
Feuille de style CSS

On peut si vous le souhaitez, définir des propriétés pour l'avatar, tel que la taille par exemple, comme ceci:

Code:

#avatar {
width: 150px;
height: 150px;
}

Maintenant, on va écrire pour chaque rang quelque chose comme ceci:

Code:

.rouge img {
  border: solid 3px #ff0000;
}

Pour chaque rang, on a associé le nom d'une couleur. Là, mon ".rouge" correspond à mon rang "Administrateur". On peut remplacer ".rouge" par ".bleu ; .vert" ect, selon la couleurs qu'on à choisi. Le "img" dit qu'on applique le contour à l'image, et pas au bloc, donc seulement le contour de l'avatar.
La propriété "border" définit la bordure, autrement dit le contour.
L'attribut "solid" dit que c'est un trait continu.
L'attribut "3px" indique la taille de la bordure.
Enfin, l'attribut "#ff0000" définit la couleur de la bordure, à remplacer par celle voulue, ou bien par le nom d'une couleur (ici), ou encore une valeur rgb.

Ici, j'ai trois rangs, donc mon css ressemblera à ceci:

Code:

.rouge img {
  border: solid 3px #ff0000;
}

.bleu img {
  border: solid 10px blue;
}

.vert img {
  border: solid 1px rgb(0,255,0);
}

Puis enregistrer tout ça !

Bonne chance !

[Ocsidot]

Merci beaucoup de ton aide, cependant, ce que je cherche à obtenir c'est le groupe d'un utilisateur (administrateur, modérateur, membres, postulant, ...) pas son rang :/

En tout cas, ton explication m'a donné un premier élément de réponse et un axe dans lequel chercher.

Merci

[Ocsidot]

Désolé du double poste, mais j'ai trouvé une solution grâce à l'aide de Psyaliah, donc la voici pour ceux que ça intéresse.

J'ai fait exactement pareil que Psyaliah pour la partie I.
Ensuite, pour la partie Javascript, j'ai fait ceci (je pense que c'est de la bidouille, mais ça marche )

Code:

$(function(){
$('span.name',this).each(function(index)
{
   var colorStyle = $('span:first', this).attr('style');
   var colorParts = colorStyle.split(':');
   var border = $('#avatarBorder', $(this).parent());
   border.css('border-radius', '10px');
   border.css('-webkit-border-radius', '10px');
   border.css('-moz-border-radius', '10px');
   border.css('border-style', 'solid');
   border.css('border-color', colorParts[1]);
});
});

En gros, je récupère tous les span qui on la classe name (ce span permet d'afficher le nom d'utilisateur). Dans chaque span, je récupère la couleur associé au groupe, puis je mets un cadre avec cette couleur sur la div voulu.

Encore merci de votre aide