Graphic Tricks #9 Colorare lo sfondo di una determinata sezione del blog

Buon pomeriggio lettori!! Eccomi di ritorno con un nuovo tutorial di grafica! Mi dispiace non essere molto costante con questa rubrica (che, da quanto dicono le statistiche, vi piace parecchio), ma purtroppo non ho molto tempo per preparare i post!

GRAPHIC TRICKS

Oggi vi spiego come colorare lo sfondo di una determinata parte del blog. Avete presente la vecchia grafica di BBSE? Qualcuno mi ha chiesto come ho fatto ad inserire il pattern soltanto in alcune parti, lasciando lo sfondo bianco. Innanzitutto, come sempre, vi invito a curiosare tra i vari modelli di template offerti da blogger. Di solito alcuni permettono di colorare soltanto determinate parti, senza necessariamente intervenire con i codici html\css. Esempio? Il modello Fantastico S.p.A.

Questo non solo vi farà evitare di perdere tempo, ma anche di combinare pasticci con i codici. Dall'editor di blogger potete fare qualsiasi modifica per quanto riguarda i colori dello sfondo, mentre se volete aggiungere un pattern il discorso cambia. Il codice da inserire è sempre:

background:  url(linkdell'immagine); 

oppure, se volete semplicemente colorare, :

color: #CodiceColore;

Questo codice andrà inserito tra le parentesi graffe {} e prima delle parentesi dovrete scrivere l'elemento della sezione del vostro blog che intendete colorare. Per semplificare ho fatto un piccolo schemino con le varie sezioni del layout e i rispettivi codici. 

#navbar: barra di navigazione

.header: l'immagine di intestazione

#PageList1 \ #crosscol \ .tabs; il menu\le pagine  [potete usare uno dei tre indifferentemente]

.date-header: per colorare quella parte di template che comprende la data

.date-header span: per colorare soltanto lo sfondo della data

.post-title: lo sfondo del titolo del post

.post-footer: il piè di pagina del post (ovvero "pubblicato da", "etichette" e così via)

.post-body: lo sfondo del post

.main: per colorare lo sfondo del blog, compreso titolo (questo il codice .post-body non lo fa) e la data.

.main-outer: per colorare quella parte del blog che comprende il post e la barra laterale

.sidebar: per colorare la barra laterale

Per i singoli gadget bisognerà utilizzare un altro codice che vi spiegherò in maniera approfondita nel prossimo post.

.footer: il pie di pagina del blog (?). Insomma, inferiore. 

Quindi il vostro codice avrà questo aspetto:

.main {background: url(linkdell'immagine);}

Ricordatevi sempre:

•  del punto o dell'# prima dell'elemento che andrete a colorare
• delle parentesi graffe che aprono e chiudono il codice (metà dei problemi con i codici sono causati da graffe non chiuse, posso testimoniare U.U)
• del punto e virgola che chiude ogni determinato codice delle parentesi (l'altra metà dei problemi invece sono causati dal punto e virgola xD).

CONSIGLI: 

• per inserire un'immagine come sfondo di un elemento del vostro blog, non utilizzate le semplici immagini, ma i pattern. L'effetto finale sarà migliore. Ne trovate tantissimi su Pinterest. 
• Per trasformare le vostre immagini in link, potete usare uno dei tanti siti di hosting. Il mio preferito? Tinypic.
• Per i codici dei colori invece potete usare questo sito: Qui,
• Se lo sfondo risulta troppo vicino, che so, al titolo del blog, cambiate il padding, alias la distanza tra un elemento e l'altro del vostro blog! Il mio consiglio è di inserire sempre: padding: 10px;.

E per questo appuntamento è tutto. Spero di esservi stata utile. Per qualsiasi domanda e\o richiesta non esitate a commentare, vi risponderò al più presto c:

Buon fine settimana (e buona Pasqua!),

Giusy