Cadre autour de l'avatar en fonction du groupe
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Cadre autour de l'avatar en fonction du groupe
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
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
Dernière édition par Ocsidot le Mar 12 Juin 2012 - 16:21, édité 1 fois
Re: Cadre autour de l'avatar en fonction du groupe
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:
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:
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:
Par exemple, pour le rang administrateur:
Si votre rang comporte des espaces dans le nom, supprimez les espaces dans "class="Nomdurang"", par exemple:
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:
Puis, pour chaque rang, on rajoute cette ligne:
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:
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:
Maintenant, on va écrire pour chaque rang quelque chose comme ceci:
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:
Puis enregistrer tout ça !
Bonne chance !
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 !
Re: Cadre autour de l'avatar en fonction du groupe
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
En tout cas, ton explication m'a donné un premier élément de réponse et un axe dans lequel chercher.
Merci
Re: Cadre autour de l'avatar en fonction du groupe
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 )
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
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
Sujets similaires
» Cadre autour de la PA
» Cadre autour des photos
» Cadre autour de l'accordeon.
» cadre autour de ma description en PA
» Cadre autour des forums
» Cadre autour des photos
» Cadre autour de l'accordeon.
» cadre autour de ma description en PA
» Cadre autour des forums
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum