Drupal 6 navigazione veloce.
menu principale | colonna di navigazione a sinistra | contenuto principale | colonna di navigazione a destra | piè di pagina

menu principale

contenuto principale

11 - Modificare i colori e la posizione delle colonne

per visualizzare il video è necessario disporre del plugin flash per il proprio browser

Per cambiare i colori dei blocchi contenuti nella colonna di sinistra e nella colonna di destra, devi andare in sites > all > Themes > genesis_miotema > css e aprire il file block.css.

In ".block-title" cambiare il colore di sfondo (background-color) da grigio a blu.
Il colore del testo lo pongo in bianco (color: #fff).
Il colore del corpo del blocco lo cambio in "#sidebar-left .block". Scelgo un azzurro chiaro (background-color: #CAE4FF).
Ora cambio il colore del bordo superiore, del bordo destro, del bordo inferiore e sinistro e lo pongo in blu.

Anche il titolo del blocco destro è bianco. Modifico lo sfondo in blu:
#sidebar-right .block h2 {
margin-right: 4px;
margin-left: 4px;
background-color: #000066;
}
Il colore del corpo del blocco che trovi in "#sidebar-right .block - background-color" lo lascio grigio così come è ora.

Il risultato non è dei migliori. La scelta dei colori è pessima, ma era giusto per segnalarti dove intervenire per modificare i colori delle colonne.

Una delle ragioni per cui ho scelto Genesis è che questo tema offre la possibilità di cambiare la posizione delle colonne.

Ora le colonne sono poste una a sinistra e una a destra del contenuto principale, ma puoi spostare entrambe a destra o a sinistra del contenuto principale .

Se vai in sites > all > themes > genesis > css e apri il file layuot.css, puoi vedere le possibilità offerte dal tema.
In genesis-1 le due colonne sono poste una a sinistra e una a destra del contenuto principale.
In genesis-2 le colonne sono poste entrambi a destra.
In genesis-3 le colonne sono poste entrambi a sinistra.
La lettera a, pone in genesis-1, genesis-2 e genesis-3 la larghezza delle colonne in ems; la lettera b pone la larghezza delle colonne in percentuale; la lettera c pone la larghezza in pixel, scelta da evitare perchè le colonne resterebbero fisse.

Per spostare le colonne a destra del contenuto principale devi andare il sites > all > themes > genesis_miotema > templates > page e il file page.tpl.php.
Scendi intorno alla riga 207 e nel body e cambia "genesis-1b" in "genesis-2b".
Salva e trasmetti il file.

Queste sono scelte molto personali, comunque trovo che queste due colonne siano troppo larghe rispetto allo spazio dedicato al contenuto principale per cui ritorno nel file layout.css che sta nella cartella css di genesis, scendo alle regole genesis-2b, le copio, vado in sites > all > themes > genesis_miotema > css, apro il file style.css e dove già precedentemente avevo cambiato i valori delle dichiarazioni relative alle regole di genesis-1b, incollo le regole di genesis-2 e modifico i valori:
Prima regola da
#genesis-2b .two-sidebars .content-inner{margin-right:50.5%;}
a
#genesis-2b .two-sidebars .content-inner{margin-right:41.5%;}
Seconda regola da
#genesis-2b .sidebar-left .content-inner{margin-right:25.25%;}
a
#genesis-2b .sidebar-left .content-inner{margin-right:19.25%;}
Terza regola da
#genesis-2b .sidebar-right .content-inner{margin-right:25.25%;}
a
#genesis-2b .sidebar-right .content-inner{margin-right:20.25%;}
Quarta regola da
#genesis-2b #sidebar-left{width:24.25%;margin-left:-49.5%;}
a
#genesis-2b #sidebar-left{width:19.25%;margin-left:-40.5%;}
Quinta regola da
#genesis-2b #sidebar-right{width:24.25%;margin-left:-24.25%;}
a
#genesis-2b #sidebar-right{width:20.25%;margin-left:-20.25%;}
Sesta regola
da
#genesis-2b .sidebar-left #sidebar-left{width:24.25%;margin-left:-24.25%;}
a
#genesis-2b .sidebar-left #sidebar-left{width:20.25%;margin-left:-20.25%;}


colonna sinistra

colonna destra