Vai al contenuto

Creare i prefissi colorati


Askancy

Messaggi raccomandati

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

  • Like 1
Link al commento
Condividi su altri siti

  • 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 al commento
Condividi su altri siti

  • 6 mesi dopo...

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 al commento
Condividi su altri siti

  • 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 al commento
Condividi su altri siti

#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 al commento
Condividi su altri siti

  • 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 al commento
Condividi su altri siti

  • 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 al commento
Condividi su altri siti

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 al commento
Condividi su altri siti

  • 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 al commento
Condividi su altri siti

  • 2 anni dopo...

Crea un account o accedi per lasciare un commento

Devi essere un membro per lasciare un commento

Crea un account

Iscriviti per un nuovo account nella nostra community. È facile!

Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.

Accedi Ora
  • Chi sta navigando   0 utenti

    • Nessun utente registrato visualizza questa pagina.
×
×
  • Crea Nuovo...

Informazioni importanti

Abbiamo inserito dei cookies nel tuo dispositivo per aiutarti a migliorare la tua esperienza su questo sito. Puoi modificare le impostazioni dei cookie, altrimenti puoi accettarli cliccando su continua. to insert a cookie message.