Come creare i prefissi colorati
Molto spesso gli utenti nei loro forum mi chiedono di inserirgli i prefissi colorati in modo da distinguire subito se una discussione è di un problema, un bug, un aiuto o altro. IP.Board permette di aggiungere il prefisso ma tutti i tag sono colorati nello stesso modo, per creare un tag colorato è davvero facile.
Prima di tutto dobbiamo trovare un modo per riconoscere il tag e capire che colore dargli, quindi dobbiamo dargli un nome, per farlo andiamo in:
AdminCP->Personalizza->Temi->HTML/CSS del vostro tema
Qui adesso siete nel cuore del tema, attenzione a cosa toccate... Per fare ciò che vogliamo noi dobbiamo andare in:
core->front->global->prefix
sostituire il contenuto con:
{{if $text}}
<a href="{url="app=core&module=search&controller=search&tags={$encoded}" seoTemplate="tags"}" title="{lang="find_tagged_content" sprintf="$text"}"
class='ipsTag_prefix' id="{$text_clear = str_replace(' ', '', $text)}" rel="tag"><span>{$text}</span></a>
{{endif}}
Se avete una skin personalizzata allora vi spiego passo passo cosa abbiamo fatto.
Quello che abbiamo fatto è stato quello di andare a inserire un id="" con il nome del tag, quindi se il tag si chiama aiuto, lui mette id="aiuto", mentre se il tag ha uno spazio come "Problema HTML", lui andrà a modificare il tutto in "problemahtml", questo perché una classe ID non può avere uno spazio.
fatto questo, salvate la modifica e spostatevi nel tab CSS qui andate in:
core->front->custom->custom.css
Qui andrete a inserire il colore che vorrete dare al tag. Facciamo il caso che vogliamo che tutti i tag chiamati aiuto siano di colore rosso, quello che dovremmo fare è:
#aiuto {
background-color: #fd0808;
}
Ed ecco il nostro bellissimo tag che cambia colore:
Ovviamente oltre a cambiare colore potrete creare uno stile particolare come ho fatto io nel mio forum e che vi ho messo come immagine principale di questa guida. Il consiglio che vi do nel caso vogliate personalizzare la struttura del tag e non solo il colore è quello di: modificare la struttura del tag creando una nuova classe css, mentre richiamare il colore tramite l'id.
Aggiungere un icona a un tag
Si può aggiungere un icona a un tag? la risposta è Si, questo grazie all'utilizzo di Font Awesome che ci semplifica la vita.
Ovviamente per farlo, avrete bisogno prima di procedere con i passaggi sopra della guida...
Adesso potrete usare nel forum tutte le icone qui presenti:
Font Awesome Icons
FONTAWESOME.COM
Font Awesome, the iconic font and CSS framework
Adesso non ci resta che mettere l'icona scelta nel nostro tag, per farlo torniamo nel custom.css usato precedentemente.
Una volta identificata l'icona, nel nostro caso mettiamo l'icona di aiuto, dobbiamo identificare il codice unicode, in questo caso è: f059.
Sotto al nostro precedente:
#aiuto {
background-color: #fd0808;
}
dobbiamo inserire una classe before, che andrà a inserire l'icona, in questo modo:
#aiuto ::before {
font-style: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f059" !important;
text-align: center !important;
font-family: 'Font Awesome 5 Pro','Font Awesome 5 Brands';
margin-right: 5px;
font-weight: normal;
font-size: 100%;
color: white;
}
In questo codice ricordatevi:
sostituire il content con il codice unicode dell'icona che volete
ricordatevi la \ a inizio unicode
cambiare l'id # con il nome che gli avevate dato prima
Il risultato sarà questo:
IP.Board fa uso di FontAwesome 4.7.