Come cambiare il colore di sfondo dei blog su Blogger nella versione mobile.

Come modificare il colore di background della versione mobile di un blog su Blogger mantenedo inalterato quello della normale versione web.

Nel precedente articolo abbiamo visto come si possa personalizzare anche la versione mobile di Blogger continuando a mantenerla Mobile Friendly. Qualche giorno fa in un commento mi è stata fatta la domanda se fosse possibile modificare il colore dello sfondo della versione mobile di Blogger.  Vediamo come si possa fare e come questa procedura possa essere anche di esempio per fare altre modifiche operando sui CSS del template per quello che riguarda il mobile.

Ricordo che su Blogger la versione mobile viene attivata da Modello > Cellulare scegliendo uno dei template classici oppure selezionando Personalizza per avere un aspetto da mobile il più possibile simile alla versione web da desktop. Tale versione introduce un "URL supplementare" per tutti gli indirizzi del blog. In sostanza viene aggiunto all'URL di un post, della homepage o delle pagine di etichette e di archivio la stringa ?m=1.  Anche con un browser desktop si può testare come si vede un post del blog da mobile modificando appunto l'URL con questa aggiunta. 

Però per avere una idea molto più precisa di come si visualizza il sito da mobile, con diverse risoluzioni e selezionando il modello desiderato di tablet o di smartphone, dobbiamo usare un servizio come Screenfly. Si incolla un URL con  ?m=1 e si controlla come si vede da mobile

 

CAMBIARE COLORE DI SFONDO NELLA VERSIONE MOBILE

Vediamo nel dettaglio come modificare il colore di sfondo del blog limitatamente alla versione mobile. Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sulla freccetta nera intorno alla 13-esima riga per visualizzare tutto il codice della sezione <b:skin>. Se si cerca con Ctrl+F  questo blocco codice e si prova a modificarlo 

body.mobile  {
   background-size: $(mobile.background.size);
}

ho testato che per qualche ragione che non ho compreso non muta nulla. Dobbiamo quindi scendere più in basso e operare nello sfondo dei singoli post. A questo codice

.mobile .post {
  margin: 0;
}

si aggiunge una riga simile a questa

.mobile .post {
background-color:#0FF !important;
  margin: 0;
}

dove il codice del colore può essere ovviamente personalizzato. Se si salva il modello l'aspetto del blog da dispositivi mobili muterà in questo modo  

Se si controlla però la visualizzazione della Home da mobile lo sfondo sarà immutato. Scendiamo allora ancora più in basso e concentriamoci sul blocco di codice 

.mobile .main-inner, .mobile .footer-inner {
  background-color: $(content.background.color);
}

e aggiungiamoci la stessa riga per lo sfondo in questo modo 

.mobile .main-inner, .mobile .footer-inner {
  background-color:#0FF !important;
  background-color: $(content.background.color);
}

Dopo aver salvato il modello anche la home avrà lo sfondo desiderato su mobile

Questo succederà anche per le pagine di Etichette e di Archivio. Rimane fuori dallo sfondo l'Header che in genere è però coperto da una immagine. Se si vuole modificare il colore di sfondo anche della Intestazione dobbiamo aggiungere un blocco di codice ex novo dopo la chiusura di una parentesi graffa }

.mobile .header-outer {
background-color:#0ff !important; 
}

Se poi si vuole avere anche lo stesso sfondo nella barra orizzontale del menù delle pagine statiche bisogna aggiungere la stessa riga

background-color:#0ff !important;

subito sotto al CSS 

.mobile .tabs-inner .PageList .widget-content {

Il risultato sarà il seguente

Operando sugli stessi blocchi di codice aggiungendo nuove righe si possono anche modificare solo da mobile altre impostazioni come la famiglia di font, il colore dei caratteri o le loro dimensioni. Ho preferito utilizzare il tag !important insieme all'aggiunta di nuove righe che definissero il colore di sfondo e che potessero essere incollate nel codice senza cancellare le altre. In questo modo basterà eliminarle per ritornare alla situazione precedente.