Cadre autour de l'avatar en fonction du groupe

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

Résolu Cadre autour de l'avatar en fonction du groupe

Message par Ocsidot le Lun 11 Juin 2012 - 10:47

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 Very Happy 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


Dernière édition par Ocsidot le Mar 12 Juin 2012 - 16:21, édité 1 fois

Ocsidot
Nouveau membre

Messages : 18
Inscrit(e) le : 09/01/2012

http://aksu-eauxblanches.forumgratuit.org/
Ocsidot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre autour de l'avatar en fonction du groupe

Message par Ocsidot le Mar 12 Juin 2012 - 13:43

Un petit up Very Happy

Ocsidot
Nouveau membre

Messages : 18
Inscrit(e) le : 09/01/2012

http://aksu-eauxblanches.forumgratuit.org/
Ocsidot a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre autour de l'avatar en fonction du groupe

Message par Psyaliah le Mar 12 Juin 2012 - 14:45

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:
Arrow Panneau d'administration
Arrow Affichage
Arrow Templates
Arrow Général

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

Like a Star @ heaven 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 :enreg: puis n'oublier pas de cliquer sur ajout 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à:
Arrow Panneau d'administration
Arrow Utilisateurs & Groupes
Arrow Rangs
Arrow 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:
Arrow Panneau d'administration
Arrow Modules
Arrow HTML & JAVASCRIPT
Arrow Gestion des codes Javascripts

Cliquez sur le bouton " ajout 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.
Like a Star @ heaven 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:
Arrow Panneau d'administration
Arrow Affichage
Arrow Images et couleurs
Arrow Couleurs
Arrow 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 ! Smile

Bonne chance !

Psyaliah
# Tropactif #

Féminin
Messages : 1280
Inscrit(e) le : 22/12/2011

http://e-booking.forumgratuit.org
Psyaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre autour de l'avatar en fonction du groupe

Message par Ocsidot le Mar 12 Juin 2012 - 15:20

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 Yes

Ocsidot
Nouveau membre

Messages : 18
Inscrit(e) le : 09/01/2012

http://aksu-eauxblanches.forumgratuit.org/
Ocsidot a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre autour de l'avatar en fonction du groupe

Message par Ocsidot le Mar 12 Juin 2012 - 16:19

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 Very Happy)

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

Ocsidot
Nouveau membre

Messages : 18
Inscrit(e) le : 09/01/2012

http://aksu-eauxblanches.forumgratuit.org/
Ocsidot a été remercié(e) par l'auteur de ce sujet.

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


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