Creare i prefissi colorati

[Askancy]

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.

[Luca]

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

[Askancy]

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!

[Ricsca]

Grazie 1000

[Ricsca]

Le immagini non mi funzionano... Ho questo plugin per il tema

 

(aXen) Font Awesome 6 in IPS - Utilities and Stats - Invision Community

INVISIONCOMMUNITY.COM

---

The application updates the Font Awesome version to version 6 without destroying the icons embedded in IPS version 4. Works at the Front and in AdminCP. Removal of the (aXen) Font Awesome 5 plugin is required...

 

[Askancy]

36 minuti fa, Ricsca ha scritto:

Le immagini non mi funzionano...

Spiegami peró la procedura che hai fatto e cosa hai aggiunto sul css sennó mi è difficile aiutarti

[Ricsca]

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

Ho aggiunto il codice che consigliavi...  Al posto dell'immagine si vede un quadratino...

[Askancy]

Come hai detto prima, hai installato il plugin:

(aXen) Font Awesome 6 in IPS 6.1.1

Dunque la stringa font-family non è più corretta

    font-family: 'Font Awesome 5 Pro','Font Awesome 5 Brands'

Prova a sostituirlo con:

    font-family: 'Font Awesome 6 Free';

Nel caso non vada, indicami anche in privato, dove viene visualizzato questo tag con l'errore. La guida è stata realizzata per essere usato il font-awesome originale in IP.Board e non quello aggiornato con il plugin.

 

[Ricsca]

fa-car: Font Awesome Icons

FONTAWESOME.COM

---

Font Awesome, the iconic font and CSS framework

Ok ora va ma la macchina non va... le alte icone si...

 

[Askancy]

1 minuto fa, Ricsca ha scritto:

Ok ora va ma la macchina non va... le alte icone si...

Ovvio che non va, se guardi sei sulla versione 4 di FontAwesome e non sulla versione 6:

https://fontawesome.com/v4/icon/car

lo vedi dal v4

Qui trovi la car versione V6:

Car - solid | Font Awesome

FONTAWESOME.COM

---

Car in the solid style. Make a bold statement, even in small sizes. Available now in Font Awesome 6.

 

[Ricsca]

Non ho capito una cosa... ipb di defoult quale versione di font usa?

Perchè il mio tema mi fa usare un'app per usare la versione 6?

Grazie

[Askancy]

1 minuto fa, Ricsca ha scritto:

Non ho capito una cosa... ipb di defoult quale versione di font usa?

Perchè il mio tema mi fa usare un'app per usare la versione 6?

IP.Board  di base usa la versione 4.7, la versione quella più popolare diciamo. Il tuo tema è molto personalizzato e sinceramente l'ho sempre odiato perché fa uso di troppe cose extra, tante anche inutili secondo me, e lui nel suo tema ha utilizzato icone della versione 6 per quello ti obbliga a installare la nuova versione di font-awesome.

[Ricsca]

Funzionano anche le icone 5...

Bè un pò di personalizzazione in un tema non fa mai male...

[cristian.tattini]

Grazie, semplice e diretta, la sfrutterò sicuramente