Come scegliere lo sfondo del blog #4

{Read in English...}
come scegliere lo sfondo del blog 4
Eccoci al post conclusivo sui background!
Dopo aver valutato cosa vogliamo per il nostro sfondo, arriva il momento di implementare il tutto.
Anche qui mi rivolgerò principalmente agli utenti Blogger, ma il linguaggio CSS vale ovviamente per qualsiasi piattaforma.
Il designer modelli di Blogger ci lascia compiere facilmente quasi tutte le operazioni; tuttavia a volte questo sistema smette “misteriosamente” di funzionare. Questo può accadere per vari motivi: forse perché il template che abbiamo scelto non lo supporta appieno, oppure per via di modifiche che abbiamo apportato “a mano” al codice, che sono andate a sovrascrivere i selettori che normalmente lo fanno funzionare.
Che fare allora? Rassegnarsi a non poter più cambiare sfondo? Assolutamente no! Modificare il codice che regola il background dall'editor HTML è facile... Però ricordate di fare il backup del modello prima di metterci mano!
keep calm and backup your template
Andiamo su “Modifica HTML”, premiamo CTRL+F e nella casella di ricerca che spunterà scriviamo body. Scorriamo finché non troviamo un codice CSS simile a questo:
body {
font: normal normal 15px Arimo;
color: #333333;
background: #ffffff none no-repeat scroll center center;
}
Il vostro codice sarà un po' diverso, ma sicuramente ci saranno il selettore body e il suo attributo background. Questo è quello che ci interessa.
Prima di apportare le modifiche, cerchiamo di capire cosa regolano i valori che vediamo nell' esempio.
  • #ffffff: è il codice che regola il colore di fondo. È composto da 3 o 6 lettere e/o numeri preceduti dal cancelletto (#) e nel mio caso si tratta del bianco.
  • none: non ci sono immagini. Qualora avessi un'immagine di sfondo, al posto di questo valore ci sarebbe un link.
  • no-repeat: sempre se avessi un'immagine, con “no-repeat” essa non si ripeterebbe per la finestra del browser. Se volessi utilizzare un pattern, che quindi deve ripetersi per avere senso, avrei dovuto scrivere repeat.
  • scroll: se avessi un pattern, con questo valore lo sfondo scorrerebbe insieme al contenuto quando scendiamo con la barra di scorrimento o con la rotella del mouse. Se invece scrivessimo al suo posto fixed, questo non succederebbe: il pattern continuerebbe a ricoprire l'intera finestra, ma scorrendo in giù si muoverebbe solo il contenuto. Può essere un effetto gradevole, dando una sorta di tridimensionalità al blog.
  • center center: specifica, sempre nel caso in cui ci sia un'immagine, in quale modo dev'essere posizionata, sia orizzontalmente che verticalmente. In questo caso sarebbe centrata nello schermo (salvo poi ripetersi con l'attributo “repeat” e quindi occuparlo tutto). Altri valori che si possono usare sono top, bottom, left e right.
Ora, se vogliamo un colore solido di sfondo, cerchiamo il codice corrispondente alla tinta che desideriamo. Potete farlo qui: una volta trovato il colore, copiate e incollate il valore al suo posto nel codice CSS.
Se invece vogliamo un'immagine o un pattern, per prima cosa dobbiamo caricarla/o da qualche parte in rete per ricavarne un link diretto, così come abbiamo visto nel post precedente.
Ora, al posto di none, scriviamo url(“”) e dentro le virgolette incolliamo il nostro link. Oppure, se già abbiamo un'immagine nel modello ma vogliamo cambiarla, semplicemente cambiamo il link.
Finito!
Ecco un esempio di come potrebbe essere il CSS di uno sfondo con pattern:
background: #ffffff url(“http://yoursite.com/image.jpg”) repeat fixed top center;
Questo è tutto! Spero di essere stata esaustiva ma non troppo criptica per chi non si sente “esperto”.
Per qualsiasi dubbio, lasciatemi un commento!

Lezioni precedenti:
1. Cenni generali.
2. Colori solidi e pattern: cosa fare e cosa evitare.
3. Come usare un'immagine che occupi l'intera finestra del browser come sfondo.

22 commenti:

  1. Ciao Silvia, innanzi tutto complimentissimi per la nuova grafica del Blog (arrivo non proprio subito -_-!!): mi piace veramente un sacco, dai colori agli elementi...poi inserire i contatti in fondo mi sembra una mossa azzeccatissima... forse (prima o poi) te la copierò :D!!

    RispondiElimina
    Risposte
    1. Ciao Vale, sono contentissima che ti piaccia la nuova grafica!! Nel caso copia pure per i contatti, nessun problema XD

      Elimina
  2. se avessi volgia di cambiare sfondo seguirò questi fantastici consigli che sicramente mi semplificherebbero molto!!!^_^Un bacione bella...

    RispondiElimina
    Risposte
    1. Sono cose più complicate da spiegare che poi da mettere in pratica! Baci :)

      Elimina
  3. Complimenti sei molto chiara nelle spiegazioni!! Un abbraccio

    RispondiElimina
  4. Silvia sei stata chiarissima! Ho già fatto alcune modifiche al codice del mio blog ma sempre senza sapere cosa significassero tutti i codici. Con Questo post ho molto più chiaro il tutto ed inizio a capirci molto di più!! Grazie davvero! Un bacio

    RispondiElimina
    Risposte
    1. Ci sono casi in cui anche senza entrare nello specifico si può fare un bel copia/incolla di un codice e ottenere il risultato, ma in questo caso è più semplice spiegare cosa fanno questi pochi valori piuttosto che riportare 1000 esempi da copiare, caso per caso. Poi secondo me quando possibile è bello sapere come funziona quel che si sta facendo, fosse anche solo curiosità! Sono felice di esserti stata utile Alessandra :)

      Elimina
  5. Semplicissimo questo tutorial!! Grazie!!
    Bacioni.....

    RispondiElimina
  6. Eccomi finalmente... settimana orribile (lavoro) e Dado con raffreddore potente (quindi nottate in bianco)
    Ho fatto il quadro!
    Evviva!

    Sempre bravissima e chiarissima, mi sa che ci devi fare un manuale e pubblicarlo!

    Mi piace la nuova veste. Moltissimo.

    Ho visto che sei entrata in google+ dovrei farlo anche io. Non esserci mi preclude il lasciare commenti in alcuni blog e questo mi dispiace.
    Ma ho paura di incasinare tutto.

    Colgo l'attimo e ti faccio una domanda. Ma il profilo di google+ deve essere per forza con nome e cognome oppure posso continuare ad usarne uno di fantasia?

    RispondiElimina
    Risposte
    1. Urca, mi spiace per la settimana simpatica!
      Allora, in teoria i termini d'uso di Google impongono di usare un nome reale. Io ci ho comunque aggiunto "Tine" e per un po' avevo abbreviato il cognome. Ero nel mio periodo della privacy :P
      Ho un paio di amici che usavano uno pseudonimo che hanno ricevuto mail di Google in cui si chiedeva loro di cambiare nome, pena la chiusura del profilo...
      Ti consiglierei quindi di usare qualcosa che perlomeno si avvicina al tuo nome reale; poi ci sono le pagine di G+, così come le fanpage di Facebook, dove puoi usare il nome che vuoi... ma su questo fronte ne so ancora poco :S
      Spero tu possa passare un buon weekend ora!

      Elimina
  7. Tine, sei un genio! Non è da tutti saper spiegare così semplicemente le cose :D molto, molto interessante!

    RispondiElimina
    Risposte
    1. Grazie Elettra... "Genio" mi sembra esagerato, ma mi fa piacere se si capisce qualcosa di quel che scrivo :D

      Elimina
  8. Ciao Silvia Tine, anch'io vorrei essere un po' più competente: mi stamperò questo post e farò luce sul "dietro le quinte " del mio blog. Grazie mille per il contributo!

    RispondiElimina
  9. Silvia , bravissima sei sempre molto chiara e precisa nelle spiegazioni . Io sono una frana , sono riuscita a cambiarmi l'header da sola e sinceramente ti giuro che ho fatto una fatica ma una fatica da matti !!! Mi cercavo su google le spiegazioni e poi procedevo....tremavo all'idea di sbagliare e non riuscire a recuperare.... Puoi ben immaginare ....una che fino ad un anno e mezzo fa non sapeva nemmeno come si accendesse un pc ...non sapevo NULLA di queste cose . se avessi bisogno ancora verrei qui da te perchè mi piace come spieghi le cose....Grazie !!! Un bacione.

    RispondiElimina
    Risposte
    1. Mirtilla, non ti preoccupare. L'unico modo per superare questi timori è provare e riprovare. L'importante è fare i backup e salvare copie delle immagini e della grafica, per poter porre rimedio a eventuali pasticci... che comunque non saranno mai la fine del mondo :)
      Per qualunque dubbio, poi, mi trovi qui!

      Elimina
  10. Grazie per i suggerimenti, quando cambierò lo sfondo ne terrò conto e mi aiuteranno molto.
    Fantasy Jewellery

    RispondiElimina
  11. Grazie di cuore davvero.
    per riuscire a farmi intendere quello che per me è da sempre considerato aramaico ^_^

    RispondiElimina
    Risposte
    1. La "triste" verità è che html e css sono due linguaggi estremamente facili, soprattutto se li si prende pezzetto per pezzetto ;)

      Elimina
  12. Ciao Silvia, genaile questo post, me lo salvo tra i preferiti perché è proprio una di quelle cose che vanno tenute lì per quando servono. Grazie mille...

    RispondiElimina

Ti ringrazio per il tuo commento: mi stai dedicando due minuti del tuo tempo e lo apprezzo immensamente!
I commenti vengono modrerati, perciò non sono visibili appena inviati.
Mi riservo il diritto di cancellare messaggi:
• offensivi, diffamatori e/o volgari;
• a sfondo esplicitamente politico;
• pubblicitari;
• che richiedono 'follow 4 follow': seguimi se ti fa piacere, io farò altrettanto!

Related Posts Plugin for WordPress, Blogger...