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

  • 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

  • 6 months later...

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

 

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...

 

Link to comment
Share on other sites

  • Admin
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

Link to comment
Share on other sites

#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...

Link to comment
Share on other sites

  • Admin

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.

 

Link to comment
Share on other sites

  • Admin
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:

FONTAWESOME.COM

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Admin
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.

Link to comment
Share on other sites

Funzionano anche le icone 5...

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

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.