Cambiare lo sfondo dei topic a seconda del sesso dell'utente


Tutorial Cambiare lo sfondo dei topic a seconda del sesso dell'utente

Messaggio Da Niko il Lun 24 Feb 2014 - 16:55

Cambiare lo sfondo dei topic a seconda del sesso dell'utente


1. A cosa serve?

Per far si che questo script funzioni, è necessario che il campo 'sesso' sia visualizzato nei profili nei messaggi non solo con i, testo ma anche con l'immagine :bene: 
Andremo a creare il CSS aggiuntivo con la classe fa_postbody_xy (per i maschi) e fa_postbody_xx (per le femmine) rispettivamente per i messaggi di maschi e femmine e potremo cosi in seguito, personalizzarlo.

2. Il codice javascript

PDA  Moduli  HTML & Javascript Gestione del codice Javascript
Creare un nuovo codice Javascript da applicare 'Nei soggetti/argomenti".


  • Titolo: (quello che volete)

  • Dove: nei soggetti/argomenti

  • Javascript :
    Code: ----------Select Content
    Codice:

    $(function() {
       
       //Indicare qui la versione del tuo 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");
       }
    });





Importante! per far funzionare questo codice javascript è necessario cambiare la variabile version che trovate nel codice javscript (all'inizio) con la versio del vostro forum scegliendo tra

  • phpBB2
  • phpBB3
  • punBB
  • Invision.



3. Personalizzazione del codice CSS (stile)

Avendo due diverse classi (maschi e femmine) è necessario modificarle in modo da avere due diversi stili a seconda del sesso dell'utente; questo punto può essere modificato a piacimento, secondo la vostra fantasia :good: 

PDA Visualizzazione  Immagini e colori  Colori  Foglio di stile (CSS)


Code: ----------Select Content
Codice:

.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;
}


4. Il risultato :

Enlarge this image Click to see fullsize


ed ecco fatto   
siamo sempre disponibili per suggerimenti e supporto nelle sezioni dedicate all'aiuto :zen: 


Translated and updated by the Forumotion Staff


Tutorial creato da:
Copyrigth © FORUMATTIVO.COM


avatar
Niko
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7756
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum