-
Valls ~+5
.User deleted
SEZIONI ORIZZONTALI IN UN BLOCCO
Come posizionare orizzontalmente le sezioni del forum.
ESEMPIO.
Una pratica che ultimamente sta prendendo piede è quella delle sezioni orizzontali. Di seguito, il procedimento per averle sul proprio forum!
Creiamo un nuovo blocco di sezioni e aggiungiamo tante sezioni quante vogliamo siano le nostre sezioni orizzontali. Per semplicità, io ne ho usate due, ma il procedimento è quasi lo stesso anche con un numero diverso (come vedremo, basterà cambiare la percentuale di width).
Aggiungiamo il seguente codice in Amministrazione > Grafica > Colori e Stili.CODICE#cID .mback, #cID .title, #cID .big_list .subs, #cID .big_list .mods, #cID .aa, #cID .yy {display: none}
#cID {background: transparent; border: 0}
#cID .big_list li * {width: 100%}
#cID .bb .desc {width: 98%}
#cID .big_list li {display: inline-block; width: 50%}
#cID .big_list .zz * {display: inline}
#cID .where, #cID .who, #cID .when {padding: 4px}
Al posto di ID inserire l'ID del blocco sezioni scelto. Potete trovarlo nella barra degli indirizzi dopo essere entrati nella prima sezione del blocco:
Esempio: "https://skinfactory.forumfree.it/?f=9649093" 9649093 è l'ID.
NOTA: Se si tratta del PRIMO BLOCCO è necessario usare ID del forum, ovvero la cifra che trovate quando accedete in amministrazione. Maggiori Info qui.
PERSONALIZZARE IL CODICE:
♦ La seguente stringa va modificata nel caso si volesse aggiungere un margin o un padding alle sezioni o se si volessero allineare più di due sezioni. In tal caso, il valore dev'essere inferiore al 50%.CODICE#cID .big_list li {display: inline-block; width: 50%}
♦ Io ho scelto di nascondere (in ordine) mback, title, le sottosezioni, i moderatori, gli on e off e il numero di discussioni e risposte, per una questione di ordine. Se volete renderli nuovamente visibili, potete modificare le seguente parte di codice e regolare questi elementi a vostro piacimento.CODICE#cID .mback, #c1002243 .title, #cID .big_list .subs, #cID .big_list .mods, #cID .aa, #cID .yy {display: none}
UPDATE 1
♦ Se rendiamo nuovamente visibile .aa ci rendiamo conto che esso appare eccessivamente ingombrante e deformato. Per renderlo piacevole, possiamo spostarlo accanto a .web con il seguente codice:CODICE#cID .aa {width: NUMEROpx !important; float: left; margin-bottom: -NUMEROpx}
#cID .web {margin-left: NUMEROpx}
Per quanto riguarda width: NUMEROpx, sostituiamo NUMERO con la larghezza di .aa.
Ora, per posizionare .aa accanto a .web possiamo usare la proprietà margin. Se vogliamo che .aa stia a sinistra di .web, come nel codice sopra, allora, per quanto riguarda margin-bottom: -NUMEROpx, dobbiamo sostituire NUMERO con la cifra in pixel che ci serve per portare sulla stessa linea .aa e .web (attenti a non cancellare il - davanti al numero!). Con margin-left: NUMEROpx invece spostiamo leggermente a destra il nostro .web in modo tale che non si sovrapponga a .aa: sostituire NUMERO con la cifra in pixel di quanto si vuole aumentare il margine sinistro di .web (e quindi spostare la scritta verso destra).
Questo procedimento si ripete uguale nel caso in cui .web e .aa siano posizionati entrambi a sinistra (caso sopra) o entrambi a destra. Se uno dei due si trova a destra e l'altro a sinistra, non sarà necessario usare margin-left o margin-right per evitare che i due elementi si sovrappongano, ma dovremo regolare tutto con un padding-left o un padding-right, in modo tale che, se la scritta diventa troppo lunga, vada a capo senza sovrapporsi.CODICE#cID .aa {width: NUMEROpx !important; float: right; margin-bottom: -NUMEROpx}
#cID .web {padding-right: NUMEROpx}Tutorial realizzato da Valls ~ solo per Skin Factory.
Non postate altrove il tutorial senza permesso e non spacciatelo per vostro, grazie.
Edited by -spiker - 10/8/2014, 16:58
.
Sezioni orizzontali in un Blocco[ Skinning ] Disporre orizzontalmente le sezioni del forum. |
