Guida ai child Theme per Thematic – Lezione 3 – Modifichiamo le dimensioni del nostro Child Theme

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

Modifichiamo le dimensioni del nostro Child Theme

Cosa ci insegnera’ questa lezione:

• modificare le dimensioni del nostro child theme per adattarle ai nostri bisogni
• le dichiarazioni CSS relative alle dimensioni

Dimensione standard di Thematic child theme

Thematic e’ basato su una griglia larga 960px di cui 10 di margine a destra e sinistra. Questa dimensione e’ l’ideale per monitor che hanno una risoluzione di 1024×768, attualmente la piu’ diffusa. Per approfondire il perche’ consiglio di leggere 960 Grid System.
Questa e’ la nostra situazione iniziale (a parte il contenuto che puo’ variare in base agli articoli che avete):

Dimensioni standard del nostro tema (clicca per ingrandire)

I selettori CSS che vengono utilizzati sono i seguenti:

#branding {
margin:0 auto;
width: 940px;
}

branding e’ la parte superiore che contiene il titolo e lo slogan del blog sono definiti qui: larghezza 940px + 10px a destra e sinistra di margine per un totale di 960px.

.menu {
margin:0 auto;
width: 940px;
}

Stessa cosa per menu.

#main {
margin:0 auto;
width: 960px;
}

main e’ il div che contiene il gli articoli e la sidebar: qui abbiamo la dimensione 960px che e’ quella che da i 10px di margine a destra e sinistra.

#subsidiary {
margin:0 auto;
width: 940px;
}

subsidiary e’ il div che contiene le tre widget areas nella parte inferiore del blog.

#siteinfo {
margin:0 auto;
width: 940px;
}

siteinfo invece contiene il link a WordPress e al nostro child theme.

Se vogliamo modificare la larghezza del nostro blog non ci serve altro che cambiare le dimensioni nel nostro file style.css in questo modo (nell’ esempio otterremo un blog largo 1000px):

#branding,
.menu,
#subsidiary,
#siteinfo {
width: 980px;
}

#main {
width: 1000px;
}

Aggregando tutti i selettori possiamo in due soli passaggi modificare la dimensione del blog.

Voglaimo che il nostro blog non sia piu’ centrato ma vogliamo spostarlo a sinistra?

Niente di piu’ facile:

#branding,
.menu,
#subsidiary,
#siteinfo {
width: 980px;
margin: 0 10px;
}

#main {
width:1000px;
margin: 0;
}

Ecco che il blog si sposta. Abbiamo sovrascritto il valore 0 auto che centrava i div e gli abbiamo dato un margine di 10px a destra e sinistra.

Per avere un blog liquido che si ridemensiona in base alla finestra dobbiamo invece modificare il codice in:

#branding,
.menu,
#subsidiary,
#siteinfo {
width: 100%;
margin:0 10px;
}

#main {
width: 100%;
margin:0
}

Ovviamente dovremo anche dare una dimensione in percentuale alla colonna degli articoli e alla sidebar (per esempio 75% e 25% rispettivamente).

Io sconsiglio questo metodo poiche’ il testo si allargherebbe fino al 75% dello spazio rendendo, in monitor dalla risoluzione elevata, la lettura impossibile.

Spero di aver coperto le piu’ comuni necessita’, chi avesse esigenze particolari puo’ lasciare un commento.

Nella prossima lezione continueremo ad usare il layout standard largo 960px e andremo ad analizzare e modificare l’header del nostro blog.

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