Disposizione orizzontale di ultime risposte e n° discussioni

« Older   Newer »
 
  Share  
.
  1. _Lati_
    view post Posted on 24/7/2012, 12:08 by: _Lati_
        +22    
     
    .
    Avatar

    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
     
    Top
    .
158 replies since 24/7/2012, 12:08   11932 views
  Share  
.

Script & Servizi
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumFree
Top