Aggiungere la Terza Colonna

Ciao amici...Continuiamo con la nostra catena di tutorial, per quanto riguarda la personalizzazione del template.
Oggi vedremo come aggiungere la terza colonna ad un template a due colonne.
Prima di seguire questo tutorial vi consiglio di dare un'occhiata al tutorial precedente: - Salvare e cambiare il template del blog.
Il template a due colonne che ho scelto di modificare, s'intitola Minima (il primo che m'è capitato sotto tiro), creato da Douglas Bowman.
VI CONSIGLIO DI GUARDARE PRIMA IL VIDEO TUTORIAL (che si trova in fondo), COSI SARA' PIU' FACILE CAPIRE E MODIFICARE IL TEMPLATE.
Prima di iniziare, vediamo una mappa che ho creato per farvi capire, quali sono le voci che dobbiamo cercare e modificare:
Come vediamo dalla mappa, outer-wrapper è il contenitore di tutto il template, cioè, andando a modificare la larghezza (width) di outer-wrapper modifichiamo la larghezza (width) di tutto il template, che contiene l'header-wrapper(intestazione), le colonne laterali(sidebar) + quella centrale(main-wrapper) ed in fondo si trova footer(piè di pagina).
La procedura che seguiremo per modificare il template ed aggiungere la teza colonna è:
1a – header- wrapper
2a – outer- wrapper
3a – duplicare e rinominare la sidebar
4a – footer
5a – ID (identification)
 


Iniziamo...Come prima cosa clicchiamo su “Modifica HTML”.



1 – cerchiamo la voce header-wrapper e aumentiamo la larghezza(width):

prima	dopo
#header-wrapper { width:660px; margin:0 auto 10px; border:2px solid $bordercolor; }	#header-wrapper { width:900px; margin:0 auto 10px; border:1px solid $bordercolor; }

2 - cerchiamo la voce outer-wrapper e aumentiamo la larghezza(width) da 660px in 900px:

prima	dopo
#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align: $startSide; font: $bodyfont; }	#outer-wrapper { width: 900px; margin:0 auto; padding:10px; text-align: $startSide; font: $bodyfont; }

3 – cerchiamo il blocco di codice (vedi sotto), che sarebbe la colonna destra:

sidebar-wrapper .

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking 

sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking 

IE sidebar float */
}

Lo duplichiamo tramite copia/incolla (a - lo selezionate > b- cliccate sopra con il tasto destro del mouse > c – cliccate su copia > d - lo incollate dove finisce il codice appena copiato).

NB: IN CASO DI DUBBI DATE UN OCCHIATA AL VIDETUTORIAL.

Rinominate le due #sidebar-wrapper in #right-sidebar-wrapper(colonna destra) e #left-sidebar-wrapper(colonna sinistra).

Sotto c'è il risultato finale:

#right-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking 

sidebar float in IE */
overflow: hidden;      /* fix for long non-text content 

breaking IE sidebar float */
}

#left-sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking 

sidebar float in IE */
overflow: hidden;      /* fix for long non-text 

content breaking IE sidebar float */
}

Adesso che abbiamo creato una parte del codice delle due colonne, dobbiamo modificare il loro posizionamento destro/sinistro(right/left), modificando semplicemente la proprietà “float”, grazie alla quale possiamo spostare un elemento su uno dei lati (destro o sinistro) del suo elemento contenitore
(outer-wrapper). Sotto c'è il risultato finale:

#right-sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar 

float in IE */
overflow: hidden;      /* fix for long non-text content breaking 

IE sidebar float */
}

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar 

float in IE */
overflow: hidden;      /* fix for long non-text content breaking 

IE sidebar float */
}

Cambiamo anche il posizionamento della float, della colonna centrale “main-wrapper”, modificandola in float: left; Sotto c'è il risultato finale:

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar 

float in IE */
overflow: hidden;     /* fix for long non-text content breaking 

IE sidebar float */
}

Per avere una distanza uguale tra la colonna centrale(main-wrapper) 

con quella destra (right-sidebar) e quella sinistra (left-sidebar) 

dobbiamo inserire i margini(vedi mappa): 
margin-left: 25px; a sinistra per right-sidebar-wrapper 
margin-right: 25px; a destra per left-sidebar-wrapper.
Perché 25px?

#main-wrapper {width: 410px;
+
#left-sidebar-wrapper { width: 220px;
+
#right-sidebar-wrapper { width: 220px;
=
850px
la larghezza del template è 900px
950px – 850px = 50px / 2 = 25px

Sotto c'è il risultato finale:

#right-sidebar-wrapper {
margin-left: 25px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar 

float in IE */
overflow: hidden;      /* fix for long non-text content 

breaking IE sidebar float */
}

#left-sidebar-wrapper {
margin-right: 25px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar 

float in IE */
overflow: hidden;      /* fix for long non-text content breaking 

IE sidebar float */
}

4 – Troviamo la voce footer(piè di pagina) e aumentiamo la larghezza(width):

(come abbiamo fatto con header e outer-wrapper)

prima	dopo
#footer { width:660px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }	#footer { width:900px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; }

5 – Adesso andiamo a modificare ID(identification):

Cerchiamo la stringa sotto:

<div id="'sidebar-wrapper'">

<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">

Cambiamo le due id in blu con id="'right-sidebar-wrapper' e id="'right-sidebar'

Sotto c'è il risultato finale:

<div id="'right-sidebar-wrapper'">

<b:section class="'sidebar'" id="'right-sidebar'" preferred="'yes'">

Copiamo( tasto destro copia/incolla) il codice appena modificato e cerchiamo la stringa:

<div id="content-wrapper">

Subito sotto inseriamo il codice appena copiato, modificando

id="'right-sidebar-wrapper' e id="'right-sidebar' in

id="'left-sidebar-wrapper' e id="'left-sidebar'

Sotto c'è il risultato finale:

<div id="'left-sidebar-wrapper'">

<b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'">

Subito sotto il codice appena modificato inseriamo la chiusura di:
</b:section></div>
che sarebbero la chiusura del blocco section e div.
Sotto c'è il risultato finale e completo:
<div id="'right-sidebar-wrapper'">
<b:section class="'sidebar'" id="'right-sidebar'" preferred="'yes'">
</b:section></div>
Oleeeeeee....con il codice per oggi abbiamo finito...
ah dimenticavo...Salviamo il lavoro cliccando su “SALVA MODELLO”!!
Di solito, dopo aver fatto delle modifiche nel codice html, sarebbbe prudente(io direi obbligatorio), fare un'anteprima, cliccando su “ANTEPRIMA” prima di salvare il lavoro, ma in questo caso non funzionerebbe, in quanto, la colonna sinistra(quella appena creata), non contiene nessun widget(elemento), è vuota.
Ma... pazienza...Adesso andremo ad aggiungere un elemento alla colonna sinistra, cosi possiamo vedere il frutto del nostro lavoro..
6 – Clicchiamo su “Elementi pagina” ed già qui, se avete fatto tutto bene, vedrete il contenitore della colonna sinistra.



7 - Cliccate su “Aggiungi un GADGET”.
Nella finestra appena aperta scegliete un gadget a vostro piacimento(io ho scelto “Newsreel”, le news di google. Cliccando sul link del gadget scelto si apre un'altra finestra dove inseriamo un titolo al widget(non è obbligatorio, potete lasciare vuoto il titolo) e clicchiamo su Salva...
E alla fine cliccate su “Visualizza blog” e godetevi la vostra fatica...
IL videtutorial è completo e spiega in modo chiaro e specifico, tutti i passaggi di questo tutorial nei minimi dettagli. Buona visione.........

Al prossimo tutorial vedremo come aggiungere uno sfondo alle colonne...
Ciauzzzzzzzzzz.....

Articoli correlati per categorie

 Abbonati gratis a questo blog      

Torna Su