Verander de achtergrond afhankelijk van het geslacht

Vorige onderwerp Volgende onderwerp Ga naar beneden

  • 0

Tutorial Verander de achtergrond afhankelijk van het geslacht

Bericht van Ginny Wemel op di 26 nov 2013 - 13:10

Verander de achtergrond afhankelijk van het geslacht



DEFINITIE:

Om deze tip te laten werken, is het noodzakelijk dat het veld "geslacht" zichtbaar is in de berichten en op profielen met een foto en niet alleen de tekst! We gaan een extra CSS klasse fa_postbody_xy (voor de jongens) en fa_postbody_xx creëren (voor meisjes) en door deze nieuwe klasse, zullen we in staat zijn de achtergrond van de geslachtsvorm te veranderen door het manipuleren van de CSS.

DE CODES:

Beheerderspaneel Modules HTML & Javascript Javascript codes beheer
Maak een nieuw Javascript.

  • Titel: (Wat je zelf wilt)
  • Plaatsing: In de topics (Onderwerpen)
  • 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");
 }
 });
Belangrijk: Om het te laten werken is het absoluut nodig om de versie van uw forum aan te geven door de waarde van de variabele versie te bewerken, U heeft de keuze tussen phpBB2, phpBB3, PunBB en Invision.

De CSS aanpassen:

Als voorbeeld hebben we hier een CSS die werkt op de twee klassen die we hebben geïmplementeerd. Javascript past een duidelijke achtergrondafbeelding toe onder de hoofdtekst van de berichten op basis van het geslacht van het lid. De mogelijkheden zijn talrijk, afhankelijk van je vaardigheden en verbeeldingskracht!  Smile

Beheerderspaneel Display Colors and pics Colors 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;
}
Vervang de url's van de foto's door die van uzelf indien U een andere achtergrond wenst!

HET RESULTAAT:




avatar

Ginny Wemel
Forumlid

Vrouw Aantal berichten : 60
Registratiedatum : 18-09-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Nee

Profiel bekijken http://www.dwvz.forumactie.com
Ginny Wemel is bedankt door de starter van dit topic.

Tutorial Re: Verander de achtergrond afhankelijk van het geslacht

Bericht van Nathy op di 26 nov 2013 - 16:32

Gelieve de volgende keer de officiële opmaak voor de tutorials te gebruiken Wink (Edit: ik heb dit inmiddels al toegepast)

Tutorial Goedgekeurd!


Laatst aangepast door Nathy op di 26 nov 2013 - 22:16; in totaal 1 keer bewerkt
avatar

Nathy
Medaille Forumlid

Man Aantal berichten : 614
Geboortedatum : 18-09-98
Leeftijd : 20
Locatie : België
Registratiedatum : 05-01-12
Oprichter van het forum : Nee
Templates gewijzigd : Nee
CSS : Nee

Profiel bekijken http://testforumbe-nl.actieforum.com/
Nathy is bedankt door de starter van dit topic.

Tutorial Re: Verander de achtergrond afhankelijk van het geslacht

Bericht van Ginny Wemel op di 26 nov 2013 - 16:40

Oké Smile 


"Sluit de gene van wie je houd, in je hart!"
avatar

Ginny Wemel
Forumlid

Vrouw Aantal berichten : 60
Registratiedatum : 18-09-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Nee

Profiel bekijken http://www.dwvz.forumactie.com
Ginny Wemel is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum