-
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
. -
Orizon`+1 .
User deleted
Ottimo tutorial, grazie Valls! =) . -
Valls ~ .
User deleted
Di nulla, contenta che sia utile ^^ . -
+1 .
grazie valls! mi serviva proprio questo tutorial =) . -
Valls ~+1 .
User deleted
Mi fa molto piacere, prego ^^ . -
.
Finalmenteeeeeeeee grazie grazie grazieee*_* . -
.Shiba .
User deleted
a me non funziona :O . -
.
Linka il forum e magari specifica il problema XD . -
.Shiba .
User deleted
click ho provato sia con una che con due sezioni, come detto ho modificato le parti #cID con l'ID della sezione ( #c1002960 ) ma non cambia nulla . -
Valls ~ .
User deleted
Il problema è che nel tuo caso l'ID del blocco non corrisponde a quello della prima sezione (non ricordo casi in cui mi sia capitato, ma vedrò di lavorarci su).
Puoi trovare l'ID con Tasto Destro > Analizza Elemento.
In questo caso è: #c152344. -
.Shiba+1 .
User deleted
Grazie mille (: . -
.
Ciao ho una domanda, questo codice serve nel caso tu abbia un forum in questione e tu voglia farlo apparire cosi, ma nel caso si volesse creare una skin da zero, come si può applicare il codice a ogni sezione della skin? si dovrebbe usare sempre questo codice pero modificando qualcosa giusto?
okay ci sono riuscita xD però come posso mettere su tutta una riga le ultime risposte e l'orario?
questa è la skin: http://violetblossom.skin.forumfree.it/
e riscontro alcuni problemi con la tabella però o.O non è normale vero?
Edited by phoebe’ - 2/10/2013, 16:25. -
Valls ~ .
User deleted
Conta che nel tuo forum .zz ha uno spazio molto ridotto, ma in generale il codice è questo ^^ CODICE.zz * {display:inline} .who {padding: 3px} .when {padding-right: 3px}
Nella tabella il problema sono quelle aree con le righe?. -
.
Si quelle righe avrebbero dovuto essere nell' mback quindi non capisco come possano risultare in tabella, anzi avrebbero dovuto essere il contorno superiore delle sezioni -.- . -
.Si quelle righe avrebbero dovuto essere nell' mback quindi non capisco come possano risultare in tabella, anzi avrebbero dovuto essere il contorno superiore delle sezioni -.-
Scusa il ritardo (magari la prossima volta apri un topic in support che si nota di più (
il problema è risolto? (:
.
Sezioni orizzontali in un Blocco[ Skinning ] Disporre orizzontalmente le sezioni del forum. |
Web
Contacts
