Drupal 6 - Un CMS per la scuola

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).

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")
  
• 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"
   
• 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"
   
• 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"
  
  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"
  
  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"
  
   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")
  
• i blocchi contenuti nella colonna di sinistra ("#sidebar-left .block" e "#sidebar-left .block h2")
  
• i blocchi contenuti nella colonna di destra ("#sidebar-right .block" e "#sidebar-right .block h2")
  
• il blocco "Chi è on-line" ("#block-user-3")
  
• 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
  
• 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")
  

 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.

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