22 ottobre 2011

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

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




29 commenti :

  1. Grazie!!! Non avevo il coraggio di chiederti se mettevi qualche effetto per queste occasioni, come già fatto per il Natale e la Pasqua :)

    RispondiElimina
  2. Innanzitutto grazie e complimenti per queste modifiche, stavo cercando proprio qualcosa del genere per cambiare lo sfondo di una sola pagina e noto anche che c'è la possibilità di eliminare anche la sidebar, ottimo Parsifal.
    Chiariscimi un paio di cose perfavore:
    - Per vecchi modelli e nuovi cosa intendi?
    - Io ho un unico CSS esterno, come posso utilizzare i tag condizionali in questo caso?

    RispondiElimina
  3. @auto ...
    Per vecchi modelli intendo quelli ufficiali di Blogger prima dell'avvento del Designer Modelli, per nuovi modelli quelli appuntto del designer (non quelli Dynamic Views!)
    Anche se hai un CSS esterno se metti le righe di codice prima di /b:skin
    dovrebbe funzionare lo stesso.

    RispondiElimina
  4. Ernesto, ti devo fare un monumento. Dopo 3 anni che ho il blog finalmente grazie a questo tuo post posso affermare che il mio blog è diventato un sito :)

    Con la personalizzazione applicata nel mio caso ad una singola pagina (per sfruttare la velocità di WLW che non modifica la pagina statica)
    e le funzioni display:none praticamente ho il blog in pugno eheheh

    Davvero infintie grazie, ti devo una cena. (il codice andava prima di tutto il b:skin).
    Se ti va puoi guardare la pagina, ancora in lavorazione, che praticamente non ha nessun tipo di widget e footer rispetto al blog.
    http://autodimerda.blogspot.com/2011/09/wallpaper.html

    Paolo

    RispondiElimina
  5. Aggiornamento.
    Ho potuto inserire le modifiche sostanziali direttamente dove già avevo un condizionale di label in modo da evitare duplicazioni inutili. Confermo cena (senza monumento però tanto poi arrivano i black block) :)

    RispondiElimina
  6. @auto ...
    Vada per la cena ;). Però ho appena finito di mangiare e non sento tanto interesse per il cibo in questo momento ^_^

    RispondiElimina
  7. Ciao; premettendo che mi è piaciuta molto la tua introduzione, vorrei un aiuto per cambiare lo sfondo dei posts del mio blog del quale non riesco a trovare la stringa su cui agire, grazie.

    RispondiElimina
  8. @Helga
    Per togliere lo sfondo puoi andare su Designer > Modelli Sfondo. Nel caso non fosse possibile, per trovare il codice puoi usare Firebug
    http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html

    RispondiElimina
  9. So che è una richiesta un poco fuori tema..
    Ultimamente, ho notato, ad ogni modifica di una pagina statica di blogger cambia automaticamente (e senza controllo) anche l'URL..

    Si può fare qualcosa? E' possibile porre rimedio? E' un problema che affligge me soltanto?

    RispondiElimina
    Risposte
    1. @TobiaAlberti
      Cambia l'URL perché elimini le pagine precedenti con lo stesso titolo. Siccome l'URL è automatico e deriva da ltitolo, tutte le volte lo deve cambiare se il titolo è lo stesso. Puoi ovviare evitando di eliminare una pagina ma limitandoti a modificarla.

      Elimina
    2. Io mi limito a modificarla.
      l'URL, però, cambia lo stesso..

      Elimina
    3. Ti faccio lo screen del problema:
      http://i.imgur.com/LiQVe.png
      Quella che vedi è la parte finale del blog, in teoria fino alla fine sarebbe dovuto essere bianca, mentre stamattina con qualsiasi tipo di browser è dello stesso colore dello sfondo. Non so' come rimetterla a posto, dato che si è fatto stranamente da solo... Puoi aiutarmi?

      Elimina
    4. In pratica la parte bianca finisce esattamente dove ci sono i tratteggiamenti che dividono la sidebar dal footer

      Elimina
    5. @AndreaSapuppo
      Visto così non si capisce quale potrebbe essere il problema. Prova con Firebug per Firefox per vedere se riesci a visualizzare il CSS della parte che ha lo sfondo sbagliato per pensare a eventuali modifiche

      Elimina
    6. Stamattina era sempre col colore dello sfondo, stasera invece a volte appare bene, ma la maggior parte di volte non si vede correttamente.
      Il CSS non l'ho toccato, quindi non è un errore umano. Potrebbe essere che stanno aggiornando i modelli? Il mio è quello super-semplice preso da quelli di blogger.
      Però è strano perché negli altri blog, in cui uso lo stesso modello e stessi gadget il problema non sorge. Con Firebug non c'è molto da fare dato che è una cosa a intermittenza ogni volta che aggiorno... (ci avevo provato ma senza successo)

      Elimina
    7. Allora forse potrebbero essere i cookie dei vari browser. E' capitato una cosa simile anche a me @

      Elimina
    8. Lo vedevi solo tu questo difetto o era visibile a tutti?
      Alla fine si è risolto da solo?

      Elimina
    9. @AndreaSapuppo
      Lo vedevo solo io e si è risolto quando ho tolto i cookie dai browser.

      Elimina
  10. salve, vorrei cambiare lo sfondo dell'interno blog quando cambio pagina è possibile? inserendo una texture...

    RispondiElimina
  11. le pagine hanno infatti sfondo trasparente perchè si deve vedere lo sfondo sotto... ho trovato un sacco di post su come cambiare sfondo del blog ma non quando cambio le varie pagine statiche...qualcuno mi può aiutare? grazie!

    RispondiElimina
    Risposte
    1. @TimeinSpace
      Prova questo
      http://www.ideepercomputeredinternet.com/2012/01/come-eliminare-le-sidebar-e.html
      insieme alle istruzioni di questo post

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

    RispondiElimina
  13. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. @TimeInpace
      Quello che ho potuto fare l'ho fatto ...

      Elimina
  14. Ciao Ernesto! I tuoi consigli sono vitali. Il tuo è un ottimo lavoro. Ti seguo da poco ma mi hai fatto imparare già tantissime nuove cose: grazie! Ti scrivo per chiederti se nel caso specifico di questo post, le tue istruzioni sono valide anche per cambiare lo sfondo di un singolo post, magari facendo riferimento solo a data:blog.url. Ho provato ad inserire un comando CSS per il background solo nel codice HTML del Post che mi interessava cambiare ma naturalmente se viene visualizzato in elenco con gli altri cambia anche il loro sfondo. Non c'è modo di sfruttare l'ID del post? Grazie ;D

    RispondiElimina
    Risposte
    1. @CamillaPhoto
      Per cambiare sfondo solo a un singolo post o a una pagina statica leggi questo articolo
      http://www.ideepercomputeredinternet.com/2012/07/sfondo-post-blogger.html

      Elimina
  15. Ciao! Complimenti per il post!
    Mi chiedevo se era possibile mettere un colore di sfondo alle pagine statiche solo al passaggio del mouse e lasciare lo sfondo trasparente se queste non vengono selezionate esplicitamente.

    Grazie mille!

    Laura

    RispondiElimina
    Risposte
    1. Si può mettere lo pseudo-elemento hover per attivare il cambiamento di colore solo al passaggio del mouse ma questo si può fare solo su un elemento come potrebbe essere una immagine, un link, un contenitore, ecc ma non su tutto lo sfondo
      @#

      Elimina

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