Fond changeant selon le genre du posteur

par Threax Sam 18 Aoû 2012 - 20:35

Fond des messages en fonction du genre de l'utilisateur

Cette astuce permet d'appliquer un fond (soit en image, soit en couleur) en fonction du champ de profil genre (ou sexe) renseigné par l'utilisateur :

Voir illustration :

Paramétrage du champ de profil

Afin que cette astuce soit fonctionnelle, il est nécessaire que le champ de profil genre (ou sexe) soit présent sur les messages postés par les utilisateurs.

Panneau d'administration  Utilisateurs & Groupes  Utilisateurs - Profils

Editez le champ de profil genre (ou sexe) en cliquant sur la roue crantée ( edit

) correspond. Pour l'option Affichage, cochez Messages.

Voir illustration :

N'oubliez pas de cliquer sur le bouton :enreg:

afin de sauvegarder les modifications.

Création du script

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Fond des messages en fonction du genre de l'utilisateur" et pour placement "Sur les sujets" (plus d'informations sur la gestion des scripts).

Code:: $(function() { //Ici indiquez la version de votre forum. var version = "phpbb2"; if(version.toLowerCase() == "phpbb2"){ $(".postdetails img[title='Masculin']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xy"); $(".postdetails img[title='Féminin']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xx"); }else if(version.toLowerCase() == "phpbb3"){ $(".postprofile img[title='Masculin']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xy"); $(".postprofile img[title='Féminin']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xx"); }else if(version.toLowerCase() == "punbb"){ $(".user-info img[title='Masculin']").closest('.postmain').addClass("fa_postbody_xy"); $(".user-info img[title='Féminin']").closest('.postmain').addClass("fa_postbody_xx"); }else if(version.toLowerCase() == "invision"){ $(".postprofile img[title='Masculin']").closest('.post-container').addClass("fa_postbody_xy"); $(".postprofile img[title='Féminin']").closest('.post-container').addClass("fa_postbody_xx"); }else if(version.toLowerCase() == "modernbb"){ $(".postprofile img[title='Masculin']").closest('.postprofile').next('.post-head').next('.postbody').addClass("fa_postbody_xy"); $(".postprofile img[title='Féminin']").closest('.postprofile').next('.post-head').next('.postbody').addClass("fa_postbody_xx"); } });

En fonction de la version de votre forum, il est nécessaire de modifier le script, notamment l'élément :

Code:: var version = "phpbb2";

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Insertion du CSS

Panneau d'administration  Affichage  Images et Couleurs - couleurs (Onglet Feuille de style CSS)

Code:: .fa_postbody_xy{ background: url("https://i.servimg.com/u/f45/17/45/19/77/xy10.png"); min-height: 250px; } .fa_postbody_xx { background: url("https://i.servimg.com/u/f45/17/45/19/77/xx10.png"); min-height: 500px; }

La classe fa_postbody_xy permet de gérer l'affichage du fond du message pour un homme et la classe fa_postbody_xx pour une femme. Vous pouvez, bien évidemment, remplacer les images par celles de votre choix. De la même manière, vous pouvez également adapter la hauteur de l'image du fond par défaut en modifiant la valeur attribuée à min-height.

Si vous ne souhaitez pas attribuer une image mais une couleur, il suffit de retirer les lignes :

Code:: background: url("https://i.servimg.com/u/f45/17/45/19/77/xy10.png"); background: url("https://i.servimg.com/u/f45/17/45/19/77/xx10.png");

Et les remplacer par :

Code:: background-color: blue; background-color: pink;

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.