The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Change the background in function of the gender of the poster

2 posters

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

Tutorial Change the background in function of the gender of the poster

Post by Shadow October 9th 2012, 11:40 am

Change the background in function of the gender of the poster



1. Definition :

       So that this tip works, it is necessary that the field "gender" is visible in the messages profile and this, with a picture and not only the text ! We are going to create a CSS additional class fa_postbody_xy (for the boys) and fa_postbody_xx (for the girls) to the message body according to the informed gender, and with this new class, we'll be able to personalize the design of the post by manipulating its CSS.

       2. The codes :
       
Administration Panel Change the background in function of the gender of the poster Arrow10 Modules Change the background in function of the gender of the poster Arrow10 HTML & Javascript Change the background in function of the gender of the poster Arrow10 Javascript codes management
Change the background in function of the gender of the poster AjouterCreate a new Javascript to apply "in the topics".


  • Title : (What you want)
  • Placement : in the topics
  • Javascript code :
    Code:

    $(function() {
       
       //Indicate here the version of your forum.
       var version = "phpBB3";
       
       if(version.toLowerCase() == "phpbb2"){   
          $(".postdetails img[title='Male']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xy");
          $(".postdetails img[title='Female']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xx");
       }else if(version.toLowerCase() == "phpbb3"){   
          $(".postprofile img[title='Male']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xy");
          $(".postprofile img[title='Female']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xx");   
       }else if(version.toLowerCase() == "punbb"){   
          $(".user-info img[title='Male']").closest('.postmain').addClass("fa_postbody_xy");
          $(".user-info img[title='Female']").closest('.postmain').addClass("fa_postbody_xx");   
       }else if(version.toLowerCase() == "invision"){         
          $(".postprofile img[title='Male']").closest('.post-container').addClass("fa_postbody_xy");
          $(".postprofile img[title='Female']").closest('.post-container').addClass("fa_postbody_xx");
       }
    });




Important!: To make it works you absolutely need to indicate the version of your forum by editing the value of the variable version, you have the choice between phpBB2, phpBB3, punBB and Invision.
       

3. Personalization of the CSS :    

For example, here we have a CSS which act on the 2 classes that we have set up, thanks to the javascript  a background picture will be applied, different depending on your skill and your imagination. Smile  

Administration Panel Change the background in function of the gender of the poster Arrow10 Display Change the background in function of the gender of the poster Arrow10 Colors and pics Change the background in function of the gender of the poster Arrow10 Colors Change the background in function of the gender of the poster Arrow10 CSS stylesheet


Code:

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

4. The results :
Change the background in function of the gender of the poster Sin_ta37

It's done !  cheers  cheers  cheers



Translated and updated by the Forumotion Staff

Tutorial created by : Turbodeif - 06.20.12, from the Spanish Support Forum
Copyright© FORUMOTION.COM
Shadow
Shadow
Manager
Manager

Male Posts : 16208
Reputation : 1832
Language : French, English

Back to top Go down

Tutorial Re: Change the background in function of the gender of the poster

Post by skouliki February 9th 2020, 9:27 am

This code was updated to fit in with the new HTTPS address

updated 09.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 15399
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

محمد قدوتنا likes this post

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

 
Permissions in this forum:
You cannot reply to topics in this forum