Scegli il colore del tuo profilo utente nei messaggi

Tutorial Scegli il colore del tuo profilo utente nei messaggi

Messaggio Da Niko Mar 21 Dic 2021 - 16:56

Scegli il colore del tuo profilo utente nei messaggi


Questo tutorial vi consentirà di permettere agli utenti di scegliere il colore da visualizzare nel proprio profilo visibile nella colonna laterale dei post pubblicati.

Scegli il colore del tuo profilo utente nei messaggi Animat10

Impostazioni profilo

Andiamo verso Pannello di amministrazione ► Utenti e Gruppi ► Utenti ► Profilo e creiamo un nuovo campo profilo con queste impostazioni:

  • Tipo : Lista di immagini
  • Nome: a libera scelta
  • Descrizione : a libera scelta
  • URL icona : lasciare vuoto
  • Obbligatorio ?: a libera scelta
  • Visualizzazione : Profilo + Messaggi
  • Tipo visualizzazione : Icona oppure Icona + Testo
  • Chi può modificare il campo ? Moderatori + Utente
  • Mostra il campo per gli utenti che sono almeno : Ospite
  • Separatore : a libera scelta


Nella sezione successiva delle impostazioni, è possibile utilizzare questi contenuti:


Esempio di compilazione:

Impostazioni templates & Javascript

PhpBB2

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifica il template viewtopic_body
Sostituisci:

Con:

Andiamo poi verso Pannello di amministrazione ► e creiamo un nuovo codice Javascript con queste impostazioni, assicurandoci che la gestione dei codici javascript sia attivata:

  • Titolo: a tua scelta
  • Dove: negli argomenti
  • Codice:
    Codice:
    $(function() {

      var version = "phpBB2";
     
      if(version.toLowerCase() == "phpbb2"){
          $(".postprofile img[title='undefined']").closest('.postprofile').addClass("undefined");
          $(".postprofile img[title='blue']").closest('.postprofile').addClass("blue");
          $(".postprofile img[title='grey']").closest('.postprofile').addClass("grey");
          $(".postprofile img[title='green']").closest('.postprofile').addClass("green");
          $(".postprofile img[title='yellow']").closest('.postprofile').addClass("yellow");
          $(".postprofile img[title='purple']").closest('.postprofile').addClass("purple");
        $(".postprofile img[title='Orange']").closest('.postprofile').addClass("Orange");
        $(".postprofile img[title='Pink']").closest('.postprofile').addClass("Pink");
        $(".postprofile img[title='black']").closest('.postprofile').addClass("black");
        $(".postprofile img[title='red']").closest('.postprofile').addClass("red");
        $(".postprofile img[title='LightCoral']").closest('.postprofile').addClass("LightCoral");
        $(".postprofile img[title='Wisteria']").closest('.postprofile').addClass("Wisteria");
        $(".postprofile img[title='SlateBlue']").closest('.postprofile').addClass("SlateBlue");
        $(".postprofile img[title='Indigo']").closest('.postprofile').addClass("Indigo");
      }
    });


Infine aggiungiamo questo codice CSS andando verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS
Codice:
.postprofile {
  background: #;
    border-bottom: 16px solid #607d8b;
    border-left: 1px solid #607d8b;
    border-radius: 3px!important;
    border-right: 1px solid #607d8b;
    border-top: 16px solid #607d8b;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
hr {
    margin: 5px 0px!important;
    padding: 2px!important;
}
 .avatare:after {
    margin-top: 22px;
    display: flex;
    background: #607d8b;
    content: "Profile";
  padding: 5px!important;
    justify-content: center;
}
 
.postprofile:before {
  background: #607d8b;
    position: relative;
    bottom: 40px;
    text-align: center;
    border-radius: 33px;
    color: beige;
    content: "OFFLINE";
  display: block!important;
}
 
 div.post.online .postprofile:before {
    border-radius: 33px;
    color: #f5f5dc;
    content: "ONLINE";
    display: block!important;
    bottom: 40px;
    position: relative;
    text-align: center;
    z-index: 2;
}
 
.postprofile .label {
    padding-right: 6px;
    font-weight: 500;
}
 
 
 
 
 
 
.blue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #3e459c!important;
    border-left: 1px solid #3e459c!important;
    border-right: 1px solid #3e459c!important;
    border-top: 16px solid #3e459c!important;
}
.grey {
    background: #f6f6f6!important;
    border-bottom: 16px solid #a0a09a!important;
    border-left: 1px solid #a0a09a!important;
    border-right: 1px solid #a0a09a!important;
    border-top: 16px solid #a0a09a!important;
}
.green {
    background: #f6f6f6!important;
    border-bottom: 16px solid #42b649!important;
    border-left: 1px solid #42b649!important;
    border-right: 1px solid #42b649!important;
    border-top: 16px solid #42b649!important;
}
.yellow {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ede816!important;
    border-left: 1px solid #ede816!important;
    border-right: 1px solid #ede816!important;
    border-top: 16px solid #ede816!important;
}
.purple {
    background: #f6f6f6!important;
    border-bottom: 16px solid #aa4399!important;
    border-left: 1px solid #aa4399!important;
    border-right: 1px solid #aa4399!important;
    border-top: 16px solid #aa4399!important;
}
 
 
 
 div.post.online .postprofile.undefined:before {
  background: #;!important;
}
 div.post.online .postprofile.purple:before {
  background: #aa4399!important;
}
 div.post.online .postprofile.grey:before {
  background: #a0a09a;!important;
}
 div.post.online .postprofile.blue:before {
  background: #3e459c!important;
}
 div.post.online .postprofile.green:before {
  background: #42b649;!important;
}
 div.post.online .postprofile.yellow:before {
  background: #ede816!important;
}
.undefined .avatare:after {
  background: #;!important;
}
.purple .avatare:after {
  background: #aa4399!important;
}
.grey .avatare:after {
  background: #a0a09a;!important;
}
.blue .avatare:after {
  background: #3e459c!important;
}
.green .avatare:after {
  background: #42b649;!important;
}
.yellow .avatare:after {
  background: #ede816!important;
}
 
 
 
.undefined hr {
 background-color: #!important;
}
.purple hr {
 background-color: #aa4399!important;
}
.grey hr {
  background-color: #a0a09a;!important;
}
.blue hr {
 background-color: #3e459c!important;
}
.green hr {
background-color: #42b649;!important;
}
.yellow hr {
 background-color: #ede816!important;
}
.Orange {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #ffa200!important;
    border-left: 1px solid #ffa200!important;
    border-right: 1px solid #ffa200!important;
    border-top: 16px solid #ffa200!important;
}
 div.post.online .postprofile.Orange:before {
  background: #ffa200!important;
}
.Orange .avatare:after {
  background: #ffa200!important;
}
.Orange hr {
 background-color: #ffa200!important;
}
.LightCoral {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #f08080!important;
    border-left: 1px solid #f08080!important;
    border-right: 1px solid #f08080!important;
    border-top: 16px solid #f08080!important;
}
 div.post.online .postprofile.LightCoral:before {
  background: #f08080!important;
}
.LightCoral .avatare:after {
  background: #f08080!important;
}
.LightCoral hr {
 background-color: #f08080!important;
}
.Pink {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #ffc0cb!important;
    border-left: 1px solid #ffc0cb!important;
    border-right: 1px solid #ffc0cb!important;
    border-top: 16px solid #ffc0cb!important;
}
 div.post.online .postprofile.Pink:before {
  background: #ffc0cb!important;
}
.Pink .avatare:after {
  background: #ffc0cb!important;
}
.Pink hr {
 background-color: #ffc0cb!important;
}
.black {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #000000!important;
    border-left: 1px solid #000000!important;
    border-right: 1px solid #000000!important;
    border-top: 16px solid #000000!important;
}
 div.post.online .postprofile.black:before {
  background: #000000!important;
}
.black .avatare:after {
  color: #fff;
  background: #000000!important;
}
.black hr {
 background-color: #000000!important;
}
.red {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #e90000!important;
    border-left: 1px solid #e90000!important;
    border-right: 1px solid #e90000!important;
    border-top: 16px solid #e90000!important;
}
 div.post.online .postprofile.red:before {
  background: #e90000!important;
}
.red .avatare:after {
  background: #e90000!important;
}
.red hr {
 background-color: #e90000!important;
}
.Light Coral {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #f08080!important;
    border-left: 1px solid #f08080!important;
    border-right: 1px solid #f08080!important;
    border-top: 16px solid #f08080!important;
}
 div.post.online .postprofile.Light Coral:before {
  background: #f08080!important;
}
.Light Coral .avatare:after {
  background: #f08080!important;
}
.Light Coral hr {
 background-color: #f08080!important;
}
.Wisteria {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #c6aec7!important;
    border-left: 1px solid #c6aec7!important;
    border-right: 1px solid #c6aec7!important;
    border-top: 16px solid #c6aec7!important;
}
 div.post.online .postprofile.Wisteria:before {
  background: #c6aec7!important;
}
.Wisteria .avatare:after {
  background: #c6aec7!important;
}
.Wisteria hr {
 background-color: #c6aec7!important;
}
.SlateBlue {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #6a5acd!important;
    border-left: 1px solid #6a5acd!important;
    border-right: 1px solid #6a5acd!important;
    border-top: 16px solid #6a5acd!important;
}
 div.post.online .postprofile.SlateBlue:before {
  background: #6a5acd!important;
}
.SlateBlue .avatare:after {
  background: #6a5acd!important;
}
.SlateBlue hr {
 background-color: #6a5acd!important;
}
.Indigo {
    background: #f6f6f6!important;
    border-bottom: 16px solid  #4b0082!important;
    border-left: 1px solid #4b0082!important;
    border-right: 1px solid #4b0082!important;
    border-top: 16px solid #4b0082!important;
}
 div.post.online .postprofile.Indigo:before {
  background: #4b0082!important;
}
.Indigo .avatare:after {
  background: #4b0082!important;
}
.Indigo hr {
 background-color: #4b0082!important;
}
.namee {
    font-size: 16px;
    padding: 5px;
    text-align: center;
}

PhpBB3

Andiamo poi verso Pannello di amministrazione ► e creiamo un nuovo codice Javascript con queste impostazioni, assicurandoci che la gestione dei codici javascript sia attivata:

  • Titolo: a tua scelta
  • Dove: Negli argomenti
  • Codice:
    Codice:
    $(function() {
     
      var version = "phpBB3";
     
      if(version.toLowerCase() == "phpbb3"){
          $(".postprofile img[title='undefined']").closest('.postprofile').addClass("undefined");
          $(".postprofile img[title='blue']").closest('.postprofile').addClass("blue");
          $(".postprofile img[title='grey']").closest('.postprofile').addClass("grey");
          $(".postprofile img[title='green']").closest('.postprofile').addClass("green");
          $(".postprofile img[title='yellow']").closest('.postprofile').addClass("yellow");
          $(".postprofile img[title='purple']").closest('.postprofile').addClass("purple");
        $(".postprofile img[title='Orange']").closest('.postprofile').addClass("Orange");
        $(".postprofile img[title='Pink']").closest('.postprofile').addClass("Pink");
        $(".postprofile img[title='black']").closest('.postprofile').addClass("black");
        $(".postprofile img[title='red']").closest('.postprofile').addClass("red");
        $(".postprofile img[title='LightCoral']").closest('.postprofile').addClass("LightCoral");
        $(".postprofile img[title='Wisteria']").closest('.postprofile').addClass("Wisteria");
        $(".postprofile img[title='SlateBlue']").closest('.postprofile').addClass("SlateBlue");
        $(".postprofile img[title='Indigo']").closest('.postprofile').addClass("Indigo");
      }
    });


Infine aggiungiamo questo codice CSS andando verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS
Codice:
.postprofile {
    background: #f6f6f6;
    border-bottom: 16px solid #607d8b;
    border-left: 1px solid #607d8b;
    border-radius: 3px;
    border-right: 1px solid #607d8b;
    border-top: 16px solid #607d8b;
    padding: 60px 3px 3px!important;
width: 18%;
}
 
hr {
    margin: 8px 0px;
    padding: 2px;
}
 
 
 dd.postprofile-info {
    background-color: #fff;
    border-bottom: 1px dotted #2196f3;
    border-radius: 5px 5px 5px 5px;
    border-right: 3px solid #2196f3;
}
 
dd:nth-child(6):before {
    margin-bottom: 10px;
    background: #607d8b;
    color: #fff;
    content: "profile";
    display: flex;
    justify-content: center;
    padding: 4px;
}
 
.postprofile:before {
padding: 5px;
    text-align: center;
    background: #607d8b;
    border-radius: 33px;
    color: beige;
    content: "OFFLINE";
}
 
 div.post.online .postprofile:before {
padding: 5px;
  text-align: center;
    border-radius: 33px;
    color: beige;
    content: "ONLINE";
}
 
div.post .postprofile:before {
    left: 7px;
    position: absolute;
    right: 7px;
    top: 10px;
    z-index: 2;
}
.postprofile .label {
    padding-right: 6px;
    font-weight: 500;
}
 
 
 
 
 
 
.blue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #3e459c!important;
    border-left: 1px solid #3e459c!important;
    border-right: 1px solid #3e459c!important;
    border-top: 16px solid #3e459c!important;
}
.grey {
    background: #f6f6f6!important;
    border-bottom: 16px solid #a0a09a!important;
    border-left: 1px solid #a0a09a!important;
    border-right: 1px solid #a0a09a!important;
    border-top: 16px solid #a0a09a!important;
}
.green {
    background: #f6f6f6!important;
    border-bottom: 16px solid #42b649!important;
    border-left: 1px solid #42b649!important;
    border-right: 1px solid #42b649!important;
    border-top: 16px solid #42b649!important;
}
.yellow {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ede816!important;
    border-left: 1px solid #ede816!important;
    border-right: 1px solid #ede816!important;
    border-top: 16px solid #ede816!important;
}
.purple {
    background: #f6f6f6!important;
    border-bottom: 16px solid #aa4399!important;
    border-left: 1px solid #aa4399!important;
    border-right: 1px solid #aa4399!important;
    border-top: 16px solid #aa4399!important;
}
 
 
 div.post.online .postprofile.undefined:before {
  background: #;!important;
}
 div.post.online .postprofile.purple:before {
  background: #aa4399!important;
}
 div.post.online .postprofile.grey:before {
  background: #a0a09a;!important;
}
 div.post.online .postprofile.blue:before {
  background: #3e459c!important;
}
 div.post.online .postprofile.green:before {
  background: #42b649;!important;
}
 div.post.online .postprofile.yellow:before {
  background: #ede816!important;
}
.undefined dd:nth-child(6):before {
  background: #;!important;
}
.purple dd:nth-child(6):before {
  background: #aa4399!important;
  color: #fff;
}
.grey dd:nth-child(6):before {
  background: #a0a09a;!important;
  color: #fff;
}
.blue dd:nth-child(6):before {
  background: #3e459c!important;
  color: #fff;
}
.green dd:nth-child(6):before {
  background: #42b649;!important;
  color: #fff;
}
.yellow dd:nth-child(6):before {
  background: #ede816!important;
  color: #000;
}
 
.undefined .postprofile dd {
    border-bottom: 1px dotted #;!important;
    border-right: 3px solid #;!important;
}
.purple .postprofile dd {
    border-bottom: 1px dotted #aa4399!important;
    border-right: 3px solid #aa4399!important;
}
.grey .postprofile dd {
    border-bottom: 1px dotted #a0a09a;!important;
    border-right: 3px solid #a0a09a;!important;
}
.blue .postprofile dd {
    border-bottom: 1px dotted #3e459c!important;
    border-right: 3px solid #3e459c!important;
}
.green .postprofile dd {
    border-bottom: 1px dotted #42b649;!important;
    border-right: 3px solid #42b649;!important;
}
.yellow .postprofile dd {
    border-bottom: 1px dotted #ede816!important;
    border-right: 3px solid #ede816!important;
}
 
.undefined hr {
    border-bottom:2px solid #;!important;
}
.purple hr {
    border-bottom: 2px solid #aa4399!important;
}
.grey hr {
    border-bottom: 2px solid #a0a09a;!important;
}
.blue hr {
    border-bottom: 2px solid #3e459c!important;
}
.green hr {
    border-bottom: 2px solid #42b649;!important;
}
.yellow hr {
    border-bottom: 2px solid #ede816!important;
}
.Orange {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffa200!important;
    border-left: 1px solid #ffa200!important;
    border-right: 1px solid #ffa200!important;
    border-top: 16px solid #ffa200!important;
}
.Orange hr {
    border-bottom: 2px solid #ffa200!important;
}
.Orange .postprofile dd {
    border-bottom: 1px dotted #ffa200!important;
    border-right: 3px solid #ffa200!important;
}
 div.post.online .postprofile.Orange:before {
  background: #ffa200!important;
}
.Orange dd:nth-child(6):before {
  background: #ffa200!important;
  color: #fff;
}
.Pink {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffc0cb!important;
    border-left: 1px solid #ffc0cb!important;
    border-right: 1px solid #ffc0cb!important;
    border-top: 16px solid #ffc0cb!important;
}
.Pink hr {
    border-bottom: 2px solid #ffc0cb!important;
}
.Pink .postprofile dd {
    border-bottom: 1px dotted #ffc0cb!important;
    border-right: 3px solid #ffc0cb!important;
}
 div.post.online .postprofile.Pink:before {
  background: #ffc0cb!important;
}
.Pink dd:nth-child(6):before {
  background: #ffc0cb!important;
  color: #000;
}
.black {
    background: #f6f6f6!important;
    border-bottom: 16px solid #000000!important;
    border-left: 1px solid #000000!important;
    border-right: 1px solid #000000!important;
    border-top: 16px solid #000000!important;
}
.black hr {
    border-bottom: 2px solid #000000!important;
}
.black .postprofile dd {
    border-bottom: 1px dotted #000000!important;
    border-right: 3px solid #000000!important;
}
 div.post.online .postprofile.black:before {
  background: #000000!important;
}
.black dd:nth-child(6):before {
  background: #000000!important;
 color: #fff;
}
.red {
    background: #f6f6f6!important;
    border-bottom: 16px solid #e90000!important;
    border-left: 1px solid #e90000!important;
    border-right: 1px solid #e90000!important;
    border-top: 16px solid #e90000!important;
}
.red hr {
    border-bottom: 2px solid #e90000!important;
}
.red .postprofile dd {
    border-bottom: 1px dotted #e90000!important;
    border-right: 3px solid #e90000!important;
}
 div.post.online .postprofile.red:before {
  background: #e90000!important;
}
.red dd:nth-child(6):before {
  background: #e90000!important;
 color: #fff;
}
.LightCoral {
    background: #f6f6f6!important;
    border-bottom: 16px solid #f08080!important;
    border-left: 1px solid #f08080!important;
    border-right: 1px solid #f08080!important;
    border-top: 16px solid #f08080!important;
}
.LightCoral hr {
    border-bottom: 2px solid #f08080!important;
}
.LightCoral .postprofile dd {
    border-bottom: 1px dotted #f08080!important;
    border-right: 3px solid #f08080!important;
}
 div.post.online .postprofile.LightCoral:before {
  background: #f08080!important;
}
.LightCoral dd:nth-child(6):before {
  background: #f08080!important;
 color: #fff;
}
.Wisteria {
    background: #f6f6f6!important;
    border-bottom: 16px solid #c6aec7!important;
    border-left: 1px solid #c6aec7!important;
    border-right: 1px solid #c6aec7!important;
    border-top: 16px solid #c6aec7!important;
}
.Wisteria hr {
    border-bottom: 2px solid #c6aec7!important;
}
.Wisteria .postprofile dd {
    border-bottom: 1px dotted #c6aec7!important;
    border-right: 3px solid #c6aec7!important;
}
 div.post.online .postprofile.Wisteria:before {
  background: #c6aec7!important;
}
.Wisteria dd:nth-child(6):before {
  background: #c6aec7!important;
 color: #fff;
}
.SlateBlue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #6a5acd!important;
    border-left: 1px solid #6a5acd!important;
    border-right: 1px solid #6a5acd!important;
    border-top: 16px solid #6a5acd!important;
}
.SlateBlue hr {
    border-bottom: 2px solid #6a5acd!important;
}
.SlateBlue .postprofile dd {
    border-bottom: 1px dotted #6a5acd!important;
    border-right: 3px solid #6a5acd!important;
}
 div.post.online .postprofile.SlateBlue:before {
  background: #6a5acd!important;
}
.SlateBlue dd:nth-child(6):before {
  background: #6a5acd!important;
 color: #fff;
}
.Indigo {
    background: #f6f6f6!important;
    border-bottom: 16px solid #4b0082!important;
    border-left: 1px solid #4b0082!important;
    border-right: 1px solid #4b0082!important;
    border-top: 16px solid #4b0082!important;
}
.Indigo hr {
    border-bottom: 2px solid #4b0082!important;
}
.Indigo .postprofile dd {
    border-bottom: 1px dotted #4b0082!important;
    border-right: 3px solid #4b0082!important;
}
 div.post.online .postprofile.Indigo:before {
  background: #4b0082!important;
}
.Indigo dd:nth-child(6):before {
  background: #4b0082!important;
 color: #fff;
}

ModernBB

Andiamo poi verso Pannello di amministrazione ► e creiamo un nuovo codice Javascript con queste impostazioni, assicurandoci che la gestione dei codici javascript sia attivata:

  • Titolo: a tua scelta
  • Dove: negli argomenti
  • Codice:
    Codice:
     
    $(function() {
     

      var version = "phpBB3";
     
      if(version.toLowerCase() == "phpbb3"){
          $(".postprofile img[title='undefined']").closest('.postprofile').addClass("undefined");
          $(".postprofile img[title='blue']").closest('.postprofile').addClass("blue");
          $(".postprofile img[title='grey']").closest('.postprofile').addClass("grey");
          $(".postprofile img[title='green']").closest('.postprofile').addClass("green");
          $(".postprofile img[title='yellow']").closest('.postprofile').addClass("yellow");
          $(".postprofile img[title='purple']").closest('.postprofile').addClass("purple");
        $(".postprofile img[title='Orange']").closest('.postprofile').addClass("Orange");
        $(".postprofile img[title='Pink']").closest('.postprofile').addClass("Pink");
        $(".postprofile img[title='black']").closest('.postprofile').addClass("black");
        $(".postprofile img[title='red']").closest('.postprofile').addClass("red");
        $(".postprofile img[title='LightCoral']").closest('.postprofile').addClass("LightCoral");
        $(".postprofile img[title='Wisteria']").closest('.postprofile').addClass("Wisteria");
        $(".postprofile img[title='SlateBlue']").closest('.postprofile').addClass("SlateBlue");
        $(".postprofile img[title='Indigo']").closest('.postprofile').addClass("Indigo");
      }
    });


Infine aggiungiamo questo codice CSS andando verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS
Codice:
.postprofile {
    background: #f6f6f6;
    border-bottom: 16px solid #607d8b;
    border-left: 1px solid #607d8b;
    border-radius: 3px;
    border-right: 1px solid #607d8b;
    border-top: 16px solid #607d8b;
    padding: 60px 3px 3px!important;
      position: relative!important;
width: 18%;
}
 
 hr {
    background-color: #fff;
    border-bottom: 1px dotted #2196f3;
margin-bottom: 4px;
    padding: 2px;
}
 
 dd.postprofile-info {
    background-color: #fff;
    border-bottom: 1px dotted #2196f3;
    border-radius: 5px 5px 5px 5px;
    border: 2px solid #607d8b;
}
 
 dd.postprofile-info:before {
    display: flex;
    color: white;
    padding: 4px;
    display: flex;
    content: "profile";
    justify-content: center;
    background: #607d8b;
}
 
.postprofile:before {
    text-align: center;
    background: #607d8b;
    border-radius: 33px;
    color: beige;
    content: "OFFLINE";
}
 
 div.post.online .postprofile:before {
  text-align: center;
    border-radius: 33px;
    color: beige;
    content: "ONLINE";
}
 
div.post .postprofile:before {
    left: 7px;
    position: absolute;
    right: 7px;
    top: 10px;
    z-index: 2;
}
.postprofile .label {
    padding-left: 3px;
    font-weight: 500;
}
 
.blue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #3e459c!important;
    border-left: 1px solid #3e459c!important;
    border-right: 1px solid #3e459c!important;
    border-top: 16px solid #3e459c!important;
}
.grey {
    background: #f6f6f6!important;
    border-bottom: 16px solid #a0a09a!important;
    border-left: 1px solid #a0a09a!important;
    border-right: 1px solid #a0a09a!important;
    border-top: 16px solid #a0a09a!important;
}
.green {
    background: #f6f6f6!important;
    border-bottom: 16px solid #42b649!important;
    border-left: 1px solid #42b649!important;
    border-right: 1px solid #42b649!important;
    border-top: 16px solid #42b649!important;
}
.yellow {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ede816!important;
    border-left: 1px solid #ede816!important;
    border-right: 1px solid #ede816!important;
    border-top: 16px solid #ede816!important;
}
.purple {
    background: #f6f6f6!important;
    border-bottom: 16px solid #aa4399!important;
    border-left: 1px solid #aa4399!important;
    border-right: 1px solid #aa4399!important;
    border-top: 16px solid #aa4399!important;
}
 
 
 div.post.online .postprofile.undefined:before {
  background: #;!important;
}
 div.post.online .postprofile.purple:before {
  background: #aa4399!important;
}
 div.post.online .postprofile.grey:before {
  background: #a0a09a;!important;
}
 div.post.online .postprofile.blue:before {
  background: #3e459c!important;
}
 div.post.online .postprofile.green:before {
  background: #42b649;!important;
}
 div.post.online .postprofile.yellow:before {
  background: #ede816!important;
}
 
.undefined dd.postprofile-info:before {
  background: #;!important;
}
.purple dd.postprofile-info:before {
  background: #aa4399!important;
}
.grey dd.postprofile-info:before {
  background: #a0a09a;!important;
}
.blue dd.postprofile-info:before {
  background: #3e459c!important;
}
.green dd.postprofile-info:before {
  background: #42b649;!important;
}
.yellow dd.postprofile-info:before {
  background: #ede816!important;
}
.undefined dd.postprofile-info {
    border-bottom: 1px dotted #;!important;
    border: 2px solid #;!important;
}
.purple dd.postprofile-info {
    border-bottom: 1px dotted #aa4399!important;
    border: 2px solid #aa4399!important;
}
.grey dd.postprofile-info {
    border-bottom: 1px dotted #a0a09a;!important;
    border: 2px solid #a0a09a;!important;
}
.blue dd.postprofile-info {
    border-bottom: 1px dotted #3e459c!important;
    border: 2px solid #3e459c!important;
}
.green dd.postprofile-info {
    border-bottom: 1px dotted #42b649;!important;
    border: 2px solid #42b649;!important;
}
.yellow dd.postprofile-info {
    border-bottom: 1px dotted #ede816!important;
    border: 2px solid #ede816!important;
}
.undefined hr {
    border-bottom: 1px dotted #;!important;
}
.purple hr {
    border-bottom: 1px dotted #aa4399!important;
}
.grey hr {
    border-bottom: 1px dotted #a0a09a;!important;
}
.blue hr {
    border-bottom: 1px dotted #3e459c!important;
}
.green hr {
    border-bottom: 1px dotted #42b649;!important;
}
.yellow hr {
    border-bottom: 1px dotted #ede816!important;
}
 
.Orange {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffa200!important;
    border-left: 1px solid #ffa200!important;
    border-right: 1px solid #ffa200!important;
    border-top: 16px solid #ffa200!important;
}
.Orange hr {
    border-bottom: 2px solid #ffa200!important;
}
.Orange dd.postprofile-info {
 border-bottom: 1px dotted #ffa200!important;
    border: 2px solid #ffa200!important;
}
 div.post.online .postprofile.Orange:before {
  background: #ffa200!important;
}
.Orange dd.postprofile-info:before {
  background: #ffa200!important;
  color: #fff;
}
.Pink {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffc0cb!important;
    border-left: 1px solid #ffc0cb!important;
    border-right: 1px solid #ffc0cb!important;
    border-top: 16px solid #ffc0cb!important;
}
.Pink hr {
    border-bottom: 2px solid #ffc0cb!important;
}
.Pink dd.postprofile-info {
 border-bottom: 1px dotted #ffc0cb!important;
    border: 2px solid #ffc0cb!important;
}
 div.post.online .postprofile.Pink:before {
  background: #ffc0cb!important;
}
.Pink dd.postprofile-info:before {
  background: #ffc0cb!important;
  color: #000;
}
.black {
    background: #f6f6f6!important;
    border-bottom: 16px solid #000000!important;
    border-left: 1px solid #000000!important;
    border-right: 1px solid #000000!important;
    border-top: 16px solid #000000!important;
}
.black hr {
    border-bottom: 2px solid #000000!important;
}
.black dd.postprofile-info {
 border-bottom: 1px dotted #000000!important;
    border: 2px solid #000000!important;
}
 div.post.online .postprofile.black:before {
  background: #000000!important;
}
.black dd.postprofile-info:before {
  background: #000000!important;
 color: #fff;
}
.red {
    background: #f6f6f6!important;
    border-bottom: 16px solid #e90000!important;
    border-left: 1px solid #e90000!important;
    border-right: 1px solid #e90000!important;
    border-top: 16px solid #e90000!important;
}
.red hr {
    border-bottom: 2px solid #e90000!important;
}
.red dd.postprofile-info {
 border-bottom: 1px dotted #e90000!important;
    border: 2px solid #e90000!important;
}
 div.post.online .postprofile.red:before {
  background: #e90000!important;
}
.red dd.postprofile-info:before {
  background: #e90000!important;
 color: #fff;
}
.LightCoral {
    background: #f6f6f6!important;
    border-bottom: 16px solid #f08080!important;
    border-left: 1px solid #f08080!important;
    border-right: 1px solid #f08080!important;
    border-top: 16px solid #f08080!important;
}
.LightCoral hr {
    border-bottom: 2px solid #f08080!important;
}
.LightCoral dd.postprofile-info {
 border-bottom: 1px dotted #f08080!important;
    border: 2px solid #f08080!important;
}
 div.post.online .postprofile.LightCoral:before {
  background: #f08080!important;
}
.LightCoral dd.postprofile-info:before {
  background: #f08080!important;
 color: #fff;
}
.Wisteria {
    background: #f6f6f6!important;
    border-bottom: 16px solid #c6aec7!important;
    border-left: 1px solid #c6aec7!important;
    border-right: 1px solid #c6aec7!important;
    border-top: 16px solid #c6aec7!important;
}
.Wisteria hr {
    border-bottom: 2px solid #c6aec7!important;
}
.Wisteria dd.postprofile-info {
 border-bottom: 1px dotted #c6aec7!important;
    border: 2px solid #c6aec7!important;
}
 div.post.online .postprofile.Wisteria:before {
  background: #c6aec7!important;
}
.Wisteria dd.postprofile-info:before {
  background: #c6aec7!important;
 color: #fff;
}
.SlateBlue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #6a5acd!important;
    border-left: 1px solid #6a5acd!important;
    border-right: 1px solid #6a5acd!important;
    border-top: 16px solid #6a5acd!important;
}
.SlateBlue hr {
    border-bottom: 2px solid #6a5acd!important;
}
.SlateBlue dd.postprofile-info {
 border-bottom: 1px dotted #6a5acd;!important;
    border: 2px solid #6a5acd;!important;
}
 div.post.online .postprofile.SlateBlue:before {
  background: #6a5acd!important;
}
.SlateBlue dd.postprofile-info:before {
  background: #6a5acd!important;
 color: #fff;
}
.Indigo {
    background: #f6f6f6!important;
    border-bottom: 16px solid #4b0082!important;
    border-left: 1px solid #4b0082!important;
    border-right: 1px solid #4b0082!important;
    border-top: 16px solid #4b0082!important;
}
.Indigo hr {
    border-bottom: 2px solid #4b0082!important;
}
.Indigo dd.postprofile-info {
 border-bottom: 1px dotted #4b0082;!important;
    border: 2px solid #4b0082;!important;
}
 div.post.online .postprofile.Indigo:before {
  background: #4b0082!important;
}
.Indigo dd.postprofile-info:before {
  background: #4b0082!important;
 color: #fff;
}

AwesomeBB

Andiamo poi verso Pannello di amministrazione ► e creiamo un nuovo codice Javascript con queste impostazioni, assicurandoci che la gestione dei codici javascript sia attivata:

  • Titolo: a tua scelta
  • Dove: negli argomenti
  • Codice:
    Codice:
    $(function() {
     
      var version = "phpBB3";
     
      if(version.toLowerCase() == "phpbb3"){
          $(".post-aside img[title='undefined']").closest('.post-aside').addClass("undefined");
          $(".post-aside img[title='blue']").closest('.post-aside').addClass("blue");
          $(".post-aside img[title='grey']").closest('.post-aside').addClass("grey");
          $(".post-aside img[title='green']").closest('.post-aside').addClass("green");
          $(".post-aside img[title='yellow']").closest('.post-aside').addClass("yellow");
          $(".post-aside img[title='purple']").closest('.post-aside').addClass("purple");
        $(".post-aside img[title='Orange']").closest('.post-aside').addClass("Orange");
        $(".post-aside img[title='Pink']").closest('.post-aside').addClass("Pink");
        $(".post-aside img[title='black']").closest('.post-aside').addClass("black");
        $(".post-aside img[title='red']").closest('.post-aside').addClass("red");
        $(".post-aside img[title='LightCoral']").closest('.post-aside').addClass("LightCoral");
        $(".post-aside img[title='Wisteria']").closest('.post-aside').addClass("Wisteria");
        $(".post-aside img[title='SlateBlue']").closest('.post-aside').addClass("SlateBlue");
        $(".post-aside img[title='Indigo']").closest('.post-aside').addClass("Indigo");
      }
    });


Infine aggiungiamo questo codice CSS andando verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS
Codice:
.post-aside {
    background: #f6f6f6!important;
    border-bottom: 16px solid #607d8b;
    border-left: 1px solid #607d8b;
    border-right: 1px solid #607d8b;
    border-top: 16px solid #607d8b;
    padding: 60px 3px 3px!important;
}
 
.blue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #3e459c!important;
    border-left: 1px solid #3e459c!important;
    border-right: 1px solid #3e459c!important;
    border-top: 16px solid #3e459c!important;
}
.grey {
    background: #f6f6f6!important;
    border-bottom: 16px solid #a0a09a!important;
    border-left: 1px solid #a0a09a!important;
    border-right: 1px solid #a0a09a!important;
    border-top: 16px solid #a0a09a!important;
}
.green {
    background: #f6f6f6!important;
    border-bottom: 16px solid #42b649!important;
    border-left: 1px solid #42b649!important;
    border-right: 1px solid #42b649!important;
    border-top: 16px solid #42b649!important;
}
.yellow {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ede816!important;
    border-left: 1px solid #ede816!important;
    border-right: 1px solid #ede816!important;
    border-top: 16px solid #ede816!important;
}
.purple {
    background: #f6f6f6!important;
    border-bottom: 16px solid #aa4399!important;
    border-left: 1px solid #aa4399!important;
    border-right: 1px solid #aa4399!important;
    border-top: 16px solid #aa4399!important;
}
.blue dd {
  border-bottom: 1px dotted #3e459c!important;
    border-left: 3px solid #3e459c!important;
}
.grey dd {
    border-bottom: 1px dotted #a0a09a!important;
    border-left: 3px solid #a0a09a!important;
}
.green dd {
      border-bottom: 1px dotted #42b649!important;
    border-left: 3px solid #42b649!important;
}
.yellow dd {
    border-bottom: 1px dotted #ede816!important;
    border-left: 3px solid #ede816!important;
}
.purple dd {
  border-bottom: 1px dotted #aa4399!important;
  border-left: 3px solid #aa4399!important;
}
.purple .post-author-status {
    width: 92%;
    background-color: #aa4399!important;
}
.yellow .post-author-status {
      width: 92%;
    background-color: #ede816!important;
}
.green .post-author-status {
    width: 92%;
    background-color: #42b649!important;
}
.grey .post-author-status {
    width: 92%;
    background-color: #a0a09a!important;
}
.blue .post-author-status {
    width: 92%;
    background-color: #3e459c!important;
}
 
 dd {
  background-color: #ffffff;
    border-bottom: 1px dotted #607d8b;
    border-radius: 5px 5px 5px 5px;
    border-left: 3px solid #607d8b;
    border-width: 0 3px 2px 0;
    font-family: "tahoma";
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0;
    margin: 3px;
    padding: 2px;
}
 
.post-author-status:before {
      width: 90%;
  text-align: center;
    font-weight: 900;
    color: white;
    content: "ONLINE";
}
.online .post-author-status {
    display: block;
}
.post-author-status {
  text-align: center;
    background-color: #607d8b;
    border-radius: 12px;
    float: right;
    height: auto;
    position: absolute;
    right: 10px;
    top: 8px;
    width: 92%;
}
 
 dl.post-author-details:before {
    color: white;
    padding: 4px;
    display: flex;
    content: "Profile";
    justify-content: center;
    background: #607d8b;
}
.post-author-avatar {
    margin: 0px;
}
 
.post-author-status {
    background-color: #000;
    border-radius: 12px;
    display: none;
    float: right;
    height: auto;
    position: absolute;
    right: 10px;
    top: 8px;
    width: 90%;
}
.post-author-details span {
    font-weight: 600;
    margin-left: 5px;
}
aside.post-aside:before {
  text-align: center;
    width: 85%;
background-color: #607d8b;
    border-radius: 12px;
    color: #fff;
    content: "OFFLINE";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 8px;
}
 
.purple dl.post-author-details:before {
    background: #aa4399!important;
}
.blue dl.post-author-details:before {
    background: #3e459c!important;
}
.green dl.post-author-details:before {
    background: #42b649!important;
}
.grey dl.post-author-details:before {
    background: #a0a09a!important;
}
.yellow dl.post-author-details:before {
    background: #ede816!important;
}
dd {
    background: white;
}
.Orange {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffa200 !important;
    border-left: 1px solid #ffa200 !important;
    border-right: 1px solid #ffa200 !important;
    border-top: 16px solid #ffa200 !important;
}
.Orange dd {
  border-bottom: 1px dotted #ffa200 !important;
    border-left: 3px solid #ffa200 !important;
}
.Orange .post-author-status {
    width: 92%;
    background-color: #ffa200 !important;
}
.Orange dl.post-author-details:before {
    background: #ffa200 !important;
}
.Pink {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffc0cb !important;
    border-left: 1px solid #ffc0cb !important;
    border-right: 1px solid #ffc0cb !important;
    border-top: 16px solid #ffc0cb !important;
}
.Pink dd {
  border-bottom: 1px dotted #ffc0cb !important;
    border-left: 3px solid #ffc0cb !important;
}
.Pink .post-author-status {
    width: 92%;
    background-color: #ffc0cb !important;
}
.Pink dl.post-author-details:before {
    background: #ffc0cb !important;
}
.black {
    background: #f6f6f6!important;
    border-bottom: 16px solid #000000 !important;
    border-left: 1px solid #000000 !important;
    border-right: 1px solid #000000 !important;
    border-top: 16px solid #000000 !important;
}
.black dd {
  border-bottom: 1px dotted #000000 !important;
    border-left: 3px solid #000000 !important;
}
.black .post-author-status {
    width: 92%;
    background-color: #000000 !important;
}
.black dl.post-author-details:before {
    background: #000000 !important;
}
.red {
    background: #f6f6f6!important;
    border-bottom: 16px solid #e90000 !important;
    border-left: 1px solid #e90000 !important;
    border-right: 1px solid #e90000 !important;
    border-top: 16px solid #e90000 !important;
}
.red dd {
  border-bottom: 1px dotted #e90000 !important;
    border-left: 3px solid #e90000 !important;
}
.red .post-author-status {
    width: 92%;
    background-color: #e90000 !important;
}
.red dl.post-author-details:before {
    background: #e90000 !important;
}
.LightCoral {
    background: #f6f6f6!important;
    border-bottom: 16px solid #f08080 !important;
    border-left: 1px solid #f08080 !important;
    border-right: 1px solid #f08080 !important;
    border-top: 16px solid #f08080 !important;
}
.LightCoral dd {
  border-bottom: 1px dotted #f08080 !important;
    border-left: 3px solid #f08080 !important;
}
.LightCoral .post-author-status {
    width: 92%;
    background-color: #f08080 !important;
}
.LightCoral dl.post-author-details:before {
    background: #f08080 !important;
}
.Wisteria {
    background: #f6f6f6!important;
    border-bottom: 16px solid #c6aec7 !important;
    border-left: 1px solid #c6aec7 !important;
    border-right: 1px solid #c6aec7 !important;
    border-top: 16px solid #c6aec7 !important;
}
.Wisteria dd {
  border-bottom: 1px dotted #c6aec7 !important;
    border-left: 3px solid #c6aec7 !important;
}
.Wisteria .post-author-status {
    width: 92%;
    background-color: #c6aec7 !important;
}
.Wisteria dl.post-author-details:before {
    background: #c6aec7 !important;
}
 
.SlateBlue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #6a5acd !important;
    border-left: 1px solid #6a5acd !important;
    border-right: 1px solid #6a5acd !important;
    border-top: 16px solid #6a5acd !important;
}
.SlateBlue dd {
  border-bottom: 1px dotted #6a5acd !important;
    border-left: 3px solid #6a5acd !important;
}
.SlateBlue .post-author-status {
    width: 92%;
    background-color: #6a5acd !important;
}
.SlateBlue dl.post-author-details:before {
    background: #6a5acd !important;
}
.Indigo {
    background: #f6f6f6!important;
    border-bottom: 16px solid #4b0082 !important;
    border-left: 1px solid #4b0082 !important;
    border-right: 1px solid #4b0082 !important;
    border-top: 16px solid #4b0082 !important;
}
.Indigo dd {
  border-bottom: 1px dotted #4b0082 !important;
    border-left: 3px solid #4b0082 !important;
}
.Indigo .post-author-status {
    width: 92%;
    background-color: #4b0082 !important;
}
.Indigo dl.post-author-details:before {
    background: #4b0082 !important;
}

PunBB

Demo per PunBB:
Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifica il template viewtopic_body
Sostituisci:

Con:

Andiamo poi verso Pannello di amministrazione ► e creiamo un nuovo codice Javascript con queste impostazioni, assicurandoci che la gestione dei codici javascript sia attivata:

  • Titolo: a tua scelta
  • Dove: negli argomenti
  • Codice:
    Codice:
    $(function() {
     
      var version = "phpBB3";
     
      if(version.toLowerCase() == "phpbb3"){
          $(".user img[title='undefined']").closest('.user').addClass("undefined");
          $(".user img[title='blue']").closest('.user').addClass("blue");
          $(".user img[title='grey']").closest('.user').addClass("grey");
          $(".user img[title='green']").closest('.user').addClass("green");
          $(".user img[title='yellow']").closest('.user').addClass("yellow");
          $(".user img[title='purple']").closest('.user').addClass("purple");
        $(".user img[title='Orange']").closest('.user').addClass("Orange");
        $(".user img[title='Pink']").closest('.user').addClass("Pink");
        $(".user img[title='black']").closest('.user').addClass("black");
        $(".user img[title='red']").closest('.user').addClass("red");
        $(".user img[title='LightCoral']").closest('.user').addClass("LightCoral");
        $(".user img[title='Wisteria']").closest('.user').addClass("Wisteria");
        $(".user img[title='SlateBlue']").closest('.user').addClass("SlateBlue");
        $(".user img[title='Indigo']").closest('.user').addClass("Indigo");
      }
    });


Infine aggiungiamo questo codice CSS andando verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Colori ► Foglio di stile CSS
Codice:
.pun .post .user {
    background: #f6f6f6;
    border-bottom: 16px solid #607d8b;
    border-left: 1px solid #607d8b;
    border-radius: 3px;
    border-right: 1px solid #607d8b;
    border-top: 16px solid #607d8b;
    padding: 60px 3px 3px!important;
}
.pun .user-ident .username {
    margin-top: 14px;
    width: 100%;
    text-align: center;
}
.offlinebun {
background: #607d8b;
    color: #f0ffff;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 60px;
z-index: 0;
  border-radius: 77px;
}
.onlinebun {
    position: absolute;
    background: #607d8b;
    color: #f0ffff;
    text-align: center;
    left: 0;
    right: 0;
  z-index: 2;
  border-radius: 77px;
}
 
.user-info:before {
      margin-bottom: 11px;
    text-align: center;
    background: #607d8b;
    display: block;
    content: "profile";
    color: azure;
}
 
 
 
.blue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #3e459c!important;
    border-left: 1px solid #3e459c!important;
    border-right: 1px solid #3e459c!important;
    border-top: 16px solid #3e459c!important;
}
.blue .onlinebun {
    background: #3e459c!important;
}
.blue .user-info:before {
    background: #3e459c!important;
}
 
.grey {
    background: #f6f6f6!important;
    border-bottom: 16px solid #a0a09a!important;
    border-left: 1px solid #a0a09a!important;
    border-right: 1px solid #a0a09a!important;
    border-top: 16px solid #a0a09a!important;
}
.grey .onlinebun {
    background: #a0a09a!important;
}
.grey .user-info:before {
    background: #a0a09a!important;
}
 
.green {
    background: #f6f6f6!important;
    border-bottom: 16px solid #42b649!important;
    border-left: 1px solid #42b649!important;
    border-right: 1px solid #42b649!important;
    border-top: 16px solid #42b649!important;
}
.green .onlinebun {
    background: #42b649!important;
}
.green .user-info:before {
    background: #42b649!important;
}
 
.yellow {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ede816!important;
    border-left: 1px solid #ede816!important;
    border-right: 1px solid #ede816!important;
    border-top: 16px solid #ede816!important;
}
.yellow .onlinebun {
    background: #ede816!important;
}
.yellow .user-info:before {
    background: #ede816!important;
}
 
.purple {
    background: #f6f6f6!important;
    border-bottom: 16px solid #aa4399!important;
    border-left: 1px solid #aa4399!important;
    border-right: 1px solid #aa4399!important;
    border-top: 16px solid #aa4399!important;
}
.purple .onlinebun {
    background: #aa4399!important;
}
.purple .user-info:before {
    background: #aa4399!important;
}
 
.Orange {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffa200!important;
    border-left: 1px solid #ffa200!important;
    border-right: 1px solid #ffa200!important;
    border-top: 16px solid #ffa200!important;
}
.Orange .onlinebun {
    background: #ffa200!important;
}
.Orange .user-info:before {
    background: #ffa200!important;
}
 
.Pink {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ffc0cb!important;
    border-left: 1px solid #ffc0cb!important;
    border-right: 1px solid #ffc0cb!important;
    border-top: 16px solid #ffc0cb!important;
}
.Pink .onlinebun {
    background: #ffc0cb!important;
}
.Pink .user-info:before {
    background: #ffc0cb!important;
}
 
.black {
    background: #f6f6f6!important;
    border-bottom: 16px solid #000000!important;
    border-left: 1px solid #000000!important;
    border-right: 1px solid #000000!important;
    border-top: 16px solid #000000!important;
}
.black .onlinebun {
    background: #000000!important;
}
.black .user-info:before {
    background: #000000!important;
}
 
.red {
    background: #f6f6f6!important;
    border-bottom: 16px solid #e90000!important;
    border-left: 1px solid #e90000!important;
    border-right: 1px solid #e90000!important;
    border-top: 16px solid #e90000!important;
}
.red .onlinebun {
    background: #e90000!important;
}
.red .user-info:before {
    background: #e90000!important;
}
 
.LightCoral {
    background: #f6f6f6!important;
    border-bottom: 16px solid #f08080!important;
    border-left: 1px solid #f08080!important;
    border-right: 1px solid #f08080!important;
    border-top: 16px solid #f08080!important;
}
.LightCoral .onlinebun {
    background: #f08080!important;
}
.LightCoral .user-info:before {
    background: #f08080!important;
}
 
.Wisteria {
    background: #f6f6f6!important;
    border-bottom: 16px solid #c6aec7!important;
    border-left: 1px solid #c6aec7!important;
    border-right: 1px solid #c6aec7!important;
    border-top: 16px solid #c6aec7!important;
}
.Wisteria .onlinebun {
    background: #c6aec7!important;
}
.Wisteria .user-info:before {
    background: #c6aec7!important;
}
 
.SlateBlue {
    background: #f6f6f6!important;
    border-bottom: 16px solid #6a5acd!important;
    border-left: 1px solid #6a5acd!important;
    border-right: 1px solid #6a5acd!important;
    border-top: 16px solid #6a5acd!important;
}
.SlateBlue .onlinebun {
    background: #6a5acd!important;
}
.SlateBlue .user-info:before {
    background: #6a5acd!important;
}
 
.Indigo {
    background: #f6f6f6!important;
    border-bottom: 16px solid #4b0082!important;
    border-left: 1px solid #4b0082!important;
    border-right: 1px solid #4b0082!important;
    border-top: 16px solid #4b0082!important;
}
.Indigo .onlinebun {
    background: #4b0082!important;
}
.Indigo .user-info:before {
    background: #4b0082!important;
}

Come impostare il colore?


Scegli il colore del tuo profilo utente nei messaggi Animat12



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 27
Messaggi : 9432
Località : Provincia di Varese

https://www.fmcodes.net/

A rozalia piace questo messaggio.

Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

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