Messaggio Personalizzato nel Menu Utente

[ CSS ] Inserire un Messaggio prima del nick (o dopo) nel Menuwrap.

« Older   Newer »
 
  Share  
.
  1.     +3   +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Team
    Posts
    12,737
    Likes
    +150

    Status
    Anonymous
    Messagio Personalizzato nel Menu Utente

    Rielaborazione del tutorial di Keynine riadattato al Quicks e Standard Layout.

    Per inserire un messaggio personalizzato nel menuwrap basta inserire in Amministrazione > Grafica > Colori e Stili il seguente codice:
    CODICE
    .menuwrap .nick:before {content: " TESTO "; color: #hex !important}

    Al posto di TESTO dovrete inserire il vostro messaggio che verrà mostrato PRIMA DEL NICKNAME.
    Al posto di #hex il colore che deve avere la scritta, altrimenti prende il colore dei link del menu (attenti a non cancellare !important).

    Se si vuole la scritta DOPO IL NICKNAME è necessario cambiare before con after
    CODICE
    .menuwrap .nick:after{content: " TESTO2 "; color: #hex !important}


    Se al posto di un testo, si vuole inserire un immagine basta cambiare il content: " TESTO " con:
    CODICE
    content: url(LINK_IMMAGINE)


    Può essere necessario l'uso di padding-right & padding-left per evitare che la scritta si attacchi al nick.

    Esempio disponibile qui.
    CODICE
    .menuwrap .nick:before {content:"Benvenuto Giovane Utente!"; color: #888 !important; padding-right: 5px; font: 12px georgia !important}


    Ovviamente nessuno vi vieta di personalizzarlo ulteriormente con un font/dimensioni/stile diverso =)

    Tutorial a cura di -spiker per lo SkinFactory.
     
    Top
    .
  2.     +1   -1
     
    .
    Avatar


    Group
    Addict
    Posts
    1,394
    Likes
    0
    Location
    Catania

    Status
    Anonymous
    CODICE
    .menuwrap .nick:after{content: " TESTO2 "; color: #hex !important}

    Si può fare anche con i titoli dei topic, quelli delle sezioni, etc....giusto? basta cambiare il .menuwrap .nick: con .web o quello che si vuoe......può esere?
     
    Top
    .
  3. Valls ~
        +1   -1
     
    .

    User deleted


    Sisi, certo :)
     
    Top
    .
  4. oscar.coh2
        +1   -1
     
    .

    User deleted


    salve,

    posso chiedere dove inserire esattamente .menuwrap .nick:before {content: " TESTO "; color: #hex !important} ??

    ho provato ad inserirlo nella sezione colori e stili ------> /* MENU principale */ ed anche altrove ma non riesco.
    Inserendolo in "Codice HTML che sarà mostrato in tutte le pagine sotto il logo del sito" invece funziona.

    Mi sembra cosa non buona inserirlo in codice html poich mi smbrerebbe di rubare spazio a future ed eventuali funzioni..
    Scusate ma sono davvero un neofita fresco fresco :) è corretto il ragionamento?

    grazie
     
    Top
    .
  5.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Team
    Posts
    12,737
    Likes
    +150

    Status
    Anonymous
    No, va inserito in Colori e Stili e funziona. Bisognerebbe vedere che codice hai inserito (:
     
    Top
    .
  6. oscar.coh2
        +1   -1
     
    .

    User deleted


    CITAZIONE (-spiker @ 3/3/2014, 21:36) 
    No, va inserito in Colori e Stili e funziona. Bisognerebbe vedere che codice hai inserito (:

    ho inserito questo codice: .menuwrap .nick:before {content:"Benvenuto Giovane Utente!"; color: #888 !important; padding-right: 5px; font: 12px georgia !important}

    anche questo: .menuwrap .nick:after{content: " TESTO2 "; color: #hex !important}

    ho pprovato in qualsiasi parte sulla sezione colori e stili, ma non appare nulla! mentre se inserisco la stringa in in codice html appare!! il contenuto del mio forum http://coh2.forumfree.it, ecco:

    CODICE
    body {background-color: #EAEAEA; font-family: verdana, tahoma, arial; font-size: 8pt; color: #000}
    table, div {font-size: 7.5pt; border-spacing: 0; color: #000000}
    a {text-decoration: none; color: #101010}
    a:hover {color: #DE7C1C; text-decoration: underline}

    /* 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-position: none}


    /* SCRITTE ESTERNE */
    .nav {font-weight: bold; font-size: 8pt}
    .nav a {color: #DE7C1C} .nav a:hover {color: #DD791B}

    /* DIMENSIONI FORUM */
    .header_width, .skin_tbl_width, .skin_tbl {width: 78%}
    .stats .border {width: 78%}

    /* COLORI LISTA UTENTI ATTIVI */
    .amministratore {color: #FF1900; font-weight: bold}
    .moderatore {color: #0EFF00; font-weight: bold}
    .utente {}
    .daconvalidare {color: #E3E4E4}
    .gruppo1 {color: #E3E4E4; font-weight: bold}

    /* BOTTONI */
    .button, .button2 {display:inline-block; line-height: 30px; margin-right: 6px; font-size: 9px; text-align:center; font-weight:bold; cursor:pointer; height: 30px}
    .button2 {margin: 0; padding-left: 20px; height: 10px}

    /* BARRA ATTORNO AL FORUM */
    .mback {height: 26px; border-bottom: 0 solid #101010; background-image: none}
    .mtitle {text-align: center; padding-bottom: 3px; letter-spacing: 1px; word-spacing: 1px; padding-top: 3px; font-weight: bold; font-size: 9.5pt; color: #FDFDFD; text-shadow: 1px 1px 0 #303030}
    .mback_left {width: 50px; background-image: url([URL=http://skin.forumfree.net/1952/mback_left.png]http://skin.forumfree.net/1952/mback_left.png[/URL]); background-repeat: no-repeat; background-position: bottom}
    .mback_center {background-image: url([URL=http://skin.forumfree.net/1952/mback_center.png]http://skin.forumfree.net/1952/mback_center.png[/URL]); background-repeat: repeat-x; background-position: bottom}
    .mback_right {width: 50px; background-image: url([URL=http://skin.forumfree.net/1952/mback_right.png]http://skin.forumfree.net/1952/mback_right.png[/URL]); background-repeat: no-repeat; background-position: bottom}
    .msub {height: 2px}
    .msub_left {width: 50px; background-image: url([URL=http://skin.forumfree.net/1952/msub.png]http://skin.forumfree.net/1952/msub.png[/URL]); background-repeat: no-repeat}
    .msub_center {background-image: url([URL=http://skin.forumfree.net/1952/msub.png]http://skin.forumfree.net/1952/msub.png[/URL]); background-repeat: repeat-x}
    .msub_right {width: 50px; background-image: url([URL=http://skin.forumfree.net/1952/msub.png]http://skin.forumfree.net/1952/msub.png[/URL]); background-repeat: no-repeat}


    .mleft_top, .mleft, .sep_left, .mleft_bottom, .mright_top, .mright, .sep_right, .mright_bottom {width: 0}

    /* BARRA UTENTE */
    table.menu {height: 25px; color: #EBEBEB; text-shadow: 1px 1px 0 #CC3D0D; background-image: url([URL=http://skin.forumfree.net/1952/mback_center2.png]http://skin.forumfree.net/1952/mback_center2.png[/URL]); background-color: #F2EFEB; background-repeat: repeat-x; border-left: 1px solid #BD640D; border-right: 1px solid #BD640D}
    table.menu .highlight {font-weight: bold; color: #BD640D}
    table.menu a {color: #F2EFEB}
    table.menu a:hover {color: #F2EFEB}

    /* SEZIONI FORUM */
    .board .skin_tbl {border-left: 4px solid #E0E0E0; border-right: 4px solid #E0E0E0; border-bottom: 6px solid #C0C0C0}
    .skin_tbl_border, .mainbg {background-color: #}
    .title, .title2, .foot, .row2 {height: 20px; font-weight: bold; color: #101010; background-color: #DADADA; border: 1px solid #DADADA; border-bottom: 0}
    .ww, .xx, .yy, .zz, .aa, .bb, .cc {background-color: #EAEAEA; border: 1px solid #EAEAEA; border-bottom: 0; border-top: 1px solid #A0A0A0}
    .web {font-size: 9pt; line-height: 200%}
    .desc {font-size: 11px; color: #101010}
    .board .foot {display: none}

    /* STATISTICHE */
    .stats .title2 {height: 27px; border-bottom: 1px solid #BD640D; background-image: url([URL=http://skin.forumfree.net/1952/stat.png]http://skin.forumfree.net/1952/stat.png[/URL]); border-left: 1px solid #BD640D; border-right: 1px solid #BD640D; background-repeat: repeat-x; background-position: bottom; background-color: #EAEAEA; letter-spacing: 1px; font-size: 8pt; color: #F2EFEB; text-shadow: 1px 1px 0 #CC3D0D; text-align: center}
    .sunbar {height: 20px; font-weight: bold; color: #A6ABAD; background-color: #EAEAEA; border: 1px solid #EAEAEA; border-bottom: 0}
    .stats .ww, .stats .aa {background-color: #EAEAEA}
    .stats .ww {text-align: center}
    .highlight {color: #A6ABAD}

    /* LINK MOD */
    .highlight a {color: #A6ABAD} .highlight a:hover {text-decoration: line-through}

    /* DISCUSSIONE */
    .left_top, .right_top, .left_bottom, .right_bottom {height: 25px; color: #444; background-color: #E0E0E0; border: 1px solid #EAEAEA; border-bottom: 0}
    .nick {font-size: 12px; color: #A6ABAD; padding-bottom: 2px}
    .nick a {font-weight: bold}
    .left, .right {background-color: #EAEAEA; border: 1px solid #EAEAEA; border-bottom: 0}
    .quote {border: 1px solid #BBBBBB; background-color: #BBBBBB; font-size: 8pt; padding: 2px}
    .code {border: 1px solid #BD640D; background-color: #DE7D1D; color: #F4F4F4; font-size: 8pt; padding: 2px}
    .color {font-size: 9.5pt; line-height: 180%}
    .color a:hover {text-decoration: underline}
    hr {color: #ADBAC6}
    .fancyborder {background-color: #FFF; border: 1px dashed #ADBAC6}
    .edit {font-size: 9px; font-style: italic; color: #A6ABAD}
    .bottomborder {border-bottom: 1px dashed #A6ABAD}
    .signature {color: #778F9F; line-height: 150%}
    .sep {height: 4px; background-color: #EAEAEA}

    /* MESSENGER */
    .msg_txt a:hover {text-decoration: underline}
    .msg_main, .row1 {background-color: #EAEAEA; border: 1px solid #EAEAEA; border-bottom: 0}
    .row3 {background-color: #EAEAEA; border: 1px solid #EAEAEA}
    .title3, .darkbar {height: 23px; background-image: url([URL=http://skin.forumfree.net/1952/darkbar.png]http://skin.forumfree.net/1952/darkbar.png[/URL]); border-bottom: 0; font-weight: bold; color: #F1F1F1}
    .title3 {border: 0}
    .msg .details p {color: #008000; font-size: 10px; line-height: 150%}
    .msg .details {font-size: 7.5pt}
    .info {padding: 3px; background-color: #EAF2FF; color: #448AFF; border: 1px solid #AACAFF}
    .alert {padding: 3px; background-color: #FFEAEA; color: #FF4444; border: 1px solid #FFAAAA}

    /* PROFILO UTENTI */
    .pagetitle {font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
    .profile .title2 {border: 0; border-bottom: 0 solid #FFF}
    .profile .row1 {border: 0; background-color: #EAEAEA}

    /* INPUT */
    .textinput, .forminput, .input, .codebuttons {border: 1px solid #D1CFCF; background-color: #F1F0F0; color: #A6ABAD; font-size: 7.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle}
    .forminput {font-size: 11px}
    table.menu .textinput, table.menu .forminput {background-color: #F4F6FC; border-left: 0 solid #B2B9C5}
    .msg .textinput {background-color: #FAFAFA; color: #444; font-size: 8.5pt}
    .msg .input, .msg .forminput {background-color: #F7F7F7}

    /* TAGBOARD*/
    .tag .aa {background: #DBDBDB}
    .tag .ww {background: #none}
    .tag .ww td br {display: none}
    .tag .aa, .tag .ww {border: 0}


    puoi aiutarmi? grazie

    Edited by -spiker - 4/3/2014, 10:51
     
    Top
    .
  7.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Team
    Posts
    12,737
    Likes
    +150

    Status
    Anonymous
    Prova questo:
    CODICE
    .menuwrap #nick:after {content: " TESTO2 "; color: #hex !important}
    .menuwrap #nick:before {content:"Benvenuto Giovane Utente!"; color: #888 !important; padding-right: 5px; font: 12px georgia !important}
     
    Top
    .
  8. oscar.coh2
        +1   -1
     
    .

    User deleted


    CITAZIONE (-spiker @ 4/3/2014, 10:52) 
    Prova questo:
    CODICE
    .menuwrap #nick:after {content: " TESTO2 "; color: #hex !important}
    .menuwrap #nick:before {content:"Benvenuto Giovane Utente!"; color: #888 !important; padding-right: 5px; font: 12px georgia !important}

    ho appena provato ma proprio non funziona! l'ho inserito di nuovo ovunque sempre in colori e stili.

    Faccio presente che, come dicevo nel post precedente, se invece metto il nuovo codice nella sezione Codice HTML il testo appare! solo che adesso per qualche strana ragione, appare solo sopra il logo, vedi foto:



    mentre io vorrei semplicemente il testo descrittivo dove ho segnato in rosso il numero 1
     
    Top
    .
  9.     +1   -1
     
    .
    Avatar

    Senior Member

    Group
    Team
    Posts
    12,737
    Likes
    +150

    Status
    Anonymous
    Strano perchè io l'ho testato su quicks layout e mi funziona: http://whitecollar.skin.forumfree.it/

    In HTMl non puoi metterlo perchè non ti funziona, ti appare infatti tutto il codice.

    Mettimi admin del forum che ci provo io (:
     
    Top
    .
  10. oscar.coh2
        +1   -1
     
    .

    User deleted


    CITAZIONE (-spiker @ 4/3/2014, 12:44) 
    Strano perchè io l'ho testato su quicks layout e mi funziona: http://whitecollar.skin.forumfree.it/

    In HTMl non puoi metterlo perchè non ti funziona, ti appare infatti tutto il codice.

    Mettimi admin del forum che ci provo io (:

    innanzitutto ti ringrazio per l'attenzione. Perdonami ma,quasi certamente ho frainteso la funzione del menuwrap.

    però ti disturberò ancora per qualche problema o dubbio che risconterò :)

    ciao
     
    Top
    .
9 replies since 24/6/2013, 14:34   1642 views
  Share  
.