Inserire il menu utente sotto al logo nel vecchio layout
Guida per lo spostamento del menu sotto al logo, con le dimensioni del container
[ANTEPRIMA]
A seguito della
sostituzione del menu del vecchio layout con il menu del nuovo layout, si è palesata la necessità di riportare il menu nella sua originaria posizione (caratteristicamente sotto il logo, e non in cima alla pagina).
Vediamo come fare.
InstallazioneInserire, sempre in
Colori e Stili, questo codice:
CODICE
body > div:first-child {top: 95px; width: 80%; margin: -32px auto 0; overflow: visible}
.header_width {margin-bottom: 40px}
Modificare
width: 80% con le dimensioni del forum.
Modificare
top: 95px con l'altezza desiderata dal bordo superiore della pagina.
Il valore di
margin-bottom indica lo spazio sotto al logo (e, di conseguenza, sotto al menu)
Inserire il menu utente fisso in cima alla pagina
Guida per rendere fisso il menu allo scorrimento della pagina
[ANTEPRIMA]
InstallazioneNiente di più facile! Lo Staff ha inserito una nuova funzione che permette di decidere di rendere fisso o meno il menu.
Basta andare in
Grafica --> Logo e menu e spuntare la casella
Blocca il menu principale rispetto la finestra del browser.
Inserire il vecchio menu utente
Guida per l'inserimento del vecchio menu utente
[ANTEPRIMA]
Codice creato da bored e El Gringo 89 InstallazioneInserire, in
Colori e Stili, questo codice:
CODICE
/* MENU UTENTE SUL VECCHIO LAYOUT - http://ffmagazine.forumfree.it/?t=63686319 */
/* posiziona il menu sotto al logo */
body > div:first-child {width: 80%; margin: -32px auto 0; top: 95px; overflow: visible}
.header_width {margin-bottom: 40px}
/* stile della barra, NON rimuovere height */
.menuwrap {height: 32px; background: none !important; box-shadow: none !important}
/* NON MODIFICARE */
.menuwrap .avatar {display: none}
.menuwrap ul:first-child ul {position: static !important; border: 0; background: none; box-shadow: none; width: auto}
.menuwrap ul:first-child li {line-height: normal}
#left .menu li:first-child {border: 0 !important}
.menuwrap .menu > a {padding: 0 2px !important}
.menuwrap ul:first-child > .menu:first-child {margin-top: 3px; float: left}
.menuwrap ul:first-child > .menu:nth-child(2), .menuwrap ul:first-child > .menu:nth-child(3) {margin-top: 6px}
/* stile delle voci del menu, NON rimuovere !important */
.menuwrap a, .menuwrap b, .menuwrap #left .menu li a {text-shadow: none; font-weight: normal !important; font-size: 11px !important; color: #000 !important}
/* hover delle voci del menu */
.menuwrap #left .menu:hover > a, .menuwrap #left .menu > a:hover {color: #000; background: none}
#left .menu li a:hover, #left .menu li:hover > a {background: none; text-shadow: none; border-radius: 0}
/* rende visibile solo la prima tendina */
.menuwrap ul:first-child > .menu:first-child > * {display: inline-block !important; height: 13px}
.menuwrap ul:first-child > .menu > ul {display: none !important}
/* allinea le voci della tendina */
.menuwrap ul:first-child .menu li {display: inline-block !important; float: right; border: 0; padding: 0}
/* 1°tendina: rende visibile solo la prima, la quarta e l'ultima voce */
.menuwrap ul:first-child .menu li:nth-child(2), .menuwrap ul:first-child .menu li:nth-child(3), .menuwrap ul:first-child .menu li:nth-child(5), .menuwrap ul:first-child .menu li:nth-child(6), .menuwrap ul:first-child .menu li:nth-child(7) {display: none !important}
#nick {font-weight: bold}
#nick:before {content: "Benvenuto "; font-weight: normal; color: #507318}
#left .menu:first-child li:nth-child(4) > a:before {content: '|'; font-size: 11px; color: #507318; padding-right: 3px; margin-left: -13px} /* before ALBUM */
#left .menu:first-child li:first-child > a:before {content: '|'; font-size: 11px; color: #507318; padding-right: 3px; margin-left: -13px} /* before OPZIONI */
#left .menu:first-child > ul li:last-child > a:before {content: "("; margin-left: -10px; padding-right: 3px; color: #507318} /* before ESCI */
.menuwrap ul:first-child .menu:nth-child(2) > a:before {content: '| '; margin-left: -7px; color: #507318} /* before MESSENGER */
#left .menu:nth-child(3) > a:before {content: '| '; color: #507318} /* before DISCUSSIONI */
#left .menu:nth-child(3) > a:after {content: ')'; color: #507318; padding-left: 3px} /* after DISCUSSIONI */
/* nasconde la voce AMMINISTRAZIONE */
.menuwrap ul:first-child > li:nth-child(4) {display: none}
/* OPZIONI */
#left .menu:first-child li:first-child > a:after {content: 'Opzioni'; font-size: 11px}
#left .menu:first-child li:first-child > a {font-size: 0 !important}
/* ALBUM */
#left .menu:first-child li:nth-child(4) > a:after {content: 'Album'; font-size: 11px}
#left .menu:first-child li:nth-child(4) > a {font-size: 0 !important}
/* ICONE a destra */
#right .search {margin-top: 4px}
#right > li:first-child {margin-right: 5px}
.menuwrap ul:last-child > li ul {margin-left: -100px !important}
/* FORM DI LOGIN */
.menuwrap .login form {line-height: 2.6em !important}
/* input */
.menuwrap input {background-color: #F4F4F4 !important; color: #AAA !important; border: 1px solid #CCC !important; text-shadow: none !important; border-radius: 4px; box-shadow: none !important}
.menuwrap input:hover {background-color: #F4F4F4 !important; color: #AAA !important}
.menuwrap input:focus {background-color: #DDD !important; color: #444 !important; box-shadow: none}
.menuwrap .search input:focus {background-position: 96.5% 121%}
/* voce LOGIN */
.menuwrap input[type="submit"] {background-color: #525252 !important; border: 0 !important; font-weight: bold; color: #FFF !important; font-family: verdana; padding: 0; font-size: 12px; border-radius: 6px}
Nel codice sono presenti dei commenti per facilitare la modifica degli stili.
Per cambiare colore alle voci del menu, agire sull'esadecimale di
.menuwrap a, .menuwrap b, .menuwrap #left .menu li a,
facendo attenzione a NON rimuovere !important.
Per modificare il colore di "Benvenuto, (, | e ), agire sull'esadecimale
#507318 in tutti i campi a partire da
#nick:before.
Per rimuovere il grassetto dal nickname, sarà sufficiente cancellare
#nick {font-weight: bold} Informazioni29/10/2012: Inserite voci OPZIONI e ESCI. Anteposta la barra di ricerca rispetto alle icone.In progetto:- Inserimento voce ALBUM 30/10/2012: Inserita- Miglioramento del form di login 30/10/2012: MiglioratoCreditsIl 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=63686319">Vecchio menu utente sul vecchio layout</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</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:
CODICE
<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="[Vecchio Layout] Modificare il nuovo menu come il vecchio menu sotto il logo" href="http://ffmagazine.forumfree.it/?t=63686319"><b>[Vecchio Layout] Modificare il nuovo menu come il vecchio menu sotto il logo</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=6199181">bored</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>
