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

I fogli di stile

Un foglio di stile è costituito da una serie di regole che indicano come devono essere rappresentati i contenuti del documento XHTML.

Gli elementi che costituiscono una regola CSS sono:

  • il selettore a cui applicare la regola
  • le proprietà che la regola vuole controllare
  • i valori assegnati alla proprietà

Il selettore indica a quali oggetti del documento XHTML debbono essere assegnate le dichiarazioni specificate.
Le proprietà indicano i vari aspetti su cui si vuole agire (ad esempio margine o lo sfondo).
I valori indicano le caratteristiche che il singolo aspetto deve assumere (ad esempio l'ampiezza del margine o il colore dello sfondo).

Sintassi di una regola CSS

La coppia proprietà e valore a essa assegnato costituisce una dichiarazione.
Una regola può contenere una o più dichiarazioni separate dal carattere punto e virgola ( ; ).
L'insieme delle dichiarazioni associate al selettore è racchiuso tra parantesi graffe  { }.

All'interno dei fogli di stile è possibile inserire dei commenti.
Per iniziare un commento è sufficiente inserire la stringa /*.
Per chiudere il commento basta inserire la stringa */.
I commenti non hanno alcuna importanza per i browser, ma possono essere utili a chi scrive o modifica fogli di stile.

/* Questo è un commento e sarà ignorato dai browser*/

Nella cartella CSS di genesis_mio tema ci sono sette fogli di stili.
Il layout di scuolacooperativa.net/drupal è stato disegnato agendo sui file "style.css", "page.css", "blocks.css" e "node.css" contenute nella cartella genesis_miotema/css.

style.css 

Sono state aggiunte:

  •  dichiarazioni a elementi di HTML
  • regole non contemplate negli altri fogli di stile (ad esempio  ".nascosto" e ".nascosto a" utilizzate per nascondere i salta menù, "#licenza " e "#licenza a" inserite per le "Creative Commons License")
    Creative Commons License
  • correzioni a dichiarazioni contenute in regole presenti in fogli di stile di moduli aggiuntivi: spesso i moduli aggiuntivi contengono fogli di stile ma le correzioni è meglio porle in style.css del proprio tema, altrimenti tutte le volte che si aggiorna un modulo ci si deve ricordare delle modifiche fatte 

page.css

Sono stati precisati:

  • la fluidità  in "#container" e "body > #container"
  • l'ampiezza del contenuto principale  in "#main-content"
  • la regione leaderboard con il menù "servizio"  in "#leaderboard" - "#block-menu-menu-servizio .menu" - "#leaderboard #block-menu-menu-servizio li" - "#leaderboard #block-menu-menu-servizio li a"
     Leaderboard con Mappa sito - Contatti - Area riservata
  • le colonne di destra e sinistra in ".sidebar" - "#sidebar-left .sidebar-inner" - "#sidebar-right .sidebar-inner"
  • gli elementi della testata in "#header" - "#branding" - "#logo" - "#site-name" - "h1#site-name" - "#site-name a:link" - "#site-name a:visited" - "#search-box" - "#search-box"
     Testata
  • il menù orizzontale primario, dove sono state inserite le voci "Studenti - Famiglie - Docenti - Personale ATA", in "#nav" - "#primary" - "#nav .primary-links" - "#nav .primary-links li" - "#nav .primary-links li a" - "#nav .primary-links li.active" - "#nav .primary-links li.active-trail"
    Menù primario
    Per rendere l'effetto della cartella sono state inserite due immagini (curva2.jpg e curva3.jpg) che troverai in allegato e che dovrai trasmettere via ftp in sites/all/theme/images
  • il menù orizzontale secondario, dove sono state inserite  le voci menu "figlie" del menù primario, in "#secondary" - "#nav .secondary-links li" - "#nav .secondary-links li a"
    Menù secondario
    La procedura per ottenere questo risultato la trovi nel tutorial "Creare e gestire i menù"
  • la navigazione a briciole di pane in "#breadcrumb" e "#breadcrumb a"
  • il messaggio a piè di pagina in "#footer-message" e "#footer a, #footer-message a"
    Messaggio a piè di pagina
     Per messaggio a piè di pagina leggi il tutorial "Informazioni sito"

blocks.css

Sono presenti regole per:

  • il posizionamento (.block)  e per la formattazionedei blocchi (".block-inner" - ."block-inner a" - ."block-title")
    Blocco con titolo
  • i blocchi contenuti nella colonna di sinistra ("#sidebar-left .block" e "#sidebar-left .block h2")
    blocco in colonna di sinistra
  • i blocchi contenuti nella colonna di destra ("#sidebar-right .block" e "#sidebar-right .block h2")
    Blocco in colonna a destra
  • il blocco "Chi è on-line" ("#block-user-3")
    Blocco "Chi è on-line"
  • le voci di menù contenute nei blocchi di colonna sinistra e destra ("ul.menu, ul.menu ul, ul.menu ul ul, ul.menu ul ul ul" - "ul.menu li" - "ul.menu li.collapsed" - "ul.menu li.expanded" - "ul.menu li.leaf")
    Nelle ultime tre regole sono inserite delle immagini  che trovi in allegato e che devi trasferire via ftp in sites/all/themes/images
    Voci di menù nei blocchi
  • il blocco "Item-list" che viene mostrato solo agli amministratori quando con il cursore del mouse si posizionano sul titolo di blocco: le voci "Configura ed Edit menù" permettono loro di configurare velocemente il blocco e di editare il rispettivo menù (".block .item-list ul" - ".block .item-list ul li" - ".block .item-list ul li a")
    Blocco "Item-list"

 node.css

Contiene regole per:

  •  i margini del testo e la linea di separazione tra i vari nodi pubblicati in Home page (".node)
  • formattazione dei links (".node a" - ".node-title a:link, .node-title a:visited, .node-title a:active" - ".node-title a:hover"
  • i margini immagini (".node-content img")
  • il colore di "Leggi tutto" (".node-content .read-more a" - "ul.links li.node_read_more a")
  • il colore e la dimensione di "Inviato da" (".node-submitted" - ".node-submitted a")
  • formattazione di numero allegati in Home page (".node-links" - ".node-links ul.links li a") 
  • formattazione per il nodo "Fisso in cima alla lista" (".node-sticky")
  • alcune correzioni per IE 6 per posizionare in Crea contenuto il pulsante "Dividi il sommario nella posizione del cursore " (".node-form" - ".body-field-wrapper .teaser-button" - ".body-field-wrapper .option")
  • la tabella degli allegati (".node-content table#attachments")

In allegato trovi i file "style.css", "page.css", "blocks.css" e "node.css"  in cui ho aggiunto commenti in italiano che spiegano le correzioni e/o le aggiunte fatte, così potrai più facilmente personalizzarli.

Risultato dopo modifiche ai fogli di stile

Alla fine del tutorial "Temi" troverai anche i file . zip con genesis e genesis_mio tema da trasmettere via ftp nel tuo spazio web.

AllegatoDimensione
style.css5.07 KB
page.css18.19 KB
blocks.css7.05 KB
nodes.css4.41 KB

colonna sinistra

colonna destra