Come modificare il colore di sfondo di tutte le pagine statiche o il background di una soltanto.

In occasione della prossima festività di Tutti i Santi, seguita dalla giornata dedicata al ricordo dei defunti, e preceduta dalla notte di Halloween che non fa parte della nostra cultura ma che è ormai entrata in pianta stabile delle nostre tradizioni, mi sono dato un po' da fare per creare qualcosa di originale da inserire nel blog per l'occasione quali fiamme infernali, fantasmi e grida dell'altro mondo.

Dedicherò a queste personalizzazioni diversi articoli ognuno specifico per un singolo effetto inserito. Comincio da una modifica del template che mi serve per rendere esteticamente migliori le personalizzazioni inserite modificando il background della pagina statica di demo. Si tratta comunque di un hack generico che può essere utilizzato anche in altre circostanze. Parto da due articoli che ho scritto in passato per la personalizzazione delle pagine statiche

1. Come togliere le sidebar dalle pagine statiche (vecchi modelli) -
2. Come eliminare le sidebar dalle pagine statiche (template del Designer Modelli)-

In entrambi i casi si inseriscono dei fogli di stile prima della riga </head> in Modello > Modifica HTML > Procedi. Si utilizzano i tag condizionali per attivare i CSS solo nelle pagine statiche. Se si vuole modificare anche il colore dello sfondo e necessariamente anche il colore del testo occorre modificare il codice così

Vecchi modelli

<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{width: 130%;}
body {background-color:#111111;
     color:#FFFFFF;
}
</style>

dove i parametri in rosso rappresentano la larghezza in percentuale del layout, il colore di sfondo e quello del testo.

Nuovi modelli

#main {
width: 880px; /* Larghezza totale del blog */
background-color:#111111;
color:#FFFFFF;
}

anche in questo caso i parametri in rosso hanno lo stesso significato e possono essere ovviamente modificati. Leggi il post sui codici dei colori.

 

Caso di personalizzazione di una sola pagina statica

Se vogliamo modificare una sola pagina statica e lasciare tutte le altre intatte, sempre facendo riferimento ai post linkati all'inizio, si dovrà sostituire la riga

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

con quella

<b:if cond='data:blog.url == &quot;URL-PAGINA-STATICA&quot;'>

e questo sia per i vecchi template sia per quelli del Designer Modelli. Al posto di URL-PAGINA-STATICA si inserisce ovviamente l'indirizzo della pagina da personalizzare. Possiamo eliminare le sidebar oppure modificarne anche lo sfondo.

Come togliere le sidebar da tutte le pagine statiche ma cambiare lo sfondo in una soltanto

Per prima cosa si pubblica la pagina andando su Design > Pagine > Nuova pagina > Pagina vuota. Dopo la pubblicazione, il suo indirizzo sarà visibile nella barra del browser e sarà del tipo http://nomeblog.blogspot.com/p/titolopagina.html. Si seguono le istruzioni dei due post precedenti per personalizzare tutte le pagine statiche ma in questo caso si inserisce una condizione ulteriore all'inizio del codice

<b:if cond='data:blog.url != &quot;URL-PAGINA-STATICA&quot;'>

e la sua chiusura </b:if> alla fine. In sostanza sia nei vecchi sia nei nuovi modelli viene fuori una cosa di questo tipo

<b:if cond='data:blog.url != &quot;URL-PAGINA-STATICA&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

. . . . .     . . . .

</b:if>
</b:if>

Questo CSS sarà applicato a tutte le pagine statiche con l'eccezione di quella a cui vogliamo modificare lo sfondo. Per quella pagina specifica alla fine di questo codice ne dovrà essere inserito un altro che modifichi lo sfondo. Eccone un esempio di codice complessivo per i vecchi modelli

<!-- STILE PAGINE STATICHE INIZIO -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:blog.url != &quot;http://demo-parsifal32.blogspot.com/p/halloween.html&quot;'>
<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{width: 130%;}
</style>
</b:if>
</b:if>
<!-- STILE PAGINE STATICHE FINE -->
<!-- Halloween Inizio -->
<b:if cond='data:blog.url == &quot;http://demo-parsifal32.blogspot.com/p/halloween.html&quot;'>
<style type='text/css'>
#sidebar-wrapper{display:none;}
#main-wrapper{width: 130%;}
body {background-color:#111111;
     color:#FFFFFF;
}
</style>
</b:if>
<!-- Halloween Fine -->

Ho inserito come mia abitudine anche i commenti ( <!-- Commento --> ) che non incidono nel modello ma sono una descrizione del codice in modo da rendere più agevoli successive modifiche o soppressioni. L'URL colorato di viola rappresenta una pagina di dimostrazione. Se si ha un modello nuovo si può sostituire

#main-wrapper{width: 130%;}
body {background-color:#111111;
color:#FFFFFF;
}

con

#main {
width: 880px; /* Larghezza totale del blog */
background-color:#111111;
color:#FFFFFF;
}

Ho pubblicato in rete una demo di una pagina statica con uno sfondo diverso dalle altre pagine statiche dello stesso blog.