Thisaway Rose a 3 colonne

L’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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-rJq60COdTvXCRHeeW-LwL-XaXzg4zA0PwBJsYrJVDW9v6sZGRRM5S4gEbbtTC-1J_ghLdc74x4xH3fk3hFMZsSKTj6HT7rPeY8x5XadDV3UAxtfvz1AblwWyQhigckxTzYiP3d6-OLU/)  

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIwzDfHriu5IIg-vQ3HkEWzuIJEa6JaztNorhE4LiIlUkdK2nuiH9VToGpQLher_JGAJwlAQwEnrh_j6asYyZUzCk_a7jl748PdtxR8N7TI4r7LOdZAOChXVrxkI3TU1UO4Sgugi9FwK0/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizj5qmox_9dcrT4HYsTTpzycVdk5vqYyRiaRVNxXzdRGGNiVSf85RnUNiZgQQlAPpU_HkkFDcYMISGTlYgnglc6FZ0usXBqDK5QyO5w1HgHELfRO3xDzbwnt-K_OVtbl_zRmcmKc1_nUA/) 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:

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:

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!