3 marzo 2011

CAMBIARE SFONDO AL BLOG...

Cambiare lo sfondo ci permette di personalizzare una volta di più, le nostre pagine. Per far questo, occorre, andare a modificare il codice HTML del nostro blog, pertanto, onde evitare di fare errori e di perdere tutto, vi consiglio di salvare una copia del vostro attuale template andando in Design "MODIFICA HTML" alla voce "scarica modello completo". E adesso, andiamo giù, nei codici del modello e cerchiamo la dicitura: 

body { 
  background:$bgcolor; 
  margin:0px; 
  padding: 0; 
  color:$textcolor; 
  font:x-small Helvetica sans-serif;  
  font-size/* */:/**/small; 
  font-size: /**/small; 
  }

Adesso aggiungete questa riga background-image:url(indirizzo dell'immagine); Ottenendo questo: 

body { 
  background:$bgcolor;
  background-image:url(indirizzo dell'immagine);
  margin:0px; 
  padding: 0; 
  color:$textcolor; 
  font:x-small Helvetica sans-serif;  
  font-size/* */:/**/small; 
  font-size: /**/small; 
  }

Dove leggete (indirizzo dell'immagine) si andrà ad inserire l'url dell'immagine che avete scelto per il vostro sfondo. (Consiglio sempre di hostare le immagini con www.imgur.com) ma per questa operazione,  occorre prelevare la riga  Direct Link (email & IM)  riportata sopra  il codice che preleviamo per visualizzare le immagini. Esempio:  http://i.imgur.com/qDcThjK.jpg  che andremo ad incollare dentro le parentesi. Per centrare l'immagine  aggiungete questa riga:
 background-position: center top; 
(suggerisco un 'immagine che abbia le dimensioni del template, altrimenti si visualizzerà in alto, centrata, ma non occuperà tutta la pagina, qualora fosse questa la vostra preferenza)
 Esempio: 

body { 
  background:$bgcolor;
  background-image:url(indirizzo dell'immagine);
  background-position: center top;
  margin:0px; 
  padding: 0; 
  color:$textcolor; 
  font:x-small Helvetica sans-serif;  
  font-size/* */:/**/small; 
  font-size: /**/small; 
  }

Se preferite un immagine che si ripeta, come uno sfondo astratto, glitter,etc... ignorate questo passaggio, perchè, in automatico, l'immagine si presenterà ripetuta. Altrimenti aggiungete:
 background-repeat:no-repeat;
Esempio:
body { 
  background:$bgcolor;
  background-image:url(indirizzo dell'immagine);
  background-repeat:no-repeat;
  background-position: center top;
  margin:0px; 
  padding: 0; 
  color:$textcolor; 
  font:x-small Helvetica sans-serif;  

Fatto questo, vi ritroverete l'immagine fissa che scorre insieme alla pagina, ma se desiderate che la pagina scorra, sul fondo statico, dovete aggiungere: 
background-attachment: fixed;
Come riportato sotto


body { 
  background:$bgcolor;
  background-image:url(indirizzo dell'immagine);
  background-repeat:no-repeat;
  background-position: center top;
  background-attachment: fixed;
  margin:0px; 
  padding: 0; 
  color:$textcolor; 
  font:x-small Helvetica sans-serif;  
  font-size/* */:/**/small; 
  font-size: /**/small; 
  }

A questo punto abbiamo il codice completo. Ricapitolando... Le righe riportate su, ci consentono di ottenere uno sfondo statico, che ritrae un immagine unica e centrale. Se altrimenti, desiderate uno sfondo astratto che si ripeta (ho aggiunto l'url di un immagine per fare  l'esempio, provate!) basta copiare ed incollare questo:

body { 
  background:$bgcolor;
  background-image:url(http://i.imgur.com/6dHWY.gif);
  
background-attachment: fixed;
  margin:0px; 
  padding: 0; 
  color:$textcolor; 
  font:x-small Helvetica sans-serif;  
  font-size/* */:/**/small; 
  font-size: /**/small; 
  }

Adesso, non vi resta che salvare il modello!

NB: 
Visualizzate l'anteprima, e non salvate il modello, finchè non avete trovato la soluzione e lo sfondo che più vi piace!