vHosting 0
vhs728x90
Risultati da 1 a 11 di 11
  1. #1
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Chi conosce MyBB saprà che il layout delle pagine è ottenuto mediante l'uso di tabelle, il che rende semplice e veloce la realizzazione di nuovi temi e la modifica di quelli esistenti ma presenta delle limitazioni che non stiamo qui ad elencare né a discutere.
    In questa guida ci occuperemo di una modifica in particolare, ovvero la colorazione delle colonne di una tabella, per essere ancor più precisi ci occuperemo della tabella che contiene la lista dei forum nella homepage del forum. La piattaforma usata è MyBB 1.8.3, ma quanto segue si può applicare senza problemi anche a versioni precedenti, anche alla serie 1.6.x.

    Attenzione, sebbene siano stati spiegati brevemente gli elemeneti HTML e CSS utilizzati nella guida, per comprendere a pieno il tutorial sono necessarie conoscenza basi di HTML e CSS.


    Nel caso volessimo dar colore alle righe non avremmo problemi in quanto ci sono di default le classi trow1 e trow2 che si alternano per mezzo della variabile {$bgcolor}, ma non c'è nulla che caratterizzi le colonne quindi dobbiamo fare a mano.


    Ci sono diversi modi per ottenere lo stesso risultato, in questa guida ci occuperemo di due soluzioni, ognuna con i suoi pro i e suoi contro - spetta al lettore scegliere quella che più gli conviene. Il risultato di entrambe le soluzioni sarà comunque uguale, come mostrato nella figura seguente:







    Metodo 1


    Una prima soluzione consiste nell'aggiungere classe ad ogni colonna cui si desiderare dare un colore di sfondo particolare. Per fare ciò andiamo nel template forumbit_depth2_forum che vive nel gruppo Forumbit Templates. Qui nella prima riga avremo il tag <tr> mentre nell'ultima avremo </tr>. Questi tag segnalano rispettivamente l'inizio e la fine della riga relativa al singolo forum listato in una categoria.


    All'interno della riga abbiamo una serie di <td> ... </td> che indicano invece l'inizio e la fine di ogni cella all'interno di una riga. Di default abbiamo 5 celle per ogni forum: una per l'icona di stato del forum, una per il nome del forum, la relativa discussione, i subforum, i modeartori, etc., due per i contatori, di discussioni e di messaggi rispettivamente, e infine una per le informazioni relative all'ultimo messaggio inviato in quel forum. Viste in verticale, le celle delle icone di stato dei vari forum formano una colonna, così come le informazioni circa gli stessi forum ne formano un'altra e così via.
    A ogni cella è assegnato l'attributo class="" contente il valore {$bgcolor} che nel momento in cui l'interprete PHP sta per stampare la pagina, come detto in precedenza, può essere trow1 o trow2 a seconda della riga. Per caratterizzare le colonne non ci rimane che aggiungere una nostra classe vicino alla variabile {$bgcolor}, per ciascuna cella. Per esempio, potremmo usare, rispetto alla lista delle celle elencate poco fa, le seguenti classi: col-forum-status, col-forum-info, col-forum-topics, col-forum-posts, col-forum-lastpost. Il risultato è:


    Codice:
    <tr>
    	<td class="{$bgcolor} col-forum-status" align="center" valign="top" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
    	<td class="{$bgcolor} col-forum-info" valign="top">
    		<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
    	</td>
    	<td class="{$bgcolor} col-forum-topics" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
    	<td class="{$bgcolor} col-forum-posts" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
    	<td class="{$bgcolor} col-forum-lastpost" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
    </tr>
    Salviamo il template e andiamo nel foglio di stile global.css, dove andremo a mettere i seguenti selettori:


    Codice:
    .col-forum-status{
    	background-color: #829db4;
    }
    
    
    .col-forum-info{
    	background-color: #8ea6bb;
    }
    
    
    .col-forum-topics{
    	background-color: #9bb0c3;
    }
    
    
    .col-forum-posts{
    	background-color: #a7baca;
    }
    
    
    .col-forum-lastpost{
    	background-color: #b4c4d2;
    }
    Attenzione, i selettori qui sopra scritti vanno messi dopo i selettori riguardanti le classi trow1 e trow2, altrimenti il colore di sfondo verrà sovrascritto da quello delle classi trow1 e trow2. Per semplicità mettiamoli alla fine del foglio di stile. Il foglio di stile global.css non è obbligatorio ma va più che bene in questo caso.



    Metodo 2


    La seconda soluzione non prevede alcuna modifica ai template ma solo l'aggiunta di alcuni selettori particolari nel foglio di stile, globa.css.


    Codice:
    tbody[id^="cat_"] td:nth-child(1) {
    	background-color: #829db4;
    }
    
    
    tbody[id^="cat_"] td:nth-child(2) {
    	background-color: #8ea6bb;
    }
    
    
    tbody[id^="cat_"] td:nth-child(3) {
    	background-color: #9bb0c3;
    }
    
    
    tbody[id^="cat_"] td:nth-child(4) {
    	background-color: #a7baca;
    }
    
    
    tbody[id^="cat_"] td:nth-child(5) {
    	background-color: #b4c4d2;
    }
    In sintesi, andiamo a cercare nella pagina tutti gli elementi tbody, ovvero il corpo delle varie tabelle, caratterizzati da un ID che inizia con cat_. Tale ID è proprio delle tabelle delle categorie, quindi non andremo a modificare tabelle che non ci interessano. Quindi cerchiamo tutte le celle e a seconda della loro posizione, da 1 a 5 nel nostro caso, assegniamo loro il colore di sfondo che preferiamo.



    Quale metodo usare?


    Ora, qual è la differenza tra la prima soluzione e la seconda? A prima vista la seconda sembrerebbe essere più conveniente della prima e lo è, a patto che non ci interessi la compatibilità con browser più datati, specialmente IE 7 e inferiori. Inoltre, un selettore del genere - per quanto ci possa sembrare poco - incidere sulla velocità di caricamento delle pagine, fattore che conta molto nella valutazione di una pagina da un MdR come Google. Potremmo anche usare un selettore del tipo tbody[id^="cat_"] > tr > td:nth-child(x) che ha performance migliori ma non comunque compatibile con browser datati. Il problema della compatibilità si potrebbe risolvere con JavaScript, con i problemi che ne deriverebbero (i.e. peggiori performance e non sappiamo se l'utente ha l'interprete JavaScript attivo).

    Il primo approccio, è a mio dire più elegante, compatibile praticamente con ogni browser e facile da mantenere in quanto possiamo decidere noi il nome delle classi - pensiamo se dobbiamo fare un lavoro simile con parecchie tabelle di pagine diverse! Ma anche in questo caso c'è un problema: molti plugin di MyBB per aggiungere elementi in una pagina fanno una ricerca nei template ed eseguono un'operazione che possiamo sintetizzare con trova-e-sostituisci, e in presenza di template modificato c'è il rischio che la modifica non venga applicata o non venga apportata correttamente che è ancora peggio.
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  2. I seguenti 2 utenti hanno ringraziato MaxSteel per questo post

    cionfs (22-01-15),Hansen (18-02-15)

  3. #2
    Data Registrazione
    17/12/14
    Località
    Torino, Italy
    Messaggi
    47
    Grazie dati
    4
    Ringraziato 3 volte in 3 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Torno dopo una lunga assenza per motivi di lavoro all'estero, durante la quale ho avuto troppo da fare per pensare, la sera, di mettermi lì a lavorare sul sito.
    Ho provato il metodo 1 ma non mi risulta cambi nulla.
    Io vorrei le celle #000000 ed i testi #8ab8dc ( #586385 in over ) ma qualsiasi colore metta, nei selettori, nulla accade? dove erro?

    Saluti
    BB

  4. #3
    Data Registrazione
    17/12/14
    Località
    Torino, Italy
    Messaggi
    47
    Grazie dati
    4
    Ringraziato 3 volte in 3 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Devo correggermi... vedo le celle nere e poco altro. Ad esempio non vedo i counters di descrizioni/messaggi e le descrizioni della categorie medesime...

  5. #4
    Data Registrazione
    15/09/08
    Località
    Taranto, Italy
    Età
    35
    Messaggi
    38,099
    Grazie dati
    1,577
    Ringraziato 2,932 volte in 2,572 post
    Mentioned
    152 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Lo chiedo anche se dovrebbe non essere così. Hai provato a mettere !important dopo l'indicazione del colore?

  6. #5
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Se stai lavorando ancora su questo allora sembra che la modifica sia andata a buon fine.
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  7. #6
    Data Registrazione
    12/05/12
    Località
    Udine
    Età
    49
    Messaggi
    654
    Grazie dati
    78
    Ringraziato 81 volte in 59 post
    Mentioned
    3 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Domanda sullo sfondo, giusto per restare in tema di sfondi , come si aggiunge uno sfondo leggermente più largo rispetto al contenitore dei forum e delle categorie?
    Grazie
    InvisionTech.net cerca Utenti e Staff

  8. #7
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Se usi un tema basato su quello di default puoi modificare la classe wrapper impostando un padding e/o un border alla stessa. Alternativamente, puoi aggiungere un altro contenitore attorno a quello identificato dalla classe wrapper.

    Se hai un tema personalizzato o se sono stato poco chiaro, posta un'immagine di ciò che vorresti ottenere e il link del forum in cui vuoi apportare la modifica, così vediamo di fornire un esempio pratico ad hoc.
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  9. #8
    Data Registrazione
    12/05/12
    Località
    Udine
    Età
    49
    Messaggi
    654
    Grazie dati
    78
    Ringraziato 81 volte in 59 post
    Mentioned
    3 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Sto parlando del tema di default, hai presente phpbb3, c'è lo sfondo generale del forum...come in mybb...e successivamente c'è una sorta di cornice che avvolge i forum e le categorie mentre in mybb non è presente.
    InvisionTech.net cerca Utenti e Staff

  10. #9
    Data Registrazione
    12/05/12
    Località
    Udine
    Età
    49
    Messaggi
    654
    Grazie dati
    78
    Ringraziato 81 volte in 59 post
    Mentioned
    3 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Alla classe wrapper ho aggiunto questo:

    Codice:
     padding: 20px;
            background: #ffffff;
            border-radius: 6px;
    sostituire il valore #ffffff con il codice colore che si preferisce.
    InvisionTech.net cerca Utenti e Staff

  11. #10
    Data Registrazione
    01/07/12
    Messaggi
    7
    Grazie dati
    0
    Ringraziato 0 volte in 0 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Mi è stato utilissimo grazie :)

  12. #11
    Data Registrazione
    03/10/15
    Messaggi
    1
    Grazie dati
    0
    Ringraziato 0 volte in 0 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Colore di sfondo alle colonne in MyBB 1.8

    Devo dire che anche io, da bvero niubbo di Mybb, questa guida mi ha aiutato non poco a cambaire e valutare le opzioni per cambio colore.

    grazie per il prezioso aiuto che mi avete dato.

    Giuseppe

Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
Seguici!
P.IVA: 02750560738
Cionfs © - Cionfs ® - Marchio registrato numero 0001524896
© Cionfs'Forum CMS - Cionfs'Forum CMS - Guide Gratis - Supporto CMS - E' vietata la copia anche parziale senza autorizzazione.
Questo sito utilizza cookies di analytics su dati esclusivamente aggregati e cookies di terze parti per migliorare l'esperienza dell'utente tramite plugin sociali e video.
Cliccando su oppure continuando la navigazione sul sito accetti i cookies. Per l'informativa completa clicca qui.