Fond changeant selon le sexe du posteur

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

  • 0

Astuce Fond changeant selon le sexe du posteur

Message par Threax le Sam 18 Aoû 2012 - 20:35

Fond des messages selon sexe du posteur


Définition
Pour que cette astuce fonctionne, il est indispensable que le champ "sexe" soit visible dans le profil des messages et ce avec une image et pas seulement le texte ! Ce que nous allons faire c'est créer une classe CSS additionnelle fa_postbody_xy (pour les garçons) et fa_postbody_xx (pour les filles) au bloc du corps du message selon le sexe informé dans le profil du message, et au moyen de cette nouvelle classe nous pourrons personnaliser le design du post en manipulant son CSS.

Codes à insérer

Panneau d'administration Modules HTML & Javascript Gestion des codes Javascript
Cliquez sur ajout Créer un nouveau javascript, indiquez le titre de votre choix et cochez l'affichage "Sur les sujets". Insérez ce code :

Code:
$(function() {
   
   //Ici indiquez la version de votre forum.
   var version = "phpBB3";
   
   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");
   }
});
[/list]

Important!: Pour que cela fonctionne il faut impérativement indiquer la version de votre forum en éditant la valeur de la variable version, vous avez le choix entre phpBB2, phpBB3, punBB et Invision.


Personnalisation du CSS

A titre d'exemple, ici nous avons un CSS qui agit sur les deux classes que nous avons mises en place. Grâce au Javascript va s'appliquer une image de fond distincte au corps des messages en fonction du sexe du membre. Les possibilités sont nombreuses tout dépend de votre habileté et imagination ! Smile

Panneau d'administration Affichage Images & Couleurs Couleurs - Feuille de style CSS

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

Résultat



Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax 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