.

Personalizzazione della barra utente

« Older   Newer »
 
  Share  
.
  1. .Fly
    Posted on 27/10/2012, 12:52
     
    .

    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-shadow
    CITAZIONE
    .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
     
    .
  2. candyiole
    Posted on 27/10/2012, 17:53
     
    .

    User deleted
    vi ringrazio della spiegazione , ma io abituata al vecchio layout , ora non mi trovo
     
    .
  3. NaTHaN75
    Posted on 27/10/2012, 18:52
     
    .

    User deleted
    è possibile rendere trasparente il colore della barra utente? :D grazie.
     
    .
  4. Kaleela
    Posted on 27/10/2012, 19:34
     
    .
    Avatar

    Senior Member

    Group
    Member
    Posts
    38,115
    Location
    Midian

    Status
    Offline
    Nella vecchia barra avevo un menu a tendina con diversi link.
    CODICE
    <select size="1" name="menu" style="border: 0; background: #111; font-family: tahoma, arial; font-size: 11px; color: #8c8c8c; text-shadow: 1px 1px 0 #050505" onchange="window.open(this.options[this.selectedIndex].value,this.selectedIndex!=27?'_self':'_blank')">
    <option selected>-·=»†«=·-Menu Rapido-·=»†«=·-</option>
    <option value="link">titolo</option></optgroup>
    <optgroup label="titolo" style="background-color:#080808">
    <option value="link">titolo</option></optgroup>
    </select>

    E' possibile inserirlo nel nuovo layout e magari eliminare alcune icone di dx?
    Contacts Web
     
    .
  5. El Gringo 89
    Posted on 27/10/2012, 19:35
     
    .
    Avatar

    Senior Member

    Group
    Golden Skinner
    Posts
    23,086
    Location
    Far West

    Status
    Offline
    CITAZIONE
    è possibile rendere trasparente il colore della barra utente? :D grazie.

    In questo codice:
    CODICE
    .menuwrap {ftext-shadow: -1px -1px 0 #111ont-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)}

    rimuovi:
    CODICE
    background: #333; background: linear-gradient(#404040,#1A1A1A)

    e inserisci:
    CODICE
    background: none
    Contacts Web
     
    .
  6. M
    Posted on 27/10/2012, 23:05
     
    .

    User deleted
    CITAZIONE (Kaleela @ 27/10/2012, 20:34) 
    Nella vecchia barra avevo un menu a tendina con diversi link.
    CODICE
    <select size="1" name="menu" style="border: 0; background: #111; font-family: tahoma, arial; font-size: 11px; color: #8c8c8c; text-shadow: 1px 1px 0 #050505" onchange="window.open(this.options[this.selectedIndex].value,this.selectedIndex!=27?'_self':'_blank')">
    <option selected>-·=»†«=·-Menu Rapido-·=»†«=·-</option>
    <option value="link">titolo</option></optgroup>
    <optgroup label="titolo" style="background-color:#080808">
    <option value="link">titolo</option></optgroup>
    </select>

    E' possibile inserirlo nel nuovo layout e magari eliminare alcune icone di dx?

    No, spiacente: #entry517306005
     
    .
  7. Kaleela
    Posted on 28/10/2012, 10:24
     
    .
    Avatar

    Senior Member

    Group
    Member
    Posts
    38,115
    Location
    Midian

    Status
    Offline
    Grazie M..
    Un'altra cosa. Volevo modificare le iconcine ma in immagini sono visibili solo ICON_COMMUNITY e ICON_RSS, l'icona del salvagente e l'omino non ci sono.

    Edited by Kaleela - 28/10/2012, 14:31
    Contacts Web
     
    .
  8. M
    Posted on 28/10/2012, 14:36
     
    .

    User deleted
    CITAZIONE (Kaleela @ 28/10/2012, 10:24) 
    l'icona del salvagente e l'omino non ci sono.

    Sono ICON_HELP e ICON_MEMBERS. Se nel pannello delle immagini premi il pulsante Salva modifiche, saranno sostituite da help e members che usavi prima e sono ancora in memoria ma per ragioni tecniche non erano impiegabili da subito per il menù (per quel tipo di icone va memorizzata la larghezza, non basta più solo l'indirizzo).
     
    .
  9. Kaleela
    Posted on 28/10/2012, 15:44
     
    .
    Avatar

    Senior Member

    Group
    Member
    Posts
    38,115
    Location
    Midian

    Status
    Offline
    Ecco.. ed io mi chiedevo perché lì ci fossero ma non apparissero più in home XD
    Grazie ancora per la pazienza M!
    Contacts Web
     
    .
  10. Borghetto
    Posted on 29/10/2012, 09:47
     
    .
    Avatar

    Advanced Member

    Group
    Member
    Posts
    2,979

    Status
    Offline
    Purtroppo ho fruitori che sono a pari mio in quanto a conoscenza di forum e del loro utilizzo (praticamente zero).

    Sicuramente è una miglioria, ma a volte poter avere la possibilità di scelta è meno traumatico per gli utenti.
    Spero si adeguino in fretta.

    Detto questo chiedo se è possibile evidenziare (magari in giallo su nero o meglio ancora "lampeggiante") il numerino che segnala gli MP.

    Grazie per l'attenzione.

    Questo è il nostro forum: http://ilmessonotificatore.forumfree.it/
    Contacts Web
     
    .
  11. .Fly
    Posted on 29/10/2012, 14:58
     
    .

    User deleted
    Così è giallo e lampeggiante:
    CODICE
    .menuwrap .menu:nth-child(2) em {color: #FF0; text-decoration: blink}
     
    .
  12. Kaleela
    Posted on 29/10/2012, 17:52
     
    .
    Avatar

    Senior Member

    Group
    Member
    Posts
    38,115
    Location
    Midian

    Status
    Offline
    Rieccomi... avrei bisogno di una mano.
    E' la prima volta che metto mano a questo menu e logicamente dovevo far casino.. Non mi scende la tendina della Home ForumFree, News, Crea il tuo forum, etc...
    Ho perso un codice per strada?
    http://skinterreskin.forumfree.it/
    Contacts Web
     
    .
  13. M
    Posted on 29/10/2012, 18:03
     
    .

    User deleted
    Dipende dal fatto che non scendevano nemmeno le opzioni sotto l'avatar.
     
    .
  14. Kaleela
    Posted on 29/10/2012, 18:16
     
    .
    Avatar

    Senior Member

    Group
    Member
    Posts
    38,115
    Location
    Midian

    Status
    Offline
    Ah... non sapevo stessero insieme :P a parte che non so nemmeno quale pezzo di codice è... >.<
    Sarebbe possibile per caso spostare più verso dx la tendina del nome in modo che non copra l'avatar?
    Contacts Web
     
    .
  15. M
    Posted on 29/10/2012, 18:42
     
    .

    User deleted
    Così?
     
    .
103 replies since 27/10/2012, 12:52   11484 views
  Share  
.
 
.
Guide e risorse per realizzare skin
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumFree