-
.Fly.
User deleted
Questa questa mini-guida è pensata per rendere più chiara e semplice possibile la personalizzazione degli stili della nuova barra utente (inserita da ieri anche nel nuovo layout: http://top.blogfree.net/?t=4293171).
Si tratta sostanzialmente di un'analisi dettagliata del codice CSS in modo che anche gli utenti meno esperti siano in grado di modificare aspetti come i colori, lo sfondo e il carattere dei vari componenti del menù.
Non verranno trattate quindi modifiche più sostanziali e particolari della barra, ma per queste potete sempre chiedere aiuto nella sezione Problemi: http://skinlab.forumfree.it/?f=1102038
NOTA: Prima di avventurarsi nella modifica è bene aver letto questa guida introduttiva ai CSS: http://skinlab.forumfree.it/?t=3642555
Per prima cosa bisogna andare in Amministrazione > Grafica > Colori e stili, all'interno del quale troverete questo codice:SPOILER (clicca per visualizzare)CODICE/* MENU principale */
.menuwrap {font-size: 12px; font-family: verdana, tahoma, arial, sans-serif; background: #333; background: linear-gradient(#404040,#1A1A1A); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); -moz-box-shadow: -2px 1px 2px rgba(0, 0, 0, .5)}
.menuwrap li {line-height: 2.6em; color: #AAA; text-shadow: -1px -1px 0 #111}
.menuwrap a {margin: 0; padding: 0 11px; font-size: 11px; color: #AAA; text-decoration: none}
.menuwrap a:hover {color: #FFF; border: 0}
.menuwrap .icon a {padding: 0 6px}
#m_up a {padding: 0 11px 0 0}
#c_up {position: absolute; right: 10px; bottom: 10px; opacity: .5}
#f_up {position: fixed; bottom: 20px; right: 1%; opacity: .9}
.p_up:hover, #c_up:hover, #f_up:hover {opacity: 1; text-decoration: none; border: 0}
/* esci e news */
.menuwrap b {color: #FFF}
/* numero msg e link REGISTRATI */
.menuwrap em {padding: 2px 5px; color: #FFF; text-shadow: none; background: #525252; border-radius: 6px}
.menuwrap #nick {margin-left: .6em}
.menuwrap form {padding: 0 11px 0 5px}
/* MENU contestuale(dropdown) */
.menu > a:hover, .menu:hover > a {color: #FFF; background: url('http://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}
.menu ul {width: 15em; background: #525252; border: 1px solid #080808; border-top: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .5)}
#right .menu ul {margin-left: -2em}
.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; border-top: 1px solid #636363}
.menu li:first-child {padding-top: 0; border-top: 5px solid #484848}
.menu li strong {padding: 3px 8px; color: #000}
.menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
.menu li a:hover, .menu li:hover > a {text-shadow: -1px -1px 0 #272727; background: #373737; border-radius: 5px}
/* SUB MENU contestuale(dropright) */
/* Sposta msg pvt */
.submenu.alternative ul {border-top: 1px solid #080808; margin-top: -2px}
.submenu.alternative li:first-child {padding: 3px 4px; border-top: 0}
/* LOGIN VELOCE */
.menuwrap label, .menuwrap form a {padding: 0; font-size: 10px}
.menuwrap label:hover {color: #FFF}
.menuwrap input {padding: 3px; font: 11px verdana, arial, sans-serif; color: #000; background: #AAA; border: 1px solid #000; border-radius: 4px; box-shadow: 0 1px 0 #444}
.menuwrap input:hover {cursor: pointer; background: #BBB}
.menuwrap input:focus {cursor: default; background: #DDD; outline: none; box-shadow: 0 1px 5px #888}
.menuwrap input[type=submit] {padding: 2px; text-shadow: 0 -1px 0 #444; color: #DDD; border-radius: 4px;
background: #424242; border: 1px solid rgba(0, 0, 0, .5); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .3), inset 0 10px rgba(255, 255, 255, .2), inset 0 10px 20px rgba(255, 255, 255, .25), inset 0 -15px 30px rgba(0, 0, 0, .3)}
.menuwrap input[type=submit]:hover {color: #FFF; background: #555}
/* CERCA */
.menuwrap .search input {padding-right: 20px; color: #CCC; background: #666 url('http://img.forumfree.net/style_images/52/icon_search.png') no-repeat 96% -12%}
.menuwrap .search input:hover {color: #E0E0E0; background-color: #6F6F6F}
.menuwrap .search input:focus {color: #FFF; background-color: #888; background-image: none}
/* MENU principale */
Questa parte riguarda l'aspetto della barra che vediamo in cima al forum ed è la prima parte da modificare, prima di passare alle sottovoci e agli altri componenti.CITAZIONE.menuwrap {text-shadow: -1px -1px 0 #111; font-size: 12px; font-family: verdana, tahoma, arial, sans-serif; background: #333; background: linear-gradient(#404040,#1A1A1A); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); -moz-box-shadow: -2px 1px 2px rgba(0, 0, 0, .5)}
font-size: 12px è la dimensione del testo del menù;
font-family: verdana, tahoma, aria, sans-serif è il carattere del testo;
background: #333 è il colore dello sfondo della barra;
background: linear-gradient(#404040,#1A1A1A) è l'effetto sfumatura che è stato applicato alla barra di default. Se non vi interessa potete eliminare questa parte, altrimenti seguite questa guida per la modifica: gradient
box-shadow: 0 1px 2px rgba(0, 0, 0, .5) si tratta dell'ombreggiatura aggiunta alla barra: box-shadow
-moz-box-shadow: -2px 1px 2px rgba(0, 0, 0, .5) è esattamente lo stesso effetto della riga superiore, ma con il prefisso -moz la rende compatibile anche per le vecchie versioni di Firefox.CITAZIONE.menuwrap li {line-height: 2.6em; color: #AAA; text-shadow: -1px -1px 0 #111}
line-height: 2.6em è l'altezza della linea delle voci principali della barra (nickname, messenger, discussioni, ecc...);
color: #AAA è il colore delle voci;
text-shadow: -1px -1px 0 #111 è l'effeto di ombreggiatura applicato al testo: text-shadowCITAZIONE.menuwrap a {margin: 0; padding: 0 11px; font-size: 11px; color: #AAA; text-decoration: none}
margin: 0; padding: 0 11px i link delle voci non avranno alcun margine, ma un padding (margine interno del testo) laterale di 11 pixel;
font-size: 11px; color: #AAA; la dimensione e il colore del testo;
text-decoration: none le voci, pur essendo link, non saranno sottolineati;CITAZIONE.menuwrap a:hover {color: #FFF; border: 0}
color: #FFF al passaggio del mouse le voci saranno di colore bianco;
border: 0 azzera il bordo;CITAZIONE.menuwrap .icon a {padding: 0 6px}
padding: 0 6px il padding laterale delle icone di destra è di 6px;CITAZIONE#m_up a {padding: 0 11px 0 0}
#c_up {position: absolute; right: 10px; bottom: 10px; opacity: .5}
#f_up {position: fixed; bottom: 20px; right: 1%; opacity: .9}
.p_up:hover, #c_up:hover, #f_up:hover {opacity: 1; text-decoration: none; border: 0}
Questa parte riguarda i pulsanti per tornare in cima alla pagina, personalizzabili dal pannello Grafica > Immagini > *_UP, quindi non ci dilungheremo oltre su questi.
/* esci e news */CITAZIONE.menuwrap b {color: #FFF}
color: #FFF come dice il titolo questa parte determina il colore delle voci Esci e delle eventuali news da ForumFree.
/* numero msg e link REGISTRATI */CITAZIONE.menuwrap em {padding: 2px 5px; color: #FFF; text-shadow: none; background: #525252; border-radius: 6px}
Anche in questo caso il titolo è esplicativo: si tratta del numero di messaggi o delle notifiche (iscrizioni); come abbiamo già visto avremo un padding verticale di 2px e orizzontale di 5, un colore del testo bianco e nessuna ombreggiatura del testo (text-shadow). Lo sfondo come è solito è definito da background, mentre border-radius determina il raggio di curvatura dei bordi. Per maggiori info al riguardo: border-radius.CITAZIONE.menuwrap #nick {margin-left: .6em}
.menuwrap form {padding: 0 11px 0 5px}
Non sono altro che rispettivamente il margine sinistro del nickname dall'avatar e i margini del campo di ricerca.
/* MENU contestuale(dropdown) */
Ci spostiamo nella parte del menù dropdown "a tendina".CITAZIONE.menu > a:hover, .menu:hover > a {color: #FFF; background: url('https://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}
color: #FFF; è il colore delle voci al passaggio del mouse;
background: url('https://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom è la freccia in basso che appare sopra ai "submenu". Per modificarla basta sostituire l'url con quello presente.CITAZIONE.menu ul {width: 15em; background: #525252; border: 1px solid #080808; border-top: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .5)}
width: 15em; la larghezza dei menù a tendina;
background: #525252; il colore di sfondo di questi;
border: 1px solid #080808; border-top: 0; i bordi;
box-shadow: 0 1px 5px rgba(0, 0, 0, .5) e ancora una volta l'ombreggiatura del box;CITAZIONE#right .menu ul {margin-left: -2em}
Questa parte "aggiusta" l'allineamento della tendina. Possiamo lasciarla invariata.CITAZIONE.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; border-top: 1px solid #636363}
Arriviamo a definire gli stili delle sottovoci, in questa parte vediamo attributi che già abbiamo analizzato, il padding, l'altezza del testo (line-height), l'ombreggiatura (text-shadow) e il bordo (border).CITAZIONE.menu li:first-child {padding-top: 0; border-top: 5px solid #484848}
Qusti sono gli stili differenti solo per la prima sottovoce.CITAZIONE.menu li strong {padding: 3px 8px; color: #000}
I "titoli" di menu a tentina Aiuto e Feed RSS avranno un padding particolare e il colore nero.CITAZIONE.menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
.menu li a:hover, .menu li:hover > a {text-shadow: -1px -1px 0 #272727; background: #373737; border-radius: 5px}
Tutti stili già affrontati, per le sottovoci (ad eccesioni dei "titoli" di cui abbiamo appena parlato) e di queste al passaggio del mouse.
Per il momento ci fermiamo qui.
Edited by A c e - 27/11/2013, 21:14.
Personalizzazione della barra utente |