Il blog per tutti gli smanettoni del pc

Indice guida

1. - Introduzione
2. - Convertiamo header
3. - Commento prima parte del codice css
4. - Convertiamo i post
5. - Convertiamo la sidebar
6. - Convertiamo il footer

Convertendo il footer concludiamo la conversione generale del nostro theme wordpress. Nei prossimi articoli installeremo wordpress ed adatteremo easyTheme.

Il footer ha una struttura abbastanza semplice. Si tratta di due contenitori ( #footer e #footer-main ) . Il primo contenitore avrà una larghezza dinamica ( occupa orizzontalmente tutta la pagina) . Mentre il secondo contenitore sarà un div di 999px centrato.

<div id="footer">
<div id="footer-main">Qui footer</div>
</div>

#footer{
clear:both;
background:#D7D7D7;
padding:40px 0;
margin:40px 0 0 0;}
#footer-main{
width:999px;
margin:0 auto;}

Indice guida

1. - Introduzione
2. - Convertiamo header
3. - Commento prima parte del codice css
4. - Convertiamo i post

Eccoci al 4° appuntamento della guida . Oggi convertiremo i post del nostro theme wordpress.

Continua a leggere

Indice guida

1. - Introduzione
2. - Convertiamo header
3. - Commento prima parte del codice css
   

Oggi spiegheremo passo passo il codice css, scritto nell’articolo precedente.

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}
#header{
padding:40px 0;
}
#header #logo{
float:left;
padding:0 30px 0 0;
font-family:"Times New Roman", Times, serif;
font-size:36px;
color:#3C3C30;
border-right:1px solid #CCCCCC;
 
}
#header #slogan{
float:left;
padding:15px 0 0 30px;
}
#header #logo em{
color:#69950F;
}

Prima di procedere, devo parlarvi di alcuni concetti chiave per la sintassi del css.
Per attribuire una determinata proprietà a un elemento html , si usano i selettori . Sono selettori, nel nostro caso :
‘body’,'#conteiner’,'#header’,'#header #logo’,'#header #slogan’ e ‘#header #logo em’.
Se non avete mai smanettato in css, vi starete chiedendo cosa è # ( sharp ) . Il simbolo sharp viene usato per selezionare un elemento della pagina HTML con un determinato id. Continua a leggere

Indice guida

1. - Introduzione
2. - Convertiamo header
   

La grafica che convertiremo passo passo è la seguente  My Easy Theme

Si tratta , come accennato nell’articolo precedente, di una grafica molto semplice , studiata per chi non è tanto pratico .

Un layout grafico, per buona regola,  si divide in tre parti : header , contenuto centrale e footer. La header è quella parte del sito, fissa in alto, composta da un logo e da un menu . Il contenuto, sono i testi centrali di ogni pagina. Invece il footer , è quella parte fissa in basso che contiene il copyright.

Oggi convertiamo la header del nostro theme.

Creiamo la pagina index.html , il file style.css e la cartella images . Continua a leggere