La creazione dei prefissi colorati e personalizzati su XenForo è una funzione di base, quindi non richiede di dover inserire codice particolare o installare plugin. per farlo basta andare in:

AdminCP->Forum->Prefissi discussione

Qui saranno elencati tutti i prefissi creati raggruppati per gruppo.

Cliccando su Aggiungi Prefisso ci troviamo di fronte a un form in cui possiamo oltre a scegliere il nome del tag, possiamo scegliere lo stile che gli vogliamo dare scegliendone uno tra quelli di default, o altrimenti andando a personalizzarlo. Nella personalizzazione non bisogna aggiungere CSS o html, ma bisogna inserire la classe che abbiamo scelto quando abbiamo inserito il css personalizzato su extra.less in:

AdminCP->Aspetto->Stili->Modelli-> cercare extra.less 

Nella pagina possiamo anche scegliere in quali forum sarà disponibile il prefisso e quali gruppi di utenti possono selezionarlo.

Ecco come sarà visualizzata la scelta del prefisso durante la creazione di una nuova discussione:

< nodo da leggere>

< nodo non letto>

Per aggiungere un icona a un nodo, è necessario aggiungere un codice CSS/LESSal nostro extra.less che possiamo trovare in:

AdminCP->Aspetto->Stili->Modelli-> cercare extra.less in ordine alfabetico o tramite il menu cerca.

Aggiungere:

/*** Node icons with image **/
.node.node--idXXXXX {
    .node-icon i { display: none; }

    &.node--forum {
        .node-body {
            /*padding-left: 5px;*/
        }
        .node-icon {
            background-image: url('/images/your_image.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}
/*****/

In questo codice dovrete modificare XXXXX con l'ID del forum

Sostituisci /images/your_image.png con l'icona presente sul tuo server.

Inoltre, se il tuo nodo è una categoria o un link, devi cambiare .node--forum in .node--category, .node--page o .node--link.

Ovviamente potete scegliere il posizionamento dell'icona levando i /* */ dal commento del padding-left.

Cambiare icona tutta uguale a tutti i nodi

Per farlo la procedura è la stessa, quello che cambia è il codice CSS/LESS da inserire in extra.less:

/*** Node icons with image **/
.node {
    .node-icon i { display: none; }

    &.node--forum, &.node--category {
        .node-body {
            /*padding-left: 5px;*/
        }
        .node-icon {
            background-image: url('/images/your_image.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        &.node--read .node-icon {
            opacity: 0.4;
        }
    }
}
/*****/

Fonte

Il tema che andremmo a installare in questa guida sarà la Nulimia XenDark. Il creatore mette a disposizione un file .zip con all'interno numerosi file come:

• Cartella con file XML
• Cartella upload
• psd
• Un file con link per poter pagare per rimuovere il copyright dal tema

La prima cosa da fare è andare in AdminCP->Stili->Importa, su Importa da XML, bisogna selezionare il file XML della skin, e su importa come lasciare "Nessun padre" essendo un tema principale, che non dipende da altri temi.

Una volta caricato il tema dovrete collegarvi via FTP e entrare nella cartella del vostro XenForo e dovrete copiare il contenuto della cartella styles, che contiene le icone della nuova skin, le emoji e altri componenti.

Assicurati che la cartella "stili" appaia come nei seguenti esempi:

http://tuosito.com/styles/
(Quando il forum si trova nella radice del tuo sito)
-o-
http://tuosito.com/forum/styles/
(Quando il tuo forum si trova in una directory aggiunta, come /forum o /community.)

Per aggiornare il tema, andando ad aggiornare i componenti principali senza però andare a sovrascrivere le proprie persoanlizzazioni, è consigliato:

• Entrare in AdminCP e andare nella pagina stili
• Fai click sul nome del tema installato e rinominarlo in qualcosa come "Nome Tema - Genitore" e salvare le modifiche
• 
• Sempre nella pagina stili, cliccare su "Crea nuovo stile", seleziona come "Stile Genitore" il tema che hai appena rinominato e salva le modifiche
• 
• Adesso il tema figlio che hai appena creato sarà identico al tema genitore
• Disabilita la possibilità agli utenti di selezionare come tema il tema padre
• 
• Adesso poi effettuare tutte le tue personalizzazioni al tema nella pagine del tema figlio, così da non rischiare di perdere tutte le personalizzazioni con un aggiornamento.

Come aggiornare un tema

Per aggiornare il tema sarà sufficiente cliccare su "Importa uno stile", selezionare il nuovo file XML e sovrascrivere il tema padre.

Per poter sostituire il logo dovrete recarvi:

• AdminCP
• Aspetto->Proprietà dello stile
• 
• Selezionare il tema che volete modificare dal menu a tendina
• Cliccare su Opzioni di base
• 
• Cliccare su Carica File nella riga di URL del Logo
•