Cambio colore sfondo del Main Content su T3

Manu.g

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!

Manu.g

Scusate se mi riquoto, ma vorrei sapere se c'è qualche risposta, grazie!

fda

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.

Manu.g

Esatto joomla 3, ultimo T3 e e template blankbs3, grazie fda!

fda

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:


<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:


// ---------------------------------------------------------
// 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:


@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, 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:


// ---------------------------------------------------------
// 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:


// Main Body Styles
// -------------------------
@t3-mainbody-background:           ;

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 ;

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

Manu.g

Mizzica quanta roba! Molte grazie ti farò sapere al + presto!

eleumas

Ottimo, questa cosa interessava anche a me. Farò una prova!

Manu.g

Funziona alla perfezione grazie mille!

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

Lo script di FDA


// Main Body Styles
// -------------------------

@t3-mainbody-background:            #fff;

va aggiungiunto tra "Scaffolding" e "Links" dalla riga n° 65 in poi.

Grazie mille!