ForumFree Skin Lab

Personalizzazione della barra utente

« Older   Newer »
 
.
  1.  
    .
    Avatar

    Gran Maestro

    Group
    Member
    Posts
    6,526

    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 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:
    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('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.

    Edited by A c e - 27/11/2013, 21:14
     
    Top
    .
  2.  
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    14,277
    Location
    Casa Mia ^.^

    Status
    Offline

    vi ringrazio della spiegazione , ma io abituata al vecchio layout , ora non mi trovo
     
    Top
    .
  3.  
    .
    Avatar

    Maestro

    Group
    Member
    Posts
    1,633
    Location
    Sardegna

    Status
    Offline

    possibile rendere trasparente il colore della barra utente? :D grazie.
     
    Top
    .
  4.  
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    35,411
    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?
     
    Top
    .
  5.  
    .
    Avatar

    Maestro Internazionale

    Group
    Golden Skinner
    Posts
    23,789
    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
     
    Top
    .
  6.  
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    15,783

    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
     
    Top
    .
  7.  
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    35,411
    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
     
    Top
    .
  8.  
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    15,783

    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).
     
    Top
    .
  9.  
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    35,411
    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!
     
    Top
    .
  10.  
    .
    Avatar

    Maestro

    Group
    Member
    Posts
    2,961

    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/
     
    Top
    .
  11.  
    .
    Avatar

    Gran Maestro

    Group
    Member
    Posts
    6,526

    Status
    Anonymous

    Cos giallo e lampeggiante:
    CODICE
    .menuwrap .menu:nth-child(2) em {color: #FF0; text-decoration: blink}
     
    Top
    .
  12.  
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    35,411
    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/
     
    Top
    .
  13.  
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    15,783

    Status
    Anonymous

    Dipende dal fatto che non scendevano nemmeno le opzioni sotto l'avatar.
     
    Top
    .
  14.  
    .
    Avatar

    Maestro Internazionale

    Group
    Member
    Posts
    35,411
    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?
     
    Top
    .
  15.  
    .
    Avatar

    Staff

    Group
    ForumFree Staff
    Posts
    15,783

    Status
    Anonymous

    Cos?
     
    Top
    .
64 replies since 27/10/2012, 12:52
 
.