+ Rispondi alla Discussione
Risultati da 1 a 8 di 8

Cambio colore sfondo del Main Content su T3

Ultimo Messaggio di Actionscripter il:
  1. #1
    User L'avatar di Actionscripter
    Data Registrazione
    Oct 2013
    Località
    Alba
    Messaggi
    198
    Segui Actionscripter su Twitter Aggiungi Actionscripter su Google+

    Cambio colore sfondo del Main Content su T3

    Salve a tutti, mi sto dilettando a creare qualche template di prova col T3 e sono attualmente fermo su un piccolo problema: Dopo aver assegnato un colore di sfondo al mio template scopro che si estende anche a tutti i vari contentuti del mio sito (Demo: i.imgur.com/5LFkCWd.jpg) quindi la mia domanda è: Come posso assegnare al main content del mio template, un colore diverso da quello dello sfondo? Grazie a tutti!

  2. #2
    User L'avatar di Actionscripter
    Data Registrazione
    Oct 2013
    Località
    Alba
    Messaggi
    198
    Segui Actionscripter su Twitter Aggiungi Actionscripter su Google+
    Scusate se mi riquoto, ma vorrei sapere se c'è qualche risposta, grazie!

  3. #3
    FDA
    FDA è offline
    Moderatore L'avatar di FDA
    Data Registrazione
    Sep 2012
    Località
    Napoli
    Messaggi
    1,931
    Segui FDA su Twitter Aggiungi FDA su Google+ Aggiungi FDA su Facebook
    Ciao Actionscripter,
    a memoria non ricordo, ma controllo e in serata ti dico la mia.

    P.S. Immagino l'ultimo T3 per Joomla 3 e il Bootstrap.

  4. #4
    User L'avatar di Actionscripter
    Data Registrazione
    Oct 2013
    Località
    Alba
    Messaggi
    198
    Segui Actionscripter su Twitter Aggiungi Actionscripter su Google+
    Esatto joomla 3, ultimo T3 e e template blankbs3, grazie fda!

  5. #5
    FDA
    FDA è offline
    Moderatore L'avatar di FDA
    Data Registrazione
    Sep 2012
    Località
    Napoli
    Messaggi
    1,931
    Segui FDA su Twitter Aggiungi FDA su Google+ Aggiungi FDA su Facebook

    Framework T3 e template Blank di JoomlArt: sfondo, CSS, LESS

    Per modificare lo sfondo del T3 di JoomlArt dobbiamo intervenire sui file CSS, eventualmente via LESS. Per fortuna il back end del template ci aiuta non poco.
    Esplorando il sorgente in Home del template BS3 Blank style default troviamo questi elementi:

    Codice:
    <body ... >
    ...
    <div class="t3-wrapper>
    ...
    <header id="t3-header>
    ...
    <nav id="t3-mainnav>
    ...
    <div class="container">
    ...
    <div id="t3-mainbody">
    ...
    Per semplicità ho omesso codice, classi, div di chiusura, altri elementi che seguono il t3-mainbody ... lasciando in evidenza soltanto quello che ci interessa.
    Quando modifichi il background-color della classe t3-wrapper cambia anche lo sfondo di tutto il resto perché non è definito un background-color per il t3-mainbody, come puoi verificare tu stesso aprendo il file root/templates/t3_bs3_blank/less/style.less:

    Codice:
    // ---------------------------------------------------------
    // MAIN BODY
    // ---------------------------------------------------------
    .t3-mainbody {
      padding-top: @line-height-computed ;
      padding-bottom: @line-height-computed;
    }
    Sopra sono riportate le righe dalla 169 alla 174 del file .less, che puoi modificare in "development mode": dal back end vai in menu superiore > extensions > template manager > t3_bs3_blank_default > general > metti "development mode" su ON.

    Ora, il background-color del t3-wrapper è il @body-bg definito nel file root/templates/t3_bs3_blank/less/variables.less; in riga 62 trovi infatti:

    Codice:
    @body-bg:               #fff;
    Lo sfondo è bianco. Se cambi questo parametro, come tu hai fatto notare si colora anche lo sfondo degli articoli e di tutto quello che c'è in t3-mainbody.

    Ciò che puoi fare allora è definire un background-color per il t3-mainbody e impostarlo a #fff, direttamente o con LESS. Facciamolo modificando i file LESS a partire dal codice già mostrato in alto, cioè nel file root/templates/t3_bs3_blank/less/style.less:

    Codice:
    // ---------------------------------------------------------
    // MAIN BODY
    // ---------------------------------------------------------
    .t3-mainbody {
      padding-top: @line-height-computed ;
      padding-bottom: @line-height-computed;
      background-color: @t3-mainbody-background; //riga aggiunta
    }
    Nota che @t3-mainbody-background ancora non esiste, va creato in root/templates/t3_bs3_blank/less/variables.less:

    Codice:
    // Main Body Styles
    // -------------------------
    @t3-mainbody-background:            #fff;
    Fai copia e incolla del codice sopra per impostare lo sfondo "bianco" del t3-mainbody; al posto del bianco metti ovviamente quello che vuoi cambiando #fff;

    Se adesso cambi il valore del @body-bg vedrai che la parte del t3-mainbody non cambia. Puoi fare qualcosa di analogo anche con altre classi e id.

    Alla fine, se sei soddisfatto delle tue modifiche imposta a OFF il development mode: se fai un refresh della pagina adesso tutto torna come prima perché non abbiamo ancora aggiornato i CSS via LESS; fai clic su less to css e ancora refresh.

    P.S. Chiedo scusa se ho illustrato qualche passaggio ovvio.

    Fammi sapere se hai risolto.

    Francesco
    Ultima modifica di FDA; 16-10-14 alle 22:08 Motivo: Formattazione.

  6. #6
    User L'avatar di Actionscripter
    Data Registrazione
    Oct 2013
    Località
    Alba
    Messaggi
    198
    Segui Actionscripter su Twitter Aggiungi Actionscripter su Google+
    Mizzica quanta roba! Molte grazie ti farò sapere al + presto!

  7. #7
    User
    Data Registrazione
    Mar 2014
    Località
    Firenze
    Messaggi
    183
    Ottimo, questa cosa interessava anche a me. Farò una prova!

  8. #8
    User L'avatar di Actionscripter
    Data Registrazione
    Oct 2013
    Località
    Alba
    Messaggi
    198
    Segui Actionscripter su Twitter Aggiungi Actionscripter su Google+
    Funziona alla perfezione grazie mille!

    Aggiungo solo una altra precisazione per i futuri lettori di questo topic:

    Lo script di FDA

    Codice:
    // Main Body Styles
    // -------------------------
    
    @t3-mainbody-background:            #fff;
    va aggiungiunto tra "Scaffolding" e "Links" dalla riga n° 65 in poi.

    Grazie mille!

+ Rispondi alla Discussione

^ 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
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.