Personalizzare Avatar del Menu Utente

Personalizzare l'avatar del menù utente
Vediamo alcuni modi per personalizzare l'avatar nel menù utente.

Ottimizzato per Firefox e Chrome, in via di miglioramento per Opera.

Avatar a cerchio: per realizzare un avatar a cerchio come nella skin del Factory, andiamo in Colori e Stili e aggiungiamo/modifichiamo questa stringa:

Con position: absolute facciamo in modo che l'avatar "sbordi" dal menù. A questo punto, dobbiamo regolarne le dimensioni (width e height): potete inserire al posto di 50px il valore che volete. Margin-top serve per allontanare l'avatar dalla sommità della pagina. Infine, abbiamo allontanato il nick dall'avatar con un margin-left, poichè quest'ultimo tendeva a coprire il primo. Anche in questo caso potete modificare le distanze come preferite.

Come far ruotare l'avatar a cerchio: se vogliamo che il nostro avatar faccia un giro completo al passaggio del mouse, aggiungiamo questo sempre in Colori e Stili:

Possiamo personalizzare la transizione come ho già spiegato in questo tutorial.


Avatar a rombo: per fare l'avatar a rombo come questo, aggiungiamo/modifichiamo questa parte in Colori e stili:

Come ho già spiegato, position: absolute serve per slegare l'avatar dal menù e i vari margin (compreso quello aggiunto al nick) servono per posizionare gli elementi. Possiamo regolare anche in questo caso le dimensioni (width e height) come vogliamo, stando attenti a far in modo che le dimensioni di .menuwrap .avatar img siano sempre più grandi di quelle imposte all'avatar. Abbiamo usato un margin anche in .menuwrap .avatar img per posizionare l'avatar al posto giusto all'interno del rombo. Se modificate le dimensioni, dovrete modificare anche quest'ultimo.


Avatar a goccia: per fare l'avatar a goccia come questo, aggiungiamo/modifichiamo questa parte in Colori e Stili:

Anche in questo caso possiamo modificare width e height come preferiamo, stando attenti a dare sempre a .menuwrap .avatar img delle dimensioni superiori rispetto a quelle date a .menuwrap .avatar. Usiamo il margin in .menuwrap .avatar img per regolare la posizione dell'avatar all'interno della cornice a goccia.

Come far ruotare l'avatar a goccia: il procedimento è molto simile a quello usato per far ruotare l'avatar a cerchio, c'è solo una differenza di gradi di rotazione. Aggiungiamo in Colori e Stili:

Come ho già detto, possiamo regolare a nostro piacimento la transizione.


Avatar con sfondo: per aggiungere uno sfondo all'avatar come in questa skin, aggiungiamo/modifichiamo questa parte in Colori e Stili:

Sostituiamo URL_BACKGROUND con l'URL del nostro sfondo. Regoliamo le dimensioni a seconda dello sfondo scelto. Ricordiamoci di regolare anche il margin di .menuwrap .avatar img per centrare l'avatar.


Avatar a foglia: per realizzare un avatar a foglia come questo, aggiungiamo/modifichiamo questa parte in Colori e Stili:

Possiamo regolare le dimensioni (width e height) come preferiamo.
Per stringere o allargare la nostra foglia, modifichiamo i valori di border-radius:
border-radius: 0 100% ---> Foglia aghiforme e appuntita.
border-radius: 0 50% ---> Quello usato da noi, la foglia non è nè troppo larga, nè troppo stretta.
border-radius: 0 25% ---> Foglia molto ampia.

Far mutare forma all'avatar a foglia: per far mutare forma alla nostra foglia, come nel caso precedentemente linkato, aggiungiamo questo in Colori e Stili:

Modifichiamo 50% con il valore scelto in precedenza (se prima abbiamo usato 0 25%, ora dovremo usare 25% 0, state attenti a mantenere questo ordine!). Personalizziamo la transizione a nostro piacimento.


Avatar trasparente al passaggio del mouse: per far diventare trasparente l'avatar al passaggio del mouse, aggiungiamo questo codice in Colori e Stili:


Nessun avatar: per rimuovere l'avatar dalla barra utente, cancelliamo tutto ciò che vi è di relativo all'avatar del menù in Colori e Stili e aggiungiamo questa stringa:


Il tutorial è concluso. Spero sia tutto chiaro e che possa tornarvi utile. Per problemi o dubbi, chiedete qui. Se volete suggerire qualche altro tipo di avatar, fate pure! ^^

Tutorial realizzato da Valls ~ solo per lo Skin Factory.
Non spacciatelo per vostro e non postatelo altrove senza il mio permesso, per favore.