Thisaway Rose a 3 colonne


imageL’articolo su come aggiungere la terza colonna al proprio template è sempre stato tra i più apprezzati e letti, e molti si sono lanciati con successo in questa modifica. Purtroppo però ogni template ha una storia a sè, e persino quelli predefiniti di Blogger non sfuggono a questa regola negativa. Alcuni tra l’altro hanno anche elementi grafici che “allargando” il layout non sono più adatti, rendendo quindi impossibile la modifica.

Appartengono a quest’ultima categoria i template Thisaway, in particolare molti mi hanno sempre scritto di avere difficoltà col Thisaway Rose (evidentemente più usato degli altri). Annalisa è stata l’ultima a chiedermelo, e le avevo promesso un articolo apposta per rispondere a tutti.

Ed eccomi, con un po’ di ritardo come sempre, a mantenere la promessa.

Rendiamo il Thisaway Rose a 3 colonne

Ovviamente raccomando come sempre di fare prima il backup del template di Blogger, e magari di fare prima le modifiche in un blog di prova. Quello che andremo a fare non intaccherà le modifiche già esistenti che avrete fatto nel template, ma può sempre capitare di sbagliare un copia e incolla.

Passo 1

Andiamo in Layout->Modifica HTML e selezioniamo “Espandi i modelli widget”. Cerchiamo questa porzione di codice:

min-width: 760px;


e cambiamolo in:



min-width: 987px;


Passo 2



Cerchiamo questo codice:



#outer-wrapper {
margin: 0 auto;
width: 760px;


e cambiamo anche qui 760 in 987:



#outer-wrapper {
margin: 0 auto;
width: 987px;


Passo 3



Cerchiamo:



#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif)


e cambiamo così:



#content-wrapper {
position: relative;
width: 987px;
background: #f7f0e9 url(http://lh3.ggpht.com/_kGm61wbohAY/Sm4Gmkx2zgI/AAAAAAAAEDc/8sf_F-ijIZE/bg_main_wrapper_2.gif)


Passo 4



#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px;


diventa:



#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 247px;


Passo 5



#sidebar {
padding-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 179px 0;


diventa:



#sidebar {
padding-top: 7px;
padding-$endSide: 11px;
padding-bottom: 0;
padding-$startSide: 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 159px 0;


Passo 6



Cerchiamo:



#sidebar .widget {
margin-bottom: 20px;
}


E subito sotto incolliamo queste righe:



#newsidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: left;
margin: 0 0 0 3px;
width: 247px;
color: $textColor;
line-height: 1.4em;
font-size: 90%;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar.gif) repeat-x left top;
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 */
}

#newsidebar {
padding: 7px 11px 0 14px;
background: url(http://www.blogblog.com/thisaway_rose/bg_sidebar_arrow.gif) repeat-y 159px 0;
}
#newsidebar .widget {
margin-bottom: 20px;
}


Passo 7



Cerchiamo:



#header-wrapper { 
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_header_bottom.gif) no-repeat $startSide bottom;
}


e modifichiamolo così:



#header-wrapper { 
padding-bottom: 15px;
background: url(http://lh4.ggpht.com/_kGm61wbohAY/Sm4GmrPTpBI/AAAAAAAAEDY/GGMA_jmUyzY/bg_header_bottom_2.gif) no-repeat $startSide bottom;
}


Passo 8



#footer-wrapper { 
padding-top: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_footer_top.gif) no-repeat $startSide top;
clear: both;
}


diventa:



#footer-wrapper { 
padding-top: 15px;
background: url(http://lh3.ggpht.com/_kGm61wbohAY/Sm4Gmw3VppI/AAAAAAAAEDg/oKBG-gKgw_8/bg_footer_top_2.gif) no-repeat $startSide top;
clear: both;
}


Passo 9



Cerchiamo queste righe di codice:



body#layout #main,
body#layout #sidebar {


E aggiungiamo la parte in rosso (attenzione alla virgola):



body#layout #main,
body#layout #sidebar,
body#layout #newsidebar
{


Passo 10 (l’ultimo!)



Cercate questa riga:



<div id='main-wrapper'>


Subito sopra incollate:



  <div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>



Finito!



A questo punto potete salvare il template e potrete visualizzare il vostro nuovo blog a 3 colonne:



image



Per scrivere quest’articolo ho preso spunto da questo post di Tips for New Bloggers: purtroppo il codice di esempio fornito poteva dare qualche problema e ho riscritto qui le istruzioni da seguire, tuttavia ho riutilizzato gli stessi elementi grafici.



Per qualsiasi problema, lasciatemi un commento e vedremo di risolverlo.


Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

21 commenti:

AUTOdiMERDA ha detto...

...Annalì.. e cambiare template no eh??!! :D

Ana ha detto...

please a widget for the translation! thank you

Daniela ha detto...

bravissimo come sempre...
baci

Annelise ha detto...

GRAZIEEE inizio subito,
vi terrò informati sull'andamento della modifica!
;)

Ylenia ha detto...
Questo commento è stato eliminato dall'autore.
Annelise ha detto...

Mai spiegazione è stata così semplice e chiara, sono riuscita FINALMENTE a creare le tre colonne nel ns blog!
GRAZIE GRAZIE GRAZIE
Orazio per il grande aiuto!!!
santo subito
;)

Calliope ha detto...

Ma che bravo che sei!!!

Io avevo minima a due colonne e l'ho cambiato in tre modificando anche i parametri di larghezza ed accostamenti ed il blog risulta ben armonico ma..in privato, quando sono in Personalizza..non risulta per niente armonico!!

C'è la colonna di sinistra, appena termina la colonna c'è il corpo centrale, il post e poi la colonna di destra....è normale?
0__0

Sei un mito ^_^ grazie a te mi sento informatica!!!

Consulenza psicologica online ha detto...

Ti rifaccio la domanda: Potresti darmi qualche consiglio su come cambiare la dicitura "unisciti a questo sito", su friend connect trasformandola in "Segui"?

Grazie per la risposta
Francesco

lella ha detto...

Ciao Orazio,come va?
spero tt bene.......
volevo kiederti una cosa:ho fatto x la prima volta il backup del blog.
Quando lo aggiornerò,fra qualke tempo,devo cancellare quello vekkio o aggiunge solo gli elementi mancanti?
Un bacione a Mary
Lella

Tenebrae ha detto...

@ana: good idea, i'll put a translation widget on this blog as soon as possible

@annalisa: perfetto!

@calliope: da qualche parte (credo dove spiego come allargare il template) ho aggiunto un post scriptum in cui spiego come risolvere questo genere di problemi, l'hai visto?

@consulenza psicologia: tranquillo, ti avrei risposto anche nell'altro commento :) no, il widget non permette personalizzazioni di questo tipo

@lella: ciao lella!! il backup del blog è sempre completo, quindi puoi cancellare quello vecchio

Manu ha detto...

Ciao volevo per prima cosa farti i complimenti per il tuo blog veramente molto istruttivo e chiarissimo nelle spiegazioni

Ho inserito molte modifiche nel blog seguendo i tuoi consigli
ieri finalmente sono riuscita ad allargare le colonne avvicinandole ed eliminando anche una riga di bordo che mi segnava sempre la larghezza precedente

non riesco però a spostare il bordo arrotondato alla nuova larghezza
ho provato in vari modi riesco ad eliminarlo, a spostarlo più a sinistra ma non all'estrema destra dove dovrebbe andare

il mio blog è
http://profumiecolori.blogspot.com/

probabilmente mi perdo in un bicchiere d'acqua, ma se riesci a darmi una dritta ti ringrazio

Grazie ;))
salutoni Manu

Tenebrae ha detto...

@manu: no manu, non ti perdi in un bicchier d'acqua, già hai fatto un ottimo lavoro col rounders, che è antipatico come template

i bordi arrotondati sono immagini: dovresti recuperarle nel codice, modificarle, pubblicarle per conto tuo e sostituire l'indirizzo nel template

sappi comunque che è tra i template a cui dedicherò un post come questo

Manu ha detto...

Grazie mille della tua cortesissima risposta
certamente proverò a fare come mi hai suggerito ti terrò d'occhio per non perdermi il post

grazie e buona serata
;;) Manu

S.S. Adriatica ha detto...

Ciao! sei stato utilissimo! però c'é un piccolo problema: io ho usato la procedura per aggiungere la terza colonna ma ho il thisaway blue! quindi la colonna di destra é rimasta blu ma quella di sinistra é rosa. L'aspetto ne risente un pò e vorrei anche la colonna di sinistra in blu, come faccio?
grazie mille!!

Tenebrae ha detto...

@SS adriatica: nell'articolo originale che ho linkato in fondo al post, trovai le istruzioni e la grafica per modificare il thisaway blue

cerca di recuperare solo gli elementi grafici

altrimenti puoi scaricare quello pubblicato qui e vedere se funziona in un blog di prova

Cinzia ha detto...

Ciao, ho scoperto da poco questo utilissimo blog e grazie ai tuoi consigli e suggerimenti sono riuscita a mettere in pratica qualche idea per rendere più simpatico il mio blog, cosa che credevo impossibile per una negata come me in queste cose!!!
C'è solo una cosa che finora prorio non mi riesce, mettere la terza colonna. Ci ho provato, ho fatto tutto quello che hai suggerito anche nell'altro post ma la colonna me la mette sempre a sinistra, spostandomi la colonna dei post a destra!! Potresti darmi una mano per capire come fare? Te ne sarei veramente grata! Questo è il blog : http://macondoespress.blogspot.com/ razie mille in anticipo!!!

LaSusina ha detto...

Ehm.... non trovo il primo codice!!!
Come fate a trovarli, scorrete e li leggete tutti???

Giulia ha detto...

grazissimissime!
:-*

Giulia ha detto...

e ora al lato delle colonne di destra e sinistra si vede un rosino che vorrei cambiare, come si fa?

Rayna ha detto...

Funziona! L'ho provato sul blog di Prova, ora penso di modificare quello ufficiale.
1 domanda: come posso cambiare il colore dello sfondo nella parte più esterna del template?
Grazie, buona giornata

Elena ha detto...

trovo questo blog interessantissimo e molto utile e sto muovendo i primi passi per cambiare un poco il mio pur rimanendo con il mio vecchio template che adoro. Che non ricordo poi come si chiama. vuoi dare un'occhiata? www.lamontagnaincantata.blogspot.com e la modifica fatta dopo avere letto il tuo post su come aggiungere la terza colonna
www.blogprovadielena.blogspot.com.
A proposito, con il mio template posso mettere la colonna del post centrale??? Ti abbraccio
Elena


Prima di lasciare un commento, leggete qui

Posta un commento