Jump to content

Creare i prefissi colorati


Askancy
 Share

Recommended Posts

  • Admin

Come creare i prefissi colorati

prefissi.png

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:

tagrosso.png

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:

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:

tagconicon.png

 

IP.Board fa uso di FontAwesome 4.7.

Link to comment
Share on other sites

E pensare che c'erano plugin da 50 dollari per questo xD. Grazie di cuore ❤  provo appena posso e vi aggiorno..  grazie askancy

Link to comment
Share on other sites

  • Admin
1 ora fa, Luca ha scritto:

E pensare che c'erano plugin da 50 dollari per questo xD. Grazie di cuore ❤  provo appena posso e vi aggiorno..  grazie askancy

Ho fatto una modifica alla guida per spiegare come inserire anche un icona al tag. 😉 Per qualsiasi problema scrivi pure qui!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. to insert a cookie message.