Tutorial Avatar Arrotondato

[netkingZ]

Trovo questa "chicca visiva" molto carina e che da un cambiamento visivo interessante .
Ma vediamo il codice che è molto semplice ....

1. Andare in ACP --> Aspetto -->(il vostro stile) --> template --> EXTRA.css
All'interno del file citato inserite questo codice:

.avatar img,
.avatar .img,
.avatarCropper {
border-radius: 50% !important;
}

salvate.

2. Andate in ACP --> Aspetto -->(il vostro stile) --> template --> message_user_info
e dopo questo codice :

<xen:require css="message_user_info.css" />

che si trova subito all'inizio del file inserite questo codice:

<xen:require css="EXTRA.css" />

salvate.

il risultato che otterrete è questo:

 

[Il Custode]

Forte! E' molto in linea con le ultime tendenze di web design (vedi Google+ e iOs7)

 

[Andrea Marucci]

<xen:require css="EXTRA.css" />

Domanda. Perché questo è necessario?

 

[netkingZ]

Domanda. Perché questo è necessario?

Nello specifico la parte di codice che hai postato serve per richiamare all'interno del file indicato il file .css , in questo caso EXTRA.css , ha la stessa funzione di un normale <link href="stile.css" rel="stylesheet" type="text/css"> associa a quel file il css indicato.

All'interno del file EXTRA.css è stata scritta una classe che in realtà xenforo ha nel database, inserendola esposta e richiamandola come ho fatto ho reso la classe nel css modificabile, in questo caso dicendogli che il border-radius deve essere del 50% e imponendo con !important che questo dato "sovrascriva" quello precedente.

 

[Andrea Marucci]

Io ho provato senza modificare il template e funziona correttamente...

 

[netkingZ]

Io ho provato senza modificare il template e funziona correttamente...

Si funziona in message_user_info perche al suo interno ha la classe avatar richiamata con il codice , ma non è detto che altrove funzioni per questo motivo ho scritto l'esempio con Extra.css , non è obbligatorio che la modifica avvenga con Extra.css ma in questo modo è possibile utilizzarlo richiamandolo su più template , gli stessi creatori di XF suggeriscono di utilizzare il file Extra.css proprio per fare questo tipo di azioni.

 

[Andrea Marucci]

Comunque non male, mi piace, grazie

 

[shark99]

Ho inserito questa "chicca" nella mia board, e c'è un problema.
Si vede così, se si clicca sul nome di una persona..

Come potrei risolvere, quel piccolissimo "bug"?

 

[netkingZ]

Devi modificare le dimensioni dell'avatar inserendo altezza e larghezza in riferimento alla avatar che ti da problemi. Semplice CSS se lo conosci.

 

[netkingZ]

Devi modificare le dimensioni dell'avatar inserendo altezza e larghezza in riferimento alla avatar che ti da problemi. Semplice CSS se lo conosci.

 

[shark99]

Devi modificare le dimensioni dell'avatar inserendo altezza e larghezza in riferimento alla avatar che ti da problemi. Semplice CSS se lo conosci.

Ehm... no, non so come si fa. asd.