Pubblicato il 12/08/09 - aggiornato il  | 9 commenti :

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.


9 commenti :

  1. Premesso che io non ne so niente di html e che sono cmq riuscita a mettere lo sfondo ai titoli della sidebar, tu sei un genio!!! Un solo problema: io vorrei questo sfondo solo nella sidebar e non nella data o nei widget a piè di pagina. Come posso fare? Grazie.
    http://www.ritroviamociincucina.blogspot.com/

    RispondiElimina
  2. @Ritroviamoci in cucina
    Dovresti modificare il codice del colore solo nel blocco che riguarda la sidebar che dovrebbe iniziare con una cosa simile

    .sidebar h2 {

    sempre che nel tuo modello tali blocchi siano separati.

    RispondiElimina
  3. ho fatto proprio così, ma li modifica in blocco :o( quindi non c'è soluzione?

    RispondiElimina
  4. Ciao! Posso chiederti se è possibile inserire un'immagine di sfondo sotto la data? Tipo che ne so, un nastro rettangolare..cmq una piccola immagine di sfondo invece di un semplice colore? Tks mille

    RispondiElimina
    Risposte
    1. @Cristinabw
      leggiti questo post
      http://www.ideepercomputeredinternet.com/2010/10/come-nascondere-la-data-degli-articoli.html
      E' indicato il blocco di codice della data. Può differire un po' da modello a modello però ci deve essere per forza h2
      Per inserire una immagine di sfondo potresti aggiungere un rigo dopo la parentesi graffa di apertura in questo modo
      background: transparent url(URL_IMMAGINE) no-repeat;
      dove transparent può anche essere tolto.
      P.S. Non ho testato quindi non so se funzionerà.

      Elimina
    2. Grazie Ernesto! ho provato a fare quel che mi dici e il nastrino mi appare al lato della data.. non come sfondo :(

      Elimina
  5. io ho trovato questo codice :


    dove inserisco la porzione di codice da te indicata per cambiare lo sfondo dei titoli della sidebar( widget)
    grazie!

    RispondiElimina
  6. @Cristinabw
    @Caterina
    Da quando ho scritto questo post il codice di Blogger è cambiato molto e probabilmente non funziona più. Magari potrei ritornare su questo argomento con un altro post (senza impegno...)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy