-
Nens.
User deleted
Questa guida si propone di illustrare come inserire verticalmente il menu utente, allineato al bordo sinistro della pagina. Il codice proposto sfrutta il CSS di base del menu, arricchendolo e modificandolo in maniera opportuna.
Verrà anche illustrato come personalizzare l'estetica del menu.
Installazione
Andare in Amministrazione-->Funzioni Aggiuntive-->Statistiche e Opzioni, e verificare che sia presente la spunta alla voce Visualizza registrazione veloce/login veloce. Qualora non fosse presente, spuntate la casella e salvate le modifiche.
NUOVO LAYOUT
Inserire, in Colori e Stili, il codice che trovate qui di seguito:SPOILER (clicca per visualizzare)CODICE/* MENU UTENTE LATERALE - http://ffmagazine.forumfree.it/?t=60624810 */
.menuwrap {background: none !important; box-shadow: none !important}
.menuwrap .left, .menuwrap .right {border: 1px solid #413428; border-left: 0; background: url('http://gianlucabenucci.com/ffm/guide/menul/menu.jpg') repeat-y center bottom #75604D; border-radius: 0 8px 8px 0; box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.5)}
.menuwrap .left {position: absolute; top: 80px; width: 39px}
.menuwrap .left li, .menuwrap .nick, .menuwrap .left li > a {display: block}
.menuwrap .left .avatar {display: none}
.menuwrap .nick {margin-left: 0 !important}
.menu:first-child > a:hover, .menu:first-child:hover > a, .right .menu > a:hover, .right .menu:hover > a {background-image: none !important}
.menuwrap .nick, .left > li > a {font-size: 0; color: transparent}
/* VOCI DEL MENU */
.left .menu > a, .left .menu:hover > a {border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1)}
.left .menu:first-child > a {border-top: 0; border-radius: 0 8px 0 0}
.left .menu:last-child > a {border-bottom: 0; border-radius: 0 0 8px 0}
/* hover */
.menu > a:hover, .menu:hover > a {box-shadow: 9px 0 10px 0 rgba(0, 0, 0, 0.6) inset}
.right .menu > a:hover, .right .menu:hover > a {box-shadow: 0 0 10px rgba(0, 0, 0, 0.6) inset}
.left .menu:first-child > a:hover {border-radius: 0 8px 0 0}
.left .menu:last-child > a:hover {border-radius: 0 0 8px 0}
.right .menu:first-child > a:hover {border-radius: 5px 0 0 5px}
/* icone */
.menuwrap .nick {background: url('http://gianlucabenucci.com/Skin/makelove/m1.png') no-repeat center}
.left > .menu:nth-child(2) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m2.png') no-repeat center}
.left > .menu:nth-child(3) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m3.png') no-repeat center}
.left > .menu:nth-child(4) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m4.png') no-repeat center}
.left > .menu:nth-child(5) > a {background: url('http://dumpshare.net/images/751wrench.png') no-repeat center}
/* nuovo messaggio, nuova discussione */
.menuwrap .left em {position: absolute; right: -13px; background: url('http://dumpshare.net/images/995em.png') no-repeat center transparent; font-size: 0; height: 16px; width: 16px}
/* MENU CONTENSTUALE (dropdown) */
/* tendina */
.left .menu ul, .right .menu ul {border: 1px solid #413428 !important; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); margin-left: 5px; left: 100%; top: 0; background: url("http://gianlucabenucci.com/ffm/guide/menul/menul.png") repeat-x center top #544334; border-radius: 6px}
.right .menu ul {top: 42px; left: 95%}
.menu ul:before {content: "aaaaaa"; display: block; width: 10px; margin-left: -7px; position: absolute; color: transparent; text-shadow: none}
.right .menu ul:before {height: 5px; margin-left: 0; margin-top: 15px; top: -20px; width: 15em}
.left .menu ul, .left .menu li, .right .menu li {border: 0}
/* voci della tendina */
.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; position: relative}
.menu li:first-child {border-top: 0 !important; padding-top: 4px !important}
.menu li strong {color: #FFF !important}
.menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
.menu li a:hover, .menu li:hover > a, .menuwrap input, .menuwrap input:focus {background-color: #413428 !important; border-radius: 5px; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), 0 -11px 3px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4) inset !important; color: #FFFFFF !important}
/* MENU IN ALTO A DESTRA */
.menuwrap .right {background: url("http://gianlucabenucci.com/ffm/guide/menul/menul.png") repeat-x center top #544334; border-left: 1px solid; border-radius: 5px; margin: 5px 10px; box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.5), -4px 0 3px -3px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)}
.right .menu ul {margin-left: -10em !important}
.menu.icon {border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.2)}
.menu.icon:first-child {border-left: 0}
/* cerca*/
.menuwrap .search {padding-right: 7px !important}
.menuwrap .search input {padding-right: 0 !important; width: 15px; background-position: 56% -12% !important; border: 0; color: transparent !important; transition: width ease .2s; -webkit-transition: width ease .2s; -o-transition: width ease .2s}
.menuwrap .search input:focus {width: 100px; background-position: 96.5% 110% !important; color: #FFF !important}
/* LOGIN */
/* parte sinistra */
.left .login + li, .reg {display: none}
.left .icon, .left .login {background: url('http://dumpshare.net/images/498left_login.jpg'); padding-right: 115px; margin-top: -1px; border: 1px solid #413428}
.left .icon {border-bottom: 0; border-radius: 0 8px 0 0}
.left .login {border-top: 0; height: 120px; border-radius: 0 0 8px 0}
.left .icon {margin-bottom: -3px}
.login input {position: absolute; margin: 50px 0 10px -8px; width: 97px}
.login form > input:nth-child(4) {margin: 0 !important}
.login form > input:nth-child(5), .login form > input:nth-child(6) {margin-top: 25px}
.login a {display: block; float: left; color: #FFF !important; text-shadow: none}
.login em, .login input[type="submit"] {position: static !important; box-shadow: none !important; background: none !important; border: 0 !important}
.login em {margin: 0 15px}
.login input[type="submit"] {font-weight: bold; font-size: 13px}
.login form a[href*="?act=Reg&CODE=10"] {margin-top: -10px !important}
.login form a {margin-top: 5px}
/* parte destra */
.right > li:first-child, .right > li:nth-child(2) {float: right; margin-top: 30px; margin-left: -140px; padding-right: 55px}
.menu.icon:first-child, .menu.icon:nth-child(2) {float: none; margin: 0; padding-right: 0}
.right > li:nth-child(2) {margin-top: 30px; margin-right: -38px}
.menuwrap .right a {color: #FFF !important; text-shadow: none}
.right a[href*='?act=newforum'] {padding-left: 11px !important}
VECCHIO LAYOUT
Inserire, in Colori e Stili, il codice che trovate qui di seguito:SPOILER (clicca per visualizzare)CODICE/* MENU UTENTE LATERALE - http://ffmagazine.forumfree.it/?t=60624810 */
.menuwrap {background: none !important; box-shadow: none !important}
.menuwrap #left, .menuwrap #right {border: 1px solid #413428; border-left: 0; background: url('http://gianlucabenucci.com/ffm/guide/menul/menu.jpg') repeat-y center bottom #75604D; border-radius: 0 8px 8px 0; box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.5)}
.menuwrap > ul:first-child {position: absolute; top: 80px; width: 39px}
.menuwrap > ul:first-child li, .menuwrap #nick, .menuwrap > ul:first-child li > a {display: block}
.menuwrap .avatar {display: none}
.menuwrap #nick {margin-left: 0 !important}
.menu:first-child > a:hover, .menu:first-child:hover > a, #right .menu > a:hover, #right .menu:hover > a {background-image: none !important}
.menuwrap #nick, #left > li > a {font-size: 0; color: transparent}
/* VOCI DEL MENU */
#left .menu > a, #left .menu:hover > a {border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1)}
#left .menu:first-child > a {border-top: 0; border-radius: 0 8px 0 0}
#left .menu:last-child > a {border-bottom: 0; border-radius: 0 0 8px 0}
/* hover */
.menu > a:hover, .menu:hover > a {box-shadow: 9px 0 10px 0 rgba(0, 0, 0, 0.6) inset}
#right .menu > a:hover, #right .menu:hover > a {box-shadow: 0 0 10px rgba(0, 0, 0, 0.6) inset}
#left .menu:first-child > a:hover {border-radius: 0 8px 0 0}
#left .menu:last-child > a:hover {border-radius: 0 0 8px 0}
#right .menu:first-child > a:hover {border-radius: 5px 0 0 5px}
/* icone */
.menuwrap #nick {background: url('http://gianlucabenucci.com/Skin/makelove/m1.png') no-repeat center}
#left > .menu:nth-child(2) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m2.png') no-repeat center}
#left > .menu:nth-child(3) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m3.png') no-repeat center}
#left > .menu:nth-child(4) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m4.png') no-repeat center}
#left > .menu:nth-child(5) > a {background: url('http://dumpshare.net/images/751wrench.png') no-repeat center}
/* nuovo messaggio, nuova discussione */
.menuwrap > ul:fiirst-child em {position: absolute; right: -13px; background: url('http://dumpshare.net/images/995em.png') no-repeat center transparent; font-size: 0; height: 16px; width: 16px}
/* MENU CONTENSTUALE(dropdown) */
/* tendina */
#left .menu ul, #right .menu ul {border: 1px solid #413428 !important; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); margin-left: 5px; left: 100%; top: 0; background: url("http://gianlucabenucci.com/ffm/guide/menul/menul.png") repeat-x center top #544334; border-radius: 6px}
#right .menu ul {top: 42px; left: 95%}
.menu ul:before {color: transparent; content: "aaaaaa"; display: block; height: 200px; margin-left: -7px; overflow: hidden; position: absolute; text-shadow: none; width: 10px}
.menuwrap > ul:nth-child(2) .menu ul:before {height: 5px; margin-left: 0; margin-top: 15px; top: -20px; width: 15em}
#left .menu ul, #left .menu li, #right .menu li {border: 0}
/* voci della tendina */
.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; position: relative}
.menu li:first-child {border-top: 0 !important; padding-top: 4px !important}
.menu li strong {color: #FFF !important}
.menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
.menu li a:hover, .menu li:hover > a, .menuwrap input, .menuwrap input:focus {background-color: #413428 !important; border-radius: 5px; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), 0 -11px 3px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4) inset !important; color: #FFFFFF !important}
/* MENU IN ALTO A DESTRA */
.menuwrap #right {background: url("http://gianlucabenucci.com/ffm/guide/menul/menul.png") repeat-x center top #544334; border-left: 1px solid; border-radius: 5px; margin: 5px 10px; box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.5), -4px 0 3px -3px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)}
#right .menu ul {margin-left: -10em !important}
.menu.icon {border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.2)}
.menu.icon:first-child {border-left: 0}
/* cerca*/
.menuwrap .search {padding-right: 7px !important}
.menuwrap .search input {padding-right: 0 !important; width: 15px; background-position: 56% -12% !important; border: 0; color: transparent !important; transition: width ease .2s; -webkit-transition: width ease .2s; -o-transition: width ease .2s}
.menuwrap .search input:focus {width: 100px; background-position: 96.5% 110% !important; color: #FFF !important}
/* LOGIN */
/* parte sinistra */
.menuwrap > ul:first-child .login + li, .reg {display: none}
#left .icon, #left .login {background: url('http://dumpshare.net/images/498left_login.jpg'); padding-right: 115px; margin-top: -1px; border: 1px solid #413428}
#left .icon {border-bottom: 0; border-radius: 0 8px 0 0}
#left .login {border-top: 0; height: 120px; border-radius: 0 0 8px 0}
#left .icon {margin-bottom: -3px}
.login input {position: absolute; margin: 50px 0 10px -8px; width: 97px}
.login form > input:nth-child(4) {margin: 0 !important}
.login form > input:nth-child(5), .login form > input:nth-child(6) {margin-top: 25px}
.login a {display: block; float: left; color: #FFF !important; text-shadow: none}
.login em, .login input[type="submit"] {position: static !important; box-shadow: none !important; background: none !important; border: 0 !important}
.login em {margin: 0 15px}
.login input[type="submit"] {font-weight: bold; font-size: 13px}
.login form a[href*="?act=Reg&CODE=10"] {margin-top: -10px !important}
.login form a {margin-top: 5px}
/* parte destra */
.menuwrap > ul:nth-child(2) > li:first-child, .menuwrap > ul:nth-child(2) > li:nth-child(2) {float: right; margin-top: 30px; margin-left: -140px; padding-right: 55px}
.menu.icon:first-child, .menu.icon:nth-child(2) {float: none !important; margin: 0 !important; padding-right: 0 !important}
.menuwrap > ul:nth-child(2) > li:nth-child(2) {margin-top: 30px; margin-right: -38px}
.menuwrap #right a {color: #FFF !important; text-shadow: none}
#right a[href*='?act=newforum'] {padding-left: 11px !important}
Segue una dettagliata analisi delle classi modificabili..menuwrap .left, .menuwrap .right {border: 1px solid #413428; border-left: 0; background: url('http://gianlucabenucci.com/ffm/guide/menul/menu.jpg') repeat-y center bottom #75604D; border-radius: 0 8px 8px 0; box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.5)}
Indica lo stile dei riquadri marroni del menu. Per personalizzarne lo sfondo, modificare l'URL in background: url('http://gianlucabenucci.com/ffm/guide/menul/menu.jpg') repeat-y center bottom #75604D.left .menu > a, .left .menu:hover > a {border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1)}
Inserisce le linee di separazione tra le varie voci del menu a sinistra. Per modificarne il colore, occorre agire sul colore rgba./* hover */
.menu > a:hover, .menu:hover > a {box-shadow: 9px 0 10px 0 rgba(0, 0, 0, 0.6) inset}
.right .menu > a:hover, .right .menu:hover > a {box-shadow: 0 0 10px rgba(0, 0, 0, 0.6) inset}
Indicano l'effetto incassato che si visualizza passando con il mouse sopra le voci del menu.
.menu > a:hover, .menu:hover > a {box-shadow: 9px 0 10px 0 rgba(0, 0, 0, 0.6) inset} consente di personalizzare l'hover del menu a sinistra, mentre .right .menu > a:hover, .right .menu:hover > a {box-shadow: 0 0 10px rgba(0, 0, 0, 0.6) inset} del menu a destra./* icone */
.menuwrap .nick {background: url('http://gianlucabenucci.com/Skin/makelove/m1.png') no-repeat center}
.left > .menu:nth-child(2) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m2.png') no-repeat center}
.left > .menu:nth-child(3) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m3.png') no-repeat center}
.left > .menu:nth-child(4) > a {background: url('http://gianlucabenucci.com/Skin/makelove/m4.png') no-repeat center}
.left > .menu:nth-child(5) > a {background: url('https://dumpshare.net/images/751wrench.png') no-repeat center}
Modificando gli URL è possibile personalizzare le icone che compaiono nelle voci del menu a sinistra. Sono inserite nell'ordine in cui vengono visualizzate: PROFILO, MESSENGER, DISCUSSIONI, AMMINISTRAZIONE, MODERAZIONE/* nuovo messaggio, nuova discussione */
.menuwrap .left em {position: absolute; right: -13px; background: url('https://dumpshare.net/images/995em.png') no-repeat center transparent; font-size: 0; height: 16px; width: 16px}
Consente di personalizzare l'avviso di Nuovo Messaggio o Nuova Discussione (se presente nelle Iscrizioni). Per cambiare immagine, è sufficiente modificare l'URL ed aggiornare width e height con le dimensioni della nuova immagine. Per posizionare orizzontalmente l'elemento, modificare right: -13px. Per posizionare verticalmente l'elemento, inserire margin-top: Npx/* MENU CONTENSTUALE (dropdown) */
/* tendina */
.left .menu ul, .right .menu ul {border: 1px solid #413428; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); margin-left: 5px; left: 100%; top: 0; background: url("http://gianlucabenucci.com/ffm/guide/menul/menul.png") repeat-x center top #544334; border-radius: 6px}
Indica lo stile della tendina che compare passando sulle voci del menu. Anche qui, per modificare lo sfondo, è sufficiente agire su background..menu li strong {color: #FFF !important}
Personalizza il colore delle scritte (non dei link!) nel menu a tendina. Ad esempio: QUESTO SITO, DISCUSSIONI SELEZIONATE, SEZIONE, ...
Non rimuovere !important..menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
.menu li a:hover, .menu li:hover > a, .menuwrap input, .menuwrap input:focus {background-color: #413428 !important; border-radius: 5px; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), 0 -11px 3px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4) inset !important; color: #FFFFFF !important}
Consente di personalizzare le voci del menu a tendina (.menu li a), e l'effetto hover sulle stesse (.menu li a:hover, .menu li:hover > a, .menuwrap input, .menuwrap input:focus).
L'hover che verrà impostato determinerà anche lo stile degli input del form di LOGIN e del form CERCA (quest'ultimo presente nel menu in alto a destra)./* MENU IN ALTO A DESTRA */
.menuwrap .right {background: url("http://gianlucabenucci.com/ffm/guide/menul/menul.png") repeat-x center top #544334; border-left: 1px solid; border-radius: 5px; margin: 5px 10px; box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.5), -4px 0 3px -3px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)}
.menu.icon {border-left: 1px solid rgba(255, 255, 255, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.2)}
Come specificato, le classi sopracitate consentono di personalizzare lo stile del menu in alto a destra.
Per modificare lo sfondo del riquadro marrone, modificare l'URL di background.
Per modificare le linee di separazione tra le icone, cambiare il colore rgba di .menu.icon/* LOGIN */
/* parte sinistra */
...
.left .icon, .left .login {background: url('https://dumpshare.net/images/498left_login.jpg'); padding-right: 115px; margin-top: -1px; border: 1px solid #413428}
Consente di personalizzare lo sfondo del form di LOGIN (visibile solo se disconnessi dal circuito). Anche qui, modificare l'URL per modificare il background.
ATTENZIONE: per una corretta visualizzazione, lo sfondo non deve superare i 115px di larghezza.
Informazioni
UPDATE 19/12/2012: Estesa compatibilità anche al vecchio layoutPer il momento, il codice è compatibile solamente con il Nuovo Layout.
Nel Vecchio Layout, pur essendo presente lo stesso menu, alcune classi sono state modificate in ID, ed alcune scritture risultano filtrate.
Confido di estendere la compatibilità al Vecchio Layout il prima possibile.
Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):HTML<a href="http://ffmagazine.forumfree.it/?t=60624810">Menu utente laterale</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=5649561">Nens</a> e <a href="?act=Profile&MID=1879969">El Gringo 89</a>
E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:HTML<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Inserire il menu utente in verticale" href="http://ffmagazine.forumfree.it/?t=60624810"><b>Inserire il menu utente in verticale</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=5649561">Nens</a> e <a href="?act=Profile&MID=1879969">El Gringo 89</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>Inserire il menu utente in verticale
Realizzata da Nens e El Gringo 89 del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
Edited by bored - 14/1/2013, 18:22
. -
.
Un bug, quando si va in una discussione/sezione, appare il pannello moderazione, si, ma senza un icona. . -
Nens.
User deleted
Più che bug è una "dimenticanza"; devi semplicemente aggiungere un'icona per quel campo CITAZIONE.menuwrap .left > .menu:nth-child(6) > a {display: block; background: transparent url('ICONA_6') no-repeat center}
. -
.
LOL, Comunque non dovresti aggiungere questo? CODICE.menuwrap .left > .menu:nth-child(5) > a {display: block; background: transparent url('urlimmagine') no-repeat center}
E comunque, non riusciresti a fare qualcosa di carino per la registrazione veloce? Comunque, quando lo inserisco, rimane la barra del nuovo layout sopra, senza nessuna scritta ecceto le cose a destra (news, ecc...) come mai?. -
.
Penso sia normale, si possono togliere ma forse andrebbe contro il regolamento del circuito. . -
.
Nell'esempio linkato, non ci sono. . -
Nens.
User deleted
LOL, Comunque non dovresti aggiungere questo?CODICE.menuwrap .left > .menu:nth-child(5) > a {display: block; background: transparent url('urlimmagine') no-repeat center}
Quello già c'è nella guida, me l'ero dimenticato nel codice già completo °>°E comunque, non riusciresti a fare qualcosa di carino per la registrazione veloce?
Si, in questi giorni sistemo
Sono a sinistra :E. -
.
Bello mi piace molto! ^^ . -
.
Allora dovresti trovare un modo per integrarli nel menu xd è brutto cosi . -
TheOkuKid.
User deleted
scusate ma come metto l'avviso di aver ricevuto un mess. xk a me inviano i mess. ma nn me lo dice xD . -
.
Salve,scusate la mia..ignoranza .. volevo chiedere come fare se questo menù lo voglio sul lato dx del forum.
Grazie. -
.
Ecco a te il codice adattato al lato destro del forum: /* MENU principale */
.menuwrap .left em {background: url("http://gianlucabenucci.com/ffm/guide/menul/em.png") no-repeat scroll center top transparent; border-radius: 100px 100px 100px 100px; bottom: 0; color: transparent; font-size: 0; height: 7px; position: absolute; right: 0; width: 7px}
.menuwrap .left {position: absolute; top: 80px; right: 0; background:url("https://dumpshare.net/images/573menu.jpg") repeat-y scroll center bottom #75604D; width: 39px; border-radius: 8px 0 0 8px; box-shadow: 4px 0 3px -3px rgba(0, 0, 0, 0.5)}
.menuwrap .left li {display: block}
.menuwrap {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; position: relative}
.menuwrap .nick {font-size: 0; color: transparent; display: block; background: transparent url('http://gianlucabenucci.com/Skin/makelove/m1.png') no-repeat center; border-radius: 0 6px 0 0}
.menuwrap .left > .menu:nth-child(2) > a {display: block; background: transparent url('http://gianlucabenucci.com/Skin/makelove/m2.png') no-repeat center}
.menuwrap .left > .menu:nth-child(3) > a {display: block; background: transparent url('http://gianlucabenucci.com/Skin/makelove/m3.png') no-repeat center}
.menuwrap .left em {display: none}
.menuwrap .left > .menu:nth-child(4) > a {display: block; background: transparent url('http://gianlucabenucci.com/Skin/makelove/m4.png') no-repeat center}
.menuwrap .left > li > a:hover {box-shadow: 9px 0 10px 0 rgba(0, 0, 0, 0.6) inset}
.menuwrap .left > li:first-child > a:hover {border-radius: 0 8px 0 0}
.menuwrap .left > li:last-child > a:hover {border-radius: 0 0 8px 0}
.menuwrap .menu ul, .menu li {border: 0}
.menu li:first-child {border-top: 0; padding-top: 6px}
.menuwrap .left > li > a {font-size: 0; color: transparent; border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.1)}
.menuwrap .left > li:last-child > a {border-bottom: 0}
.menuwrap .left > li:first-child > a {border-top: 0}
.menuwrap a {margin: 0; padding: 0 11px; font-size: 11px; color: #AAA; display: block}
.menuwrap a:hover {color: #FFF; border: 0}
.menuwrap .icon a {padding: 0 6px}
.menuwrap .avatar {display: none}
/* MENU contestuale(dropdown) */
.menu ul {width: 15em; background: #525252; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); right: 100%; top: 0; background: url("http://gianlucabenucci.com/ffm/guide/menul/menul.png") repeat-x scroll center top #544334; border-radius: 6px 0 6px 6px}
.submenu ul {left: -99%}
.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; position: relative}
.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 {background: none repeat scroll 0 0 #413428;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), 0 -11px 3px rgba(0, 0, 0, 0.2) inset, 0 2px 2px rgba(0, 0, 0, 0.4) inset;
color: #FFFFFF !important}
.menuwrap > ul:last-child li:hover > ul {display: none !important} {display: none !important}
.menuwrap {min-height: 18px}. -
.
Ti ringrazio tantissimo e mi complimento per la tua tempestività nel rispondere (altamente professionale)
Provato e funge, se posso dovrei rompere un po' .. vorrei accoppiare i colori del menu' da tè proposto con quelli del mio forum(ti mando l'indirizzo in MP non sò se scritto in post potrebbe essere considerato spam).
Saresti così gentile da modificarlo o dirmi da quale parte del codice li cambio?
Ancora una volta un grazie affettuoso e sincero.
O.T. La skin del tuo forum è molto originale complimenti. -
.
Di nulla, felice di esserti stato d'aiuto. In più ti informo che questo non è affatto il mio forum, qui ricopro il ruolo di redattore, grazie tante comunque dei complimenti
Passando al menù, potresti farmi il piacere di indicarmi il codice del colore che desideri ? tabella colori html. -
.
da #001D57 a #000080 in modo che i colori siano vicini a quelli del forum.
Scusa, come mai in questo modo non vedo piu' la notifica di nuovi messaggi o discussioni?
OK per il forum non tuo ma resta il fatto che sei una persona in gamba.
Ancora grazie
.
Menu utente laterale |
