ForumFree Skin Lab

Reply Reply
.

Personalizzazione della barra utente

« Older   Newer »
Track   Print   Email   Share
.
  1. .Fly
    view post Posted on 27/10/2012, 13:52
    Quote Quote
    .
    Avatar

    Gran Maestro

    Group
    Member
    Posts
    6316

    Status
    Anonymous

    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 modifiare 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 {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)}

    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, disussioni, 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('http://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}

    color: #FFF; è il colore delle voci al passaggio del mouse;
    background: url('http://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.
    PM PM
    Top
    .
  2. candyiole
    view post Posted on 27/10/2012, 18:53
    Quote Quote
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    11616
    Location
    Casa Mia ^.^

    Status
    Online

    vi ringrazio della spiegazione , ma io abituata al vecchio layout , ora non mi trovo
    PM PMEmail EmailWeb Web
    Top
    .
  3. NaTHaN75
    view post Posted on 27/10/2012, 19:52
    Quote Quote
    .
    Avatar

    Maestro

    Group
    Member
    Posts
    1597
    Location
    Sardegna

    Status
    Offline

    è possibile rendere trasparente il colore della barra utente? :D grazie.
    PM PM
    Top
    .
  4. Kaleela
    view post Posted on 27/10/2012, 20:34
    Quote Quote
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    34762
    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?
    PM PMEmail EmailContacts ContactsWeb Web
    Top
    .
  5. El Gringo 89
    view post Posted on 27/10/2012, 20:35
    Quote Quote
    .
    Avatar

    Maestro Internazionale

    Group
    Golden Skinner
    Posts
    20082
    Location
    Far West

    Status
    Anonymous

    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
    PM PMContacts ContactsWeb Web
    Top
    .
  6. M
    view post Posted on 28/10/2012, 00:05
    Quote Quote
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    13951

    Status
    Anonymous

    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
    PM PMWeb Web
    Top
    .
  7. Kaleela
    view post Posted on 28/10/2012, 11:24
    Quote Quote
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    34762
    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
    PM PMEmail EmailContacts ContactsWeb Web
    Top
    .
  8. M
    view post Posted on 28/10/2012, 15:36
    Quote Quote
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    13951

    Status
    Anonymous

    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).
    PM PMWeb Web
    Top
    .
  9. Kaleela
    view post Posted on 28/10/2012, 16:44
    Quote Quote
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    34762
    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!
    PM PMEmail EmailContacts ContactsWeb Web
    Top
    .
  10. Borghetto
    view post Posted on 29/10/2012, 10:47
    Quote Quote
    .
    Avatar

    Maestro

    Group
    Member
    Posts
    2666

    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/
    PM PMEmail EmailContacts ContactsWeb Web
    Top
    .
  11. .Fly
    view post Posted on 29/10/2012, 15:58
    Quote Quote
    .
    Avatar

    Gran Maestro

    Group
    Member
    Posts
    6316

    Status
    Anonymous

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

    Maestro Internazionale

    Group
    Member
    Posts
    34762
    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://skinterre.skin.forumfree.it/
    PM PMEmail EmailContacts ContactsWeb Web
    Top
    .
  13. M
    view post Posted on 29/10/2012, 19:03
    Quote Quote
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    13951

    Status
    Anonymous

    Dipende dal fatto che non scendevano nemmeno le opzioni sotto l'avatar.
    PM PMWeb Web
    Top
    .
  14. Kaleela
    view post Posted on 29/10/2012, 19:16
    Quote Quote
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    34762
    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?
    PM PMEmail EmailContacts ContactsWeb Web
    Top
    .
  15. M
    view post Posted on 29/10/2012, 19:42
    Quote Quote
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    13951

    Status
    Anonymous

    Così?
    PM PMWeb Web
    Top
    .
51 replies since 27/10/2012, 13:52
Track   Print   Email   Share
.
Reply Reply
.
Problemi
Create your free board and your free blog! · Support · Top Forum · Top Blog · Contacts · Powered by ForumFree