Come cambiare lo sfondo alla sezione dei post e alle colonne su Blogger


image In passato ho spiegato come cambiare lo sfondo del blog su Blogger e come inserirlo in un singolo post, ma in molti mi hanno chiesto di estendere questa modifica anche a tutto il corpo centrale del blog (dove si trovano i post per intenderci) o a una singola colonna in particolare, ed eccomi qui ad approfondire l'argomento.

In realtà si tratta solo di cambiare il punto di intervento nel primo post, al quale rimando per maggiori approfondimenti. Ricordo come sempre di eseguire il backup del template, così da poter tornare indietro in caso di disastri.

Scegliere uno sfondo e pubblicarlo in rete

Per prima cosa, dovrete scegliere gli sfondi che volete utilizzare. Consiglio di stare attenti al contrasto con il testo del post o dei widget nella colonna laterale: se il testo è chiaro va scelto uno sfondo scuro, e viceversa. Se dovete ridimensionarlo, potete usare ResizR, di cui ho parlato qualche tempo fa.

Una volta scelte le immagini, dovrete pubblicarle in rete, magari utilizzando strumenti come Skydrive o Imageshack, e recuperarne l'esatto indirizzo.

Cambiare lo sfondo alla sezione dei post

Dalla vostra bacheca, andate in Layout->Modifica HTML e cercate nel template questa riga di codice:

#main-wrapper {

Nei vari template personalizzati potrebbe essere diversa, magari solo

#main {

o:

.main-wrapper {

o ancora:

.main {

In genere la parola main c'è sempre, ma potrebbe essere sostituita dalla parola body. Se proprio non trovate niente di simile, sostituite man mano i vari wrapper che trovate, finchè beccate quello giusto.

Nel caso del template Minima, le righe successive a questa risulteranno essere così:

#main-wrapper {
  width: 410px;
  float: $startSide;
  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 */
  }

Questo codice definisce l'aspetto grafico della parte del blog che contiene i post. Come descritto nel precedente articolo (che vi consiglio di leggere per approfondire tutte le opzioni possibili), inserite la riga che indica lì'immagine di sfondo:

#main-wrapper {
  width: 410px;
  float: $startSide;
  background-image:url(indirizzoimmagine);
  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 */
  }

Sostituendo indirizzoimmagine con l'indirizzo dell'immagine che volete utilizzare come sfondo e che avete pubblicato in rete. Se è già presente una riga con background-image (o semplicemente background ma con l'indirizzo di un'immagine), evidentemente il vostro blog ha già uno sfondo (anche se magari non si nota), e potete modificare quello già presente.

Salvate il blog e visualizzatelo per vedere il nuovo sfondo:

image

Cambiare lo sfondo alle colonne laterali

In questo caso, cambia la riga da cercare:

#sidebar-wrapper {

Anche in questo caso potrebbe essere differente, ma la parola sidebar dovrebbe esserci sempre. Se avete aggiunto la terza colonna seguendo le mie istruzioni, dovreste trovare anche:

#new-sidebar-wrapper {

E tutte le altre sezioni che avete aggiunto seguendo il post di qualche tempo fa.

Trovata la riga di codice iniziale, avrete trovato questa porzione di codice (nel caso di Minima):

#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 */
}

Alla quale aggiungerete la stessa riga aggiunta prima, con tutte le attenzioni e modifiche di cui ho parlato prima:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  background-image:url(indirizzoimmagine);
  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 */
}

Sostituendo anche in questo caso indirizzoimmagine con l'indirizzo dell'immagine che volete utilizzare come sfondo della colonna. Ecco l'effetto che otterrete:

 image

Ovviamente, se lo sfondo rende difficile la lettura del post (come nel mio esempio, d'altronde), potete cambiare colore ai caratteri del blog da Layout->Caratteri e colori:

 image

Per suggerimenti o difficoltà, lasciatemi un commento!

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!

24 commenti:

Andrea ha detto...

fantastico, molto utile! grazie
Andrea

Carlo S. ha detto...

Grazie Tenebrae,
ho risolto a modo mio in malo modo e il risultato non mi soddisfa molto, in effetti, proverò a usare i tuoi suggerimenti (dimenticavo, se vuoi vedere il scadente risultato, vai sul mio blog patente di guida e vedi).
Nb: ho implementato l'effetto neve in un blog di un'altra piattaforma, http://freereturn.myblog.it e funziona perfettamente, domani faccio un post (già fatto, visibile oggi dalle 12.30) dove spiego come fare e ti ho menzionato come autore e linkato, spero sia una cosa gradita.
Ciao, grazie ancora e buona giornata

Iole ha detto...

Ciao Tenebrae,
volevo solo dirti che anch'io ti ho assegnato il Premio Dardos... Quando ho pubblicato il post, ho assegnato il premio a tutti i miei lettori, poi mi sono accorta che mi ero dimenticata di te (scusami!!!) e ti ho aggiunto il giorno dopo.
Ciao,
Iole

V.m ha detto...

grz e' una figata

Tilly ha detto...

Devrò leggere tutto con calma almeno 10 volte ma ho in mente di provare... grazie!!

sempre Fata Bislacca ha detto...

Grazie!!! Come sempre! Anche io dovrò studiarmelo per bene ma hai fatto un gran bel lavoro davvero!!! Un caro saluto a te e signora!!!!

fiore_labs ha detto...

Sei un mitooooooooo!!!
Baciotti
Fiore

Mackos-gnu ha detto...

Scusa se ti disturbo, ma esiste un modo per il quale l'immagine selezionata si ponga solo all'inizio della sidebar, senza essere ripetuta più volte se troppo corta??

Tenebrae ha detto...

@mack: puoi approfondire leggendo questo post, dove spiego come gestire la ripetizione dell'immagine... e altro

Davide ha detto...

Ho scoperto il tuo blog solo 2 mesi orsono ... è semplicemente fantastico ... riesci a far compiere prodezze anche a chi (come me) un genio informatico proprio non lo è!
Sinceramente C O M P L I M E N T I!!

Tenebrae ha detto...

@davide: grazie davide, l'obiettivo è proprio quello ;) a presto!

Anonimo ha detto...

Ciao Tenebrae, come faccio ad aggiungere uno sfondo grigio? devo comunque aggiungere un'immagine lo stesso o posso evitare?
Roberto

Tenebrae ha detto...

@roberto: puoi evitarlo, proprio in settimana farò un post su come colorare le varie sezioni del template... ma controlla che il tuo template non permetta già questa personalizzazione da layout->caratteri e colori

Matteo ha detto...

anche a me servirebbe poter mettere un colore al posto di una immagine nella colonna dei post....

dimenticavo, seguo da tempo il tuo blog ed è veramente fantstico...
COMPLIMENTI!!!

matteo ha detto...
Questo commento è stato eliminato dall'autore.
Matteo ha detto...

sn riuscito a mette un colore al posto dell'immagine
basta metere al posto di background-image:url(indirizzoimmagine);
mettere
background: codice colore

catone ha detto...

Scusa se ti disturbo, ma volendo inserire un'immagine in una colonna e seguendo tutte le tue istruzioni, mi esce una finestra che mi avverte di un errore.
Il punto dove inserire è questo?
#sidebar-wrapper {
margin-$startSide: 2%;
width: 25%;
float: $startSide;
???????????????????????????????????????????????
display: inline; /* fix for doubling margin in IE */
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 */
Come mai la 4° riga html è diversa dalla tua?
Grazie

Dany ha detto...

ciao
avrei una richiesta (non mi pare tu abbia trattato l'argomento) mi piacerebbe che lo sfondo dei post inizi e finisca ad ogni post facendo intravvedere lo sfondo sottostante, ma (per complicarmi e complicarti la vita) inserendo un'immagine che termini lo sfondo del post, ti indico quello che avrei preparato per spiegarmi meglio http://i129.photobucket.com/albums/p229/sdanylavori/sfondogiallofilo.png

ciao e anche se non fosse possibile grazie per la tua disponibilità

Eleonora ha detto...

Ciao avrei bisogno di un aiutino:
volevo mettere un bordo attorno al corpo dei post, Cioè vorrei che il corpo dei post fosse come incorniciato da una linea di colore contrastante al bianco dello sfondo,come posso fare?
Grazie in anticipo e complimenti per il tuo blog, è davvero di grande aiuto :)

Irene ha detto...

Ciao io non metto in dubbio la validità dei tuoi suggerimenti, ma perchè anche se ho seguito tutte le indicazioni passo passo non cambia nulla?????
Grazie Irene

Charlie Paul ha detto...

Salve! Prima di tutto, grazie mille per questi meravigliosi post che mi stanno aiutando tantissimo nella creazione del mio blog!
Volevo chiederti se è possibile aggiungere due immagini nella colonna, e se sì come fare!
Grazie Mille ancora!

Tosky ha detto...

Ho un problema, l'immagine si mette come sfondo.. ma solo in una parte.. come la faccio ripetere?

Tenebrae ha detto...

@tosky: se leggi il primo post che ho linkato, lì spiego come gestire la ripetizione delle immagini

Francesca Moggi ha detto...

Ciao, molto bello il tuo sito.
Vorrei sapere se lo stesso metodo qui illustrato di può utilizzare per modificare il colore di sfondo dei post. Tanto per capirci io uso blogger ma non è previsto nel mio template che lo sfondo dietro la colonna centrale sia trasparente, mentre ho potuto sceglierlo per le colonne laterali lì invece rimane bianco e non riesco a cambiarlo. Ho cercato anche qui come fare ma non ci sono saltata fuori. Considera che sono mooooooooooolto principiante :-)))
Grazie


Prima di lasciare un commento, leggete qui

Posta un commento