Da Niko Mar 21 Dic 2021 - 16:56
Questo tutorial vi consentirà di permettere agli utenti di scegliere il colore da visualizzare nel proprio profilo visibile nella colonna laterale dei post pubblicati.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:Impostazioni templates & Javascript PhpBB2 Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifica il template viewtopic_body Sostituisci: Codice: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br /> <span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br /> <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div> <div class="award_more"></div> <br> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /> <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" /> </td>
Con: Codice: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}"> <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div> <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}"> <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><div class="namee"><strong>{postrow.displayed.POSTER_NAME}</strong></div></span> <span class="postdetails poster-profile"> <div class="ranke">{postrow.displayed.POSTER_RANK}</div> <div class="avatare">{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div><br /> <div {postrow.displayed.AWARDS_SHOW} class="dd_award {postrow.displayed.PROFILE_POSITION}">{postrow.displayed.AWARDS}</div> <div class="award_more"></div> <br> <br /> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /> <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" /> </div> </div> </td>
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 argomentiCodice: 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 sceltaDove: Negli argomentiCodice: 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 sceltaDove: negli argomentiCodice: 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 sceltaDove: negli argomentiCodice: 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 Andiamo verso Pannello di amministrazione ► Visualizzazione ► Templates ► Generale e modifica il template viewtopic_body Sostituisci: Codice: {postrow.displayed.POSTER_AVATAR}<br />
Con: Codice: <div class="onlinebun">{postrow.displayed.ONLINE_IMG_NEW}</div><br /> <div class="offlinebun">OFFLINE</div><br /> {postrow.displayed.POSTER_AVATAR}<br />
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 sceltaDove: negli argomentiCodice: 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?
Niko Moder atoreSesso : Età : 28Messaggi : 9573Località : Provincia di Varese
A rozalia piace questo messaggio.
Mi piace 1 Non mi piace Niko è stato ringraziato dall'autore di questo topic.
Argomenti simili Argomenti simili
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.