-
.
Menů utente alternativo
Installazione
Codice completo:SPOILER (clicca per visualizzare)CODICE/* MENU principale */
body >:first-child {position: absolute !important}
body#topic >:nth-child(2), body#blog >:nth-child(2) {position: absolute !important}
.menuwrap {font-family: verdana, tahoma, arial, sans-serif}
.menuwrap .left {padding: 30px; position: absolute}
.menuwrap .avatar {width: 70px; height: 66px; border: 1px solid #999; background-color: #FFF; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); margin: 5px}
.menuwrap .avatar:hover {border: 1px solid #666}
.menuwrap .left li.menu a {color: rgba(0, 0, 0, .0)}
.menuwrap li {line-height: 2.6em; color: #666}
.menuwrap .left li.menu:first-child {position: relative; top: -5px}
.menuwrap .left li.menu:nth-child(2) {background: url('http://digilander.libero.it/dconan/skin2/msg_hover.gif') center left no-repeat; height: 24px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(2):hover {opacity: 1}
.menuwrap .left li.menu:nth-child(3) {background: url('http://digilander.libero.it/dconan/skin2/disc_hover.gif') center left no-repeat; height: 24px; margin-right: 7px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(3):hover {opacity: 1}
.menuwrap .left li.menu:nth-child(4) {background: url('http://digilander.libero.it/dconan/skin2/amn_hover.gif') center left no-repeat; height: 24px; margin-right: 7px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(4):hover {opacity: 1}
.menuwrap .left li.menu:nth-child(5) {background: url('http://digilander.libero.it/dconan/skin2/mod_hover.gif') center left no-repeat; height: 24px; margin-right: 7px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(5):hover {opacity: 1}
.menuwrap a {margin: 0; padding: 0 13px; font-size: 1px}
.menuwrap .right a {margin: 0; padding: 0 11px 5px; font-size: 12px; color: #999; font-weight: bold}
.menuwrap a:hover {color: #FFF; border: 0}
.menuwrap .right a:hover {color: #666; border: 0; font-weight: bold}
.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: 40px; left: 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: #333}
/* numero msg e link REGISTRATI */
.menuwrap em {padding: 0 0 0 7px; color: #999; text-shadow: none; font-size: 15px; left: 1px; position: relative; top: 3px; line-height: 1em}
.menuwrap .nick {min-width: 1em; margin-left: 17px; position: absolute; font-size: 15px; color: #999; font-weight: bold; white-space: nowrap}
.menuwrap .nick:hover, .menuwrap em:hover {color: #666}
.menuwrap form {padding: 0 11px 0 5px}
/* MENU contestuale(dropdown) */
.menu:hover > a {background: url('http://digilander.libero.it/dconan/skin2/menu_after.png') no-repeat bottom; height 50px}
.menu ul {width: 15em; background: linear-gradient(#FFF,#DDD); box-shadow: 0 1px 5px rgba(0, 0, 0, .8); border-radius: 5px; border-top: 3px solid #0066CC}
.right .menu ul {margin-left: -2em}
.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none}
.menu li strong {padding: 3px 8px; color: #000}
.menu li a {padding: 3px 8px !important; font-size: 12px; color: #333 !important}
.menu li a:hover, .menu li:hover > a {background: #CCC; 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 .login {box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px;
background: linear-gradient(#FFF,#DDD); position: fixed; top: 0; left: 0; padding: 5px; border-radius: 0 0 10px 0}
.menuwrap .login em {padding: 2px 5px; color: white; text-shadow: none; background: #525252; border-radius: 6px; line-height: 0}
.menuwrap .login em:hover {color: #FFF; background: #555}
.menuwrap .login a: {color: #000}
.menuwrap .login a:hover {color: #003366}
.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: #666; border-radius: 4px; border: 0}
.menuwrap input:hover {cursor: pointer; background: #BBB; box-shadow: none}
.menuwrap input:focus {cursor: default; background-color: #888; outline: none; box-shadow: none}
.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: 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: #999 url('http://img.forumfree.net/style_images/52/icon_search.png') no-repeat 96% -12%; border: none!important; box-shadow: none}
.menuwrap .search input:hover {color: #E0E0E0; background-color: #666; box-shadow: none}
.menuwrap .search input:focus {color: #FFF; background-color: #666; background-position: 96.5% 110%; box-shadow: none}
Analizziamo il codice:
Menu Absolute che non scorre con la pagina:SPOILER (clicca per visualizzare)CODICEbody >:first-child {position: absolute !important}
body#topic >:nth-child(2), body#blog >:nth-child(2) {position: absolute !important}
Questi due selettori fanno si che il menu non rimanga fisso in alto con lo scrolling (salire/scendere) della pagina.
Avatar con ombra:SPOILER (clicca per visualizzare)CODICE.menuwrap .avatar {width: 70px; height: 66px; border: 1px solid #999; background-color: #FFF; box-shadow: 0 1px 5px rgba(0, 0, 0, .5); margin: 5px}
Questo invece č il selettore che modifica l'avatar in modo da poter aumentare e diminuire la grandezza, i bordi e l'ombra.
Nick posizionato sopra le immagini:SPOILER (clicca per visualizzare)CODICE.menuwrap .nick {min-width: 1em; margin-left: 17px; position: absolute; font-size: 15px; color: #999; font-weight: bold; white-space: nowrap}
Questo codice fa si che il nick si posizioni in alto sopra le immagini, e a destra dell'avatar, la proprietŕ white-space: nowrap fa in modo che se un nick dovesse contenere degli spazi (es: K l o) le lettere restino tutte sulla stessa riga senza sovrapporsi alle icone del menu.
Icone al posto delle scritte: messaggi, discussioni, amministrazione, moderazione.SPOILER (clicca per visualizzare)CODICEmenuwrap .left li.menu:first-child {position: relative; top: -5px}
.menuwrap .left li.menu:nth-child(2) {background: url('http://digilander.libero.it/dconan/skin2/msg_hover.gif') center left no-repeat; height: 24px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(2):hover {opacity: 1}
.menuwrap .left li.menu:nth-child(3) {background: url('http://digilander.libero.it/dconan/skin2/disc_hover.gif') center left no-repeat; height: 24px; margin-right: 7px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(3):hover {opacity: 1}
.menuwrap .left li.menu:nth-child(4) {background: url('http://digilander.libero.it/dconan/skin2/amn_hover.gif') center left no-repeat; height: 24px; margin-right: 7px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(4):hover {opacity: 1}
.menuwrap .left li.menu:nth-child(5) {background: url('http://digilander.libero.it/dconan/skin2/mod_hover.gif') center left no-repeat; height: 24px; margin-right: 7px; line-height: 2.6em; opacity: .7}
.menuwrap .left li.menu:nth-child(5):hover {opacity: 1}
Questa č la parte piu caratteristica ovvero le icone al posto del solito testo, sfruttando la proprietŕ degli pseudo-elementi č possibile attribuire a ogni pulsante un icona differente.
Ultima parte relativa al login:SPOILER (clicca per visualizzare)CODICE/* LOGIN VELOCE */
.menuwrap .login {box-shadow: rgba(0, 0, 0, 0.8) 0 1px 5px;
background: linear-gradient(#FFF,#DDD); position: fixed; top: 0; left: 0; padding: 5px; border-radius: 0 0 10px 0}
.menuwrap .login em {padding: 2px 5px; color: white; text-shadow: none; background: #525252; border-radius: 6px; line-height: 0}
.menuwrap .login em:hover {color: #FFF; background: #555}
.menuwrap .login a: {color: #000}
.menuwrap .login a:hover {color: #003366}
.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: #666; border-radius: 4px; border: 0}
.menuwrap input:hover {cursor: pointer; background: #BBB; box-shadow: none}
.menuwrap input:focus {cursor: default; background-color: #888; outline: none; box-shadow: none}
.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: 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}
Questa parte č necessaria, senza di questa gli utenti non registrati al forum si ritroverebbero un effetto sgradevole, implementando queste classi si da un effetto carino anche per i visitatori.
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="LINK_GUIDA">Menů utente alternativo</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=3875485">Klo</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="Menů utente alternativo" href="http://ffmagazine.forumfree.it/?t=62296576"><b>Menů utente alternativo</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=3875485">Klo</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>Menů utente alternativo
Realizzata da Klo del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.
Edited by bored - 10/1/2013, 16:54
. -
.
Carino :3 . -
BabyBowser!.
User deleted
Bello! 
. -
.
Carino 
. -
.
Carino =) . -
.
Bello mi piace. 
. -
JimmyJoker.
User deleted
Io non riesco a inserirlo, ho il vecchio layout ma mettendo il codice non si vede 
. -
Cerbero™.
User deleted
Devi usare il nuovo 
. -
.
Ciao lo sto montando su una skin ma vorrei metterlo in verticale con i menu che si aprono sulla destra,come posso fare? . -
.
be non č stato pensato in quel modo, andrebbe completamente rivisto da capo . -
.
ok posso chiederti come tolgo il movimento dell'avatar quando ci passo sopra col mouse?lo trovo fastidioso...
. -
.
Perdonami, l'avatar non mi risulta muoversi al passaggio del mouse 
. -
.
In effetti non si muove nel forum di prova ma da me quando passo si abbassa di 10px 
. -
.
Deve essere un errore nella tua skin, allora
. -
Kiname.
User deleted
Bellu bellu
.
Menů utente alternativo |
