Come cambiare il colore di sfondo (background) ai titoli della sidebar e della data in Blogger.

Come cambiare lo sfondo ai titoli dei widget in Blogger

I lettori più affezionati di questo blog, che non leggono solo i feed, si saranno accorti della colorazione apparsa nei background dei titoli dei widget e della data. Ho utilizzato come colore di sottofondo quello con il codice #FDBCB7 che è anche lo stesso che appare nel menù espandibile. 

Ovviamente può essere scelto un colore a piacere che si intoni con gli altri presenti nel blog.

Andare su Layout > Modifica HTML e cercate il blocco di codice che comincia con

.sidebar h2 {

Dovreste trovare una cosa di questo tipo:

.sidebar h2 {
font-weight:bold;
font-size: 150%;
color: $sidebarTitleColor;
padding: 2px 5px 2px 15px;
 background-color: #FDBCB7;
 }

dove la riga colorata di rosso è proprio quella che è stata aggiunta per ottenere questo effetto e il codice del colore, colorato di blu, deve essere personalizzato. Se avete già una riga con background-color potete anche cambiarlo con un altro di maggior gradimento. In questo caso però il cambiamento in genere è possibile farlo andando su Layout > Caratteri e Colori.



In questo blog sono state aggiunte tre colonne nella parte bassa. Nei fogli di stile che determinano il loro aspetto mancava la parte relativa al titolo dei widget inseriti. Per inserire un background occorre dunque crearla ex-novo. E’ piuttosto semplice e il metodo specificato può tranquillamente essere esteso ad un altro template in cui manca quella parte di codice. Per ciascuna colonna è presente infatti solo questo codice


.column1 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px;
text-align: left;
} 


Per inserire anche i dati riguardo al titolo basta inserire il codice colorato di rosso sotto ciascuno dei tre blocchi

.column1 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px;
text-align: left;
} .column1 h2{
background-color: #FDBCB7;
padding: 2px 2px 2px 10px;
 }


Dove il codice in blu deve essere personalizzato. Ho anche aggiunto la riga padding che determina la posizione del titolo dentro il sottofondo colorato. I pixel sono quelli che determinano la distanza e partono dalla parte alta e, in senso orario, arrivano alla parte sinistra. Ho infatti inserito un 10px per non far iniziare il titolo troppo a ridosso della riga rosa.


Per completare questa personalizzazione bisognerebbe inserire anche la data dentro un sottofondo dello stesso colore. Questo vale naturalmente solo per i blog che hanno la data posta in posizione orizzontale sopra il titolo dell’articolo.


Si va su Layout > Modifica HTML e si cerca questa riga di codice

h2.date-header {

Ricordo che per cercare una riga di codice in un modello basta cliccare su F3 oppure su Ctrl+F ed inserire nella casella che si apre la riga da cercare; automaticamente sarà visualizzata evidenziata di verde. Questo vale con tutti i browser anche se ci possono essere delle modalità diverse di inserimento e visualizzazione. Per ulteriori informazioni leggi quest’articolo.

Troverete un codice di questo tipo

h2.date-header {
border-bottom:none;
font-size: 150%;
text-align:$startSide;
margin-top:20px;
margin-bottom:14px;
padding:1px;
padding-$startSide:17px;
color: $dateHeaderColor;
font-weight: bold;
font-family: Trebuchet MS, Verdana, Sans-serif; background-color: #FDBCB7;
 } 

dove dovrete aggiungere la riga colorata di rosso con il colore che preferite al posto di quello colorato di blu; se non conoscete la corrispondenza tra sestine esadecimali e colori vi consiglio di leggere l’articolo sui codici dei colori.