IoSmanetto.it - Blog programmazione e webdesign » Html

Convertiamo il footer – Realizziamo un theme wordpress

Gregorio — Sat, 02 Jan 2010 13:31:08 +0000

Indice guida

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.


Qui footer

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

Guida alla realizzazione di un Theme WordPress – Parte 5

Gregorio — Fri, 01 Jan 2010 22:58:38 +0000

Indice guida

In questo articolo convertiremo la sidebar, parte fondamentale di un theme wordpress. La sidebar contiene informazioni utili per l’utente come gli archivi, le categorie e informazioni personali.

Spiegare passo passo come convertire tutto il theme in html/css è davvero complicato . Dovrei scrivere una guida di minimo 50 pagine perchè ci vuole una solida conoscenza dell’html e del css. Per codesto motivo , ogni qual volta converto, registro ogni movimento del mio monitor.

Aggiungiamo al file index.html la struttura della sidebar:

<div id="sidebar">
 <div style="padding-top:0">Il mio profilo</div>
 <div> <img src="" width="119" height="107" /> Hello My name is ii isojdisssos
 sadjasioj dioasj dioasjdssdiasj
 asdjiasiodj ioasdj ioassdsdsdj
 asdji asiodj ioasjdijassdsddiojs
 sajid ioasdj ioasj dioassdsjiod
 asdk psoakdopk asdopk as </div>
 <div>Ultimi post</div>
 <ul>
 <li>&raquo; <a href="#">qui titolo post ecc assdaads</a></li>
 </ul>
 <div>I più visitati</div>
 <ul>
 <li>&raquo; <a href="#">qui titolo post ecc assdaads</a></li>
 </ul>
 <div>
 <div>Archivio</div>
 <ul>
 <li>&raquo; <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>&raquo; <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>&raquo; <a href="#">Gennaio</a></li>
 </ul>
 </div>
 <div>
 <div>Archivio</div>
 <ul>
 <li>&raquo; <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>&raquo; <a href="#">Gennaio</a></li>
 </ul>
 <div>Archivio</div>
 <ul>
 <li>&raquo; <a href="#">Gennaio</a></li>
 </ul>
 </div>
 </div>

Nel file style.css creiamo delle nuove regole per impostare lo stile della sidebar

#sidebar{
float:right;
width:355px;
font-size:14px;
}
#sidebar .title{
font-size:22px;
color:#69950F;
font-style:oblique;
padding:20px 0;
 
}
#sidebar .text{
line-height:160%;
color:#666666;}
#sidebar .text img{
float:left;
padding:3px;
border:1px solid #676767;
margin:0 10px 10px 0;}
#sidebar ul{
list-style-type:none;}
#sidebar ul li{
border-bottom:1px solid #cccccc;
padding:10px 0;}
#sidebar ul li a{
color:#000000;
text-decoration:none;}
#sidebar ul li a:hover{
text-decoration:underline;
}
#sidebar .fLeft{
float:left;
width:165px;
}
#sidebar .fRight{
float:right;width:165px;}

In html per visualizzare una lista si usa il tag

. Ogni elemento deve essere racchiuso tra i tag


Primo elemento
Secondo elemento

Per default i browser visualizzano accanto ad ogni elemento un puntino. Con la regola list-style-type:none; non facciamo altro che eliminare questo stile.

L’intero codice del theme è reperibile a questo indirizzo – Download Theme WordPress

Guida alla realizzazione di un Theme WordPress – Parte 4

Gregorio — Sat, 26 Dec 2009 16:53:08 +0000

Indice guida

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

Aggiornare la index.html con questo nuovo codice :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyTheme by iosmanetto.it</title>
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<div id="conteiner">
 <div id="header">
 <div id="logo">My <em>first</em> theme</div>
 <div id="slogan">Qui slogon wordpress</div>
 <div style="clear:both"></div>
 </div>
 <div id="main">
 <div class="post">
 <div class="title"><a href="#">Qui titolo post</a></div>
 <div class="detail"><a href="#">Nome Categoria</a> | Autore | Data</div>
 <div class="entry">qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo qui testo <a href="#" class="more-link">Continua a leggere &gt;</a> </div>
 </div>
 </div>
</div>
</body>
</html>

Ho aggiunto la struttura del post e modificato un piccolo particolare della header.

Prima della chiusura del div header ho inserito un contenitore(div) con un clear:both. Clear both specifica che gli elementi successivi non saranno adiacenti all’elemento float di slogan.

La struttura del post è la seguente

Nel div title ci andrà il titolo del post. In detail i dettagli del post come l’autore , le categorie e i tags .Infine in entry il testo del post.

Aprite il file style.css e inserite nell’ultima riga queste regole

#main{
float:left;
width:540px;
}
#main .post{
padding:0 0 10px 0;}
#main .post .title{
font-size:24px;
color:#326EA1;}
#main .post .title a{
color:#326EA1;
text-decoration:none;
}
#main .post .title a:hover{
color:#326EA1;
text-decoration:underline;
}
#main .post .detail{
font-style:oblique;
padding:15px 0;}
#main .post .detail a{
color:#000000;
text-decoration:none;
}
#main .post .detail a:hover{
text-decoration:underline;
}
#main .post .entry{
font-size:16px;
line-height:160%;}
#main .post .entry .more-link{
font-size:14px;
color:#003366;
text-decoration:underline;
display:block;
padding:15px 0;}
#main .post .entry .more-link:hover{
text-decoration:none;
}

La maggior parte del codice lo conosciamo già. Occorre commentare i seguenti comandi :

text-decoration:none;
text-decoration:underline;
font-style:oblique;
line-height:160%;
display:block;

Effetto sottolineatura del testo non impostato
Effetto sottolineatura del testo impostato
Testo in corsivo
La distanza tre due righe di testo è uguale al 160% rispetto alle dimensioni del font
Trasformiamo l’elemento in un blocco ( come un div )

Guida alla realizzazione di un Theme WordPress – Parte 3

Gregorio — Wed, 23 Dec 2009 22:14:20 +0000

Indice guida

- Introduzione
- Convertiamo header
- 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.

La prima regola che abbiamo scritto è :

body{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}

Con il selettore ‘body’ , diciamo al browser , che le regole dichiarate all’interno delle parentesi graffe , valgono solo per il tag body.
Dichiariamo che il margine dell’elemento è uguale a 0
Dichiariamo che lo spazio tra bordo elemento e contenuto è uguale a 0
Diciamo di usare il font Arial per i testi

#conteiner{
width:999px;
margin:0 auto;
padding:0 30px;
}

Conteiner è l’id che abbiamo attribuito al div principale
Impostiamo larghezza uguale a 999px
Impostiamo margine superiore e inferiore a zero e i margini laterali dinamici. Impostando i margini laterali in dinamici, il div si centra dinamicamente nella pagina.
Dichiariamo un padding di 30 px per i bordi laterali

#header{
padding:40px 0;
}

Selezioniamo l’elemento con l’id header
Impostiamo un padding superiore e inferiore uguale a 40 px

#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;

Selezioniamo l’elemento logo che si trova all’interno dell’elemento header
Spostiamo l’elemento a sinistra
Impostiamo un padding di 30 px per il lato destro
Usiamo un font-family Times New Roman
Dichiariamo che il testo deve essere a 36px
Impostiamo il colore del testo in #3c3c30
Il bordo destro deve essere di 1px di colore #cccccc. Solid è il tipo di bordo.

#header #slogan{
float:left;
padding:15px 0 0 30px;
}

Selezioniamo l’elemento slogan , all’interno dell’elemento header
Spostiamo l’elemento a sinistra
Impostiamo padding superiore a 15px e padding laterale sinistro a 30px

#header #logo em{
color:#69950F;
}

Selezioniamo il tag em
Impostiamo il seguente colore : #69950f

Per chi non conosce il css , seguire i commenti, puo’ essere certamente utile , ma è consigliabile la lettura di una guida .

Ecco la migliore in circolazione : Guida css di base

http://css.html.it/guide/leggi/2/guida-css-di-base/

Guida alla realizzazione di un Theme WordPress – Parte 2

Gregorio — Tue, 22 Dec 2009 16:30:59 +0000

Indice guida

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

Nel file style.css inseriamo il seguente codice :

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;
}

Nel file index.html

<!DOCTYPE html PUBLIC "><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
@import "style.css";
</style>
</head>
<body>
<div id="conteiner">
 <div id="header">
 <div id="logo">My <em>first</em> theme</div>
 <div id="slogan">Qui slogon wordpress</div>
 </div>
</div>
</body>
</html>

Mentre convertivo, ho registrato ogni singolo movimenti nel video qui sotto. Nel prossimo articolo cercheremo di commentare ogni riga di codice .

Guida alla realizzazione di un Theme WordPress – Parte 1

Gregorio — Sat, 19 Dec 2009 23:01:30 +0000

Questo articolo, è una piccola introduzione su quello che faremo nei prossimi appuntamenti. Non spiegherò come disegnare il layout grafico, perchè è un argomento molto ampio, che spero di trattare più in là. Ci limiteremo a convertire una piccola grafica realizzata dal sottoscritto, ed adattarla al nostro amato WordPress.

WordPress è uno dei piu’ importanti e diffusi CMS ( content management system ) per la gestione di un blog . I CMS non sono altro, che delle applicazioni , che facilitano la gestione di un sito web. WordPress ha fatto un gran successo perchè è molto semplice da adattare,da gestire e da implementare . E’ facile da implementare grazie ai numerosi plugin in circolazione . Anche noi possiamo fare un plugin ! E’ davvero molto semplice .

Il template che andremo a convertire è molto easy . E’ stato realizzato in modo da facilitare la conversione in CSS . Per chi non conosce il CSS, non vi preoccupate ! Spiegherò passo passo ogni riga di codice.

Nel prossimo appuntamento convertiremo il template !