Guida ai child Theme per Thematic – Lezione 2 – Il file style.css

Seconda lezione della guida per creare Child Theme per Thematic per WordPress.

Il file STYLE.CSS

Cosa ci insegnera’ questa lezione:

• struttura del file style.css
• le dichiarazioni CSS utilizzate da Thematic

Struttura del file style.css

Quando creiamo il nostro file style.css per il nostro child theme “childTheme” ovviamente risultera’ vuoto.

Per creare un tema abbiamo dei requisiti da soddisfare:

/*
Theme Name: NOME DEL TEMA
Description: DESCRIZIONE.
Author: AUTORE
Author URI: www.esempio.com
*/

Per creare un child theme abbiamo bisogno di aggiungere almeno questa riga:

Template: thematic

Cosi facendo indichiamo a WordPress che il nosgtro tema principale è Thematic (nella cui cartella troviamo i file che di solito formano un tema: index.php, sidebar.php, ecc.) e che questo foglio di dtile va a modificare quello principale.

Come dicevamo nella lezione precedente, il file style.css è sufficiente per creare un child theme. Per importare anche le impostazioni predefinite di Thematic dobbiamo aggiungere, subito sotto:

/* file per resettare i valori */
@import url('../thematic/library/styles/reset.css');

/* stili tipografici base */
@import url('../thematic/library/styles/typography.css');

/* layout base a due colonne */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* stili per le immagini */
@import url('../thematic/library/styles/images.css');

/* stili di default */
@import url('../thematic/library/styles/default.css');

/* stili predefiniti per i plugin */
@import url('../thematic/library/styles/plugins.css');

Una volta caricati questi file, il nostro child theme sarà identico a Thematic. Da qui possiamo iniziare la nostra personalizzione.

Ricapitolando, ora abbiamo:

• la cartella /wp-content/themes/thematic/;
• la cartella /wp-content/themes/childTheme/ che dovrebbe contenere il file style.css.

Il nostro file style.css apparirà cosi:

/*
Theme Name: childTheme
Description: modifica di Thematic base.
Author: Altamente Decorativo
Author URI: www.altamentedecorativo.com
Template: thematic
*/
/* file per resettare i valori */
@import url('../thematic/library/styles/reset.css');

/* stili tipografici base */
@import url('../thematic/library/styles/typography.css');

/* layout base a due colonne */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* stili per le immagini */
@import url('../thematic/library/styles/images.css');

/* stili di default */
@import url('../thematic/library/styles/default.css');

/* stili predefiniti per i plugin */
@import url('../thematic/library/styles/plugins.css');

Ci siamo? Andiamo avanti.

Le dichiarazioni CSS utilizzate in Thematic

Questa mappa e’ stata realizzata modificando la versione su http://bluemandala.com/thematic/thematic-structure.html. La versione originale contiene anche le informazioni riguardanti le azioni e gli hooks di Thematic Framework per WordPress ma di questo ce ne occuperemo piu’ avanti.

Nella prossima lezione andremo ad analizzare e modificare le dimensioni del nostro child theme per ottenere un blog centrato, liquido, spostato a sinistra, ecc.

Segui le lezioni dall’ inizio: Thematic: Guida ai Child Theme.