Disposizione orizzontale di ultime risposte e n° discussioni

_Lati_

Posted on 24/7/2012, 12:08

+22

.

Advanced Member

Group: M. Onorario

Posts: 3,204

Activity Level: 0

Location: Milano

Status: Offline

Disposizione delle Ultime Discussioni/Messaggi in orizzontale
Guida per disporre in orizzontale le ultime discussioni ed il numero di messaggi in orizzontale
26949sezioni

Installazione

L'installazione del codice è molto semplice, basterà inserire in Colori e stili in un punto a vostra scelta:

CODICE

/* ULTIME RISPOSTE E NUMERO MESSAGGI/DISCUSSIONI DISPOSTI IN ORIZZONTALE - http://ffmagazine.forumfree.it/?t=62470873 */
.board .link .yy, .board .link .zz, .board .top .zz, .board .where > span, .board .who > span {display: none} .board .top .yy {text-align: left}
.board .big_list > li {position: relative; padding: 10px 0}
.board .big_list .yy, .board .big_list .zz {width: 350px !important}
.board .yy > div, .board .zz > div {display: inline-block; margin-bottom: 15px; font-family: 'Tahoma', Sans-serif; font-size: 12px; color: #849998}
.board .big_list .yy {position: absolute; margin-left: 10px; top: 55%; padding: 2px; background: #E5EEF2; border: 1px solid #BFD5E0; border-radius: 3px; box-shadow: inset 0 1px 0 #F8FBFC, 0 1px 0 #FBFCFD; text-align: center}
.board .yy > div {margin: 0 30px; color: #92AAB7; text-shadow: 0 1px 0 #FFF}
.board .zz {position: relative} .board .zz a {font-weight: bold; color: #30698D} .board .when {font-weight: bold}
.board .where, .board .who a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.board .where {position: absolute; left: 10px; top: -30%; max-width: 350px}
.board .who a {display: inline-block; line-height: 20px; margin-bottom: -5px; max-width: 150px}
.board .when:before {content: "Scritto il "; font-weight: normal} .board .who:before {content: "da "; padding-left: 5px}

ATTENZIONE: Se nel forum è attivato lo script "Avatar accanto all'ultimo messaggio", il codice CSS da inserire è:

SPOILER (clicca per visualizzare)

CODICE

/* ULTIME RISPOSTE E NUMERO MESSAGGI/DISCUSSIONI DISPOSTI IN ORIZZONTALE CON AVATAR - http://ffmagazine.forumfree.it/?t=62470873 */
.board .link .yy, .board .link .zz, .board .top .zz, .board .where > span, .board .who > span {display: none} .board .top .yy {text-align: left} .board .zz {vertical-align: middle; margin-top: -35px} .board .lastpost-avatar {vertical-align: bottom !important} .board .lastpost-avatar-right {width: auto !important; margin-left: 7px !important}
.board .big_list > li {position: relative; padding: 10px 0}
.board .big_list .yy, .board .big_list .zz {width: 350px !important}
.board .yy > div, .board .lastpost-avatar-right > div {display: inline-block; margin-bottom: 15px; font-family: 'Tahoma', Sans-serif; font-size: 12px; color: #849998} .board .lastpost-avatar-right > div {margin: 0}
.board .big_list .yy {position: absolute; margin-left: 8px; top: 55%; padding: 2px; background: #E5EEF2; border: 1px solid #BFD5E0; border-radius: 3px; box-shadow: inset 0 1px 0 #F8FBFC, 0 1px 0 #FBFCFD; text-align: center}
.board .yy > div {margin: 0 30px; color: #92AAB7; text-shadow: 0 1px 0 #FFF}
.board .zz, .board .lastpost-avatar-right {position: relative} .board .zz a {font-weight: bold; color: #30698D} .board .when {font-weight: bold}
.board .where, .board .who a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.board .where {position: absolute; left: 0; top: -80%; max-width: 320px}
.board .who a {display: inline-block; line-height: 20px; margin-bottom: -5px; max-width: 130px}
.board .when:before {content: "Scritto il "; font-weight: normal} .board .who:before {content: "da "; padding-left: 5px}
.board .zz > .when {margin-top:7%}
.board .zz > .where {top:30%;left:auto;}
.board .zz > .who {display:none;}

Di seguito, la lista delle modifiche possibili.

.board .big_list .yy, .board .big_list .zz {width: 350px !important}

Consente di impostare la larghezza del riquadro delle ultime discussioni

.board .yy > div, .board .zz > div {display: inline-block; margin-bottom: 15px; font-family: 'Tahoma', Sans-serif; font-size: 12px; color: #849998}

Consente di personalizzare lo stile del testo. NON toccare display: inline-block; margin-bottom: 15px.

.board .big_list .yy {position: absolute; margin-left: 10px; top: 55%; padding: 2px; background: #E5EEF2; border: 1px solid #BFD5E0; border-radius: 3px; box-shadow: inset 0 1px 0 #F8FBFC, 0 1px 0 #FBFCFD; text-align: center}

Consente di personalizzare lo stile del riquadro del numero discussioni/messaggi. NON toccare position: absolute; margin-left: 10px; top: 55%

.board .yy > div {margin: 0 30px; color: #92AAB7; text-shadow: 0 1px 0 #FFF}

Consente di personalizzare lo stile del testo del numero discussioni/messaggi.

.board .zz a {font-weight: bold; color: #30698D}

Consente di personalizzare lo stile dei link.

.board .where {position: absolute; left: 10px; top: -30%; max-width: 350px}

L'unico parametro da modificare è max-width: 350px, il cui valore deve corrispondere con quello inserito in .board .big_list .yy, .board .big_list .zz {width: 350px !important}

.board .who a {display: inline-block; line-height: 20px; margin-bottom: -5px; max-width: 150px}

Anche qui, l'unico parametro da modificare è max-width: 150px. Consiglio di settarlo sempre uguale al max-width di cui al punto precedente, ma diminuito di 200px.

Informazioni

Il codice è compatibile solamente con il NUOVO LAYOUT

Questo codice non riscontra alcun problema di visualizzazione, e risulta compatibile con tutti i browser.
11/08/12: Fix del problema con le sezioni contenenti la classe .link
24/10/12: Adesso il blocco avrà sempre la stessa dimensione, a prescindere dalla lunghezza delle scritte al suo interno. Inoltre, sono stati introdotti dei commenti per facilitare la modifica degli stili.
19/02/13: Riscritto totalmente il CSS con una versione più compatta e di più facile personalizzazione.
19/06/13: Ottimizzato il codice nel caso sia attivo lo script Avatar accanto all'ultimo messaggio.

Credits
Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che si tratta di un codice innovativo che ha richiesto tempo per la realizzazione, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):

HTML

<b><a href="http://ffmagazine.forumfree.it/?t=62470873">Ultime risposte e numero messaggi/discussioni disposti in orizzontale</a> realizzato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=1879969">El Gringo 89</a> per <a href="http://ffmagazine.forumfree.it/">Forumfree Magazine</a> </b>
Rilasciato sotto <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</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="Ultime risposte e numero messaggi/discussioni disposti in orizzontale" href="http://ffmagazine.forumfree.it/?t=62470873"><b>Ultime risposte e numero messaggi/discussioni disposti in orizzontale</b></a>
Realizzata da <a href="http://ffmagazine.forumfree.it/?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>

Ultime risposte e numero messaggi/discussioni disposti in orizzontale
Realizzata da El Gringo 89 del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.

Edited by Paralizer - 17/12/2017, 23:48

.

Revo

Posted on 24/7/2012, 12:15

.

Advanced Member

Group: Member

Posts: 3,400

Activity Level: 0

Status: Anonymous

Grande Lati *>*

.

bored

Posted on 24/7/2012, 12:17

.

Advanced Member

Group: M. Onorario

Posts: 4,488

Activity Level: +2

Status: Anonymous

Molto carino *3*

.

SirSeleucio

Posted on 24/7/2012, 12:20

.

Advanced Member

Group: Lettore

Posts: 5,137

Activity Level: +1

Location: ca*** miei

Status: Offline

lati... SEI UN FIGO!

.

CoolDrift'

Posted on 24/7/2012, 12:22

.

User deleted

Ottimo lavoro =)

.

Kaito

Posted on 24/7/2012, 12:23

.

User deleted

yay, grazie _Lati_!

.

TurboJuly

Posted on 24/7/2012, 12:33

.

User deleted

Ottimo lavoro!

.

• o p e r a •

Posted on 24/7/2012, 12:40

.

User deleted

Grande _Lati_ sei il migliore!

.

kevin nash™

Posted on 24/7/2012, 13:25

.

User deleted

ben fatto lati

.

Z e k

Posted on 24/7/2012, 13:50

.

User deleted

bel codice, complimenti :fifi:

.

Frostman

Posted on 24/7/2012, 13:54

.

Advanced Member

Group: Member

Posts: 5,373

Activity Level: 0

Status: Anonymous

Strano che è stato pubblicato ora con la skin attuale, di solito qualche script speciale applicato alla skin veniva pubblicato alla skin successiva :asd: