Pubblicato il 14/10/12e aggiornato il

Come cambiare il colore del titolo del post.

Come cambiare colore del titolo del post e del numero dei commenti in Blogger.
In un blog di Blogger, se apriamo la homepage, i titoli dei singoli articoli avranno il colore che si è configurato per i link su Modello > Personalizza > Avanzato. Questo perché  in tutti è presente un collegamento per aprire il post. Quando quest'ultimo però viene visualizzato, in molti modelli ufficiali di Blogger, il titolo cambia di colore e diventa uguale a quello del testo degli articoli.

La ragione di questo comportamento risiede nel fatto che nel CSS che definisce il titolo del post spesso non ne viene indicato il colore. La classe di stile che determina l'aspetto del titolo dell'articolo è in genere unificata a quella dei commenti. Alla fine di ogni post c'è infatti una scritta X Commenti o Posta un commento che spesso ha lo stesso aspetto del titolo del post e del testo dell'articolo.

Se andiamo su Modello > Modifica HTML > Procedi e cerchiamo la riga h3.post-title che è quella che ci interessa, per esempio nel template Semplice troviamo questo codice

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

Come vedete oltre h3.post-title è inserita dopo la virgola anche la classe .comment h4 affinché Titolo del post e Numero dei commenti abbiano lo stesso aspetto. Come vedete sono definiti la famiglia dei font e i margini ma non il suo colore.  Possiamo selezionare un codice di colore che ci piace e inserire la relativa riga nel blocco di codice precedente in questo modo

h3.post-title, .comments h4 {
  color:#d84938;
  font: $(post.title.font);
  margin: .75em 0 0;
}

Il codice esadecimale nella riga colorata di rosso può naturalmente essere scelto a piacere. Dopo aver salvato il modello i titoli dei post assumeranno quel colore così come il numero dei commenti. Se volessimo avere due colori diversi per titolo e commenti, potremo per esempio sostituire il primo codice con due blocchi di questo genere

h3.post-title {
color:#d84938;
font: $(post.title.font);
margin: .75em 0 0;
}
.comments h4 {
color:#003366;
font: $(post.title.font);
margin: .75em 0 0;
}

dove le righe in rosso possono essere personalizzate a piacere.




9 commenti :

  1. Risposte
    1. Il post è del 2012. Il codice probabilmente è cambiato e forse tu hai un modello scaricato da internet. Puoi trovare da sola il selettore del tuo modello che forse è diverso da h3.post-title. Segui questo post
      http://www.ideepercomputeredinternet.com/2013/05/selettori-css-chrome-firefox.html
      @#

      Elimina
    2. Ciao Ernesto, io ho il modello simple di blogger ma ti confermo che il codice non funziona...sai aiutarmi per favore? Grazie :)

      Elimina
    3. Hai quasi 20 blog, come faccio a sapere qual'è quello in cui vuoi cambiare il colore del titolo?
      @#

      Elimina
  2. Ciao Ernesto, ti scrivo per chiederti una cosa alla quale non vengo a capo, riguardante il post-title.
    Io vorrei che il mio titolo apparisse in full width nonostante il sidebar destro.
    La mia domanda è: devo creare un blog ad una colonna e aggiungere un sidebar o c'è un modo più rapido?
    Ti metto l'esempio che vorrei ottenere, così mi spiego meglio: http://www.jolieidee.com/marsala-come-abbinarlo-makeup-e-outfit/

    scusa se ti scrivo qui sotto, ma non sapevo dove scrivere per rimanere in argomento .post-title.
    Ti ringrazio anticipatamente per la disponibilità!

    RispondiElimina
    Risposte
    1. A prima vista mi sembra una cosa piuttosto complicata. Ho salvato la pagina. Se ho tempo vedo di dare una occhiata più approfondita (senza impegno)
      @#

      Elimina
    2. Come non detto. Si tratta di un sito su piattaforma Wordpress con Tema SimpleMag non applicabile a Blogger
      http://themeforest.net/item/simplemag-magazine-theme-for-creative-stuff/4923427
      @#

      Elimina
    3. Ok nessun problema! Grazie mille.

      Elimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.