19 novembre 2015

Graphic Tricks #8 Rendere lo sfondo dell'intestazione trasparente

Buon pomeriggio gente c: Eccoci qui con un nuovo tutorial grafico. Sto cercando di rispondere alle domande che mi mandate attraverso il form e una di voi mi chiedeva come rendere lo sfondo dell'intestazione\header trasparente. In realtà la blogger in questione ha risolto perché ci siamo sentite tempo fa, ma dato che è una domanda che spesso mi chiedono in tanti, ho deciso di spiegarvelo, sperando che possa esservi utile.
GRAPHIC TRICKS
Rendere l'header trasparente
Prima di complicarvi la vita, accertatevi che blogger disponga di modelli di base che possiedano un header trasparente.
In effetti ce ne sono parecchi, partendo dal modello Finesta Immagine, Fantastico, Filigrana  a quello Viaggi. Questi però rispetto al modello Semplice, hanno delle particolari caratteristiche, tipo la colonna laterale grigia in quello Viaggi che per portarlo al colore bianco solo Dio sa cosa bisogna fare (fatto una volta..mai più). Quindi se volte utilizzare il modello semplice, ecco cosa dovete fare:
  • cliccare su AVANZATO, SFONDO, SFONDO PRINCIPALE, TRASPARENTE
    Una volta reso trasparente il corpo del post, non vi resterà che colorare le parti del blog che vi interessano.
  • AVANZATO, AGGIUNGI CSS. Dopodiché inserite il codice qui sotto.

.main-outer{
background: white;
padding-left: 50px;
padding-right: 50px;
margin-left: -50px;
margin-right: -50px;
}
.footer-outer {
background: white;
padding-left: 50px;
padding-right: 50px;
margin-top: -2px;
margin-bottom: -10px;
margin-left: -50px;
margin-right: -50px;}
Con main-outer colorate gran parte dello sfondo principale, eccetto il footer, alias la parte inferiore del blog (per intenderci quella dove troviamo scritto Powered by blogger). Quindi dovete incollare anche footer-outer, in modo da rendere tutto del colore che volete. Le misure del padding e del margin le potete cambiare in base ai vostri gusti. Vi consiglierei di fare delle prove direttamente sul vostro blog o altrimenti lasciate le misure che ho scritto, che sono quelle standard, più o meno. Nel caso in cui lo sfondo dell'intestazione non cambi, accertatevi che l'immagine utilizzata sia in formato .png. Per altre domande scrivetemi nei commenti o nel form a sinistra.

Il tutorial è terminato. Semplice, no? 
Spero di esservi stata d'aiuto.  Alla prossima!

4 commenti: