Ieri abbiamo aggiunto uno sfondo a tutto schermo, lasciando l’impostazione dell’opacità che a me piace molto, però si può anche toglierla per avere uno sfondo totalmente a campo. L’effetto è ancora più immediato.
Per seguire questa guida dovete per forza aver letto l’altro tutorial per aggiungere un background a tutto schermo su template Blogger Finestra.
Non scordatevi di mettere in salvo il vostro template prima di procedere con questa guida.
Questo è il risultato che otterrmo… Bello! L’immagine con l’elefante l’ho presa dal tut di Paul Mason, grazie fin d’ora..!! 🙂
79S570 nero Taglia JEANS 38 TRUSSARDI 19 ngwPTC5q
ABBASSARE OPACITA’ HEADER – TESTATA
79S570 nero Taglia JEANS 38 TRUSSARDI 19 ngwPTC5q
Step 1 – Ok, entrati in Blogger, nella nuova interfaccia, andate dal menu a sinistra su Modelli > Modifica Html > cliccate su Procedi e avrete il box con tutto il codice. Spuntate la casella in alto > Espandi modelli widget.
Step 2 – Cercate questo pezzo di codice “Header” e aggiungete >
opacity:0.5;
filter: alpha(opacity=50);
Guardate in anteprima il risultato, la differenza è che lo sfondo colorato della testata è più trasparente. Carino, non è vero. Per togliere del tutto il colore e renderlo completamente trasparente dovrete soltanto aumentare i due valori di opacità 0.5 e 50 e renderli entrambi uguali, ad esempio 0.8 e 80 oppure 0.7 e 70. Ok!?! Mettendo 0.1 e 100 sarà del tutto trasparente. Se avrete aggiunto un immagine come header, anche l’intensità del carattere si abbasserà perché fa parte dell’immagine. Perciò per mantenere l’effetto dovrete utilizzare le personalizzazioni di carattere da Designer Modelli e non un’immagine caricata dal pc.
Perché l’effetto sia compatibile anche con altri browser aggiungete anche >
filter:-moz-opacity: 0.5;
-webkit-opacity: 0.5;
Nel tutorial precedente avevo aggiunto una immagine personalizzata al template, perciò l’ho tolta andando su Layout e ho spuntato la casella “rimuovi” per togliere la mia immagine, in seguito ho scritto il titolo del blog e modificato il carattere.
CREARE TRASPARENZA AREA POST
79S570 nero Taglia JEANS 38 TRUSSARDI 19 ngwPTC5q
Step 1 – Ok, creiamo una trasparenza anche nell’area post, così da non avere più l’area box, ma dare l’apparenza di un tutt’uno con lo sfondo.
Cercate nel codice questo pezzetto “post-outer” avrete questo codice ======>
.post-outer { background-color: $(post.background.color); border: solid 1px $(post.border.color); -moz-border-radius: $(post.border.radius); -webkit-border-radius: $(post.border.radius); border-radius: $(post.border.radius); -goog-ms-border-radius: $(post.border.radius); padding: 15px 20px; margin: 0 $(post.margin.sides) 20px; }
Cancellate tutto ciò che riguarda il colore quindi il codice risultante sarà questo =>
.post-outer { padding: 15px 20px; margin: 0 $(post.margin.sides) 20px; }
Guardate nell’anteprima e avrete l’effetto come da immagine sopra.
CANCELLARE TUTTO IL COLORE AREA INNER interna
Step 1 – Cercate il pezzo di codice “Main – outer“, cancellate tutto quanto. Ora avrete i post proprio scritti sopra lo sfondo. Naturalmente i colori dei caratteri dei post, commenti etc andranno ottimizzati per essere letti con facilità. Altrimenti non si leggerà bene. State attenti a questo punto: è molto importante che il lettore fruisca agevolmente dei contenuti. Un blog con caratteri piccoli e colori poco visibili facilmente verrà scartato.
CANCELLARE COLORE AREA COMMENTI
Step 1 – Per dare omogeneità a tutto, occorre anche cancellare il box dei commenti, che altrimenti stonerebbe > perciò cercate il codice “comments” e cancellate tutto ciò che c’è tra le due parentesi graffe. Controllate sempre l’anteprima.
Se volete potete anche cancellare i bordini colorati che si creano alla fine dei commenti nei successivi pezzetti di codice Comment-author, cancellate tutto ciò che inizia con border. Ecco fatto.
Tra un po’ non rimane più nulla!!!
TOGLIERE COLORE AL FOOTER
Oska Mocassini ESPRIT ESPRIT Fringetass Oska Donna wxYZqO Anche per il footer – piè di pagina, vale la stessa regola, toglieremo tutto il colore per dare l’effetto schermo intero.
Cercate questo pezzetto di codice > “FOOTER” e cancellate il pezzetto che inizia con
background: $(footer.background);
Volendo potete cancellare anche tutti gli effetti webkit e compagnia bella.
Controllate in anteprima non c’è più il bordo marrone semi-trasparente.
Sembra un sito vero e proprio! Si o no!?!
CAMBIARE CARATTERE E COLORE NELLE VARIE AREE
Ora la parte divertente, il cambio di colori dei caratteri nelle varie zone.
Step 1 – andate nel menu a sinistra, dalla bacheca e cliccate su MODELLO > PERSONALIZZA. Dalla pagina che si apre > menu a sinistra cliccate su AVANZATO e fate tutte le prove che volete per rendere tutto brillante e leggibile.
Le zone da tenere in considerazione sono ====>
- Titolo blog ==> con cambio font, colore e dimensione.
- Titolo post ===> con cambio font e dimensione.
- Intestazione data ===> con cambio colore testo.
- Link ==> con cambio di colore dei link.
- Gadget ==> con cambio font, colore e dimensione.
- Piè di pagina ==> credits con cambio colore del carattere.
L’effetto è forte, ma ora voglio spostare l’area post e sidebar, di poco, ma voglio spostarli.
RIsultato finale full background con il mio adorato tram By Blogghidee
Ecco un altro con dei fiorellini bellissimi della scorsa primavera.. belli..
79S570 nero Taglia JEANS 38 TRUSSARDI 19 ngwPTC5q
Naturalmente si possono poi fare varianti di tutti i tipi, nei prossimi giorni cercherò di costruire una skin mia, mi voglio buttare.. Vediamo cosa combinerò.
lacombutta
Buona sera, sono da poco lettore di qusto blog, ma l’ho trovato ricco di spunti interessanti, come ad esempio l’articolo dove sto commentando.
A proposito di questo articolo vorrei chiederti un aiuto per un problema che ho riscontrato.
Ho seguito alla lettera tutto quanto scritto in questo e nel precedente articolo, ma ho riscontrato un problema, lo sfondo che ho inserito viene visualizzato in maniera differente a seconda del display su cui viene visualizzato, se ad esempio apro la pagina sul mio 19″ tutto ok, mentre se la apro sul portatile con un 15,6″ la parte alta dello sfondo viene tagliata.
C’è un modo per far si che venga visualizzato sempre alla stessa maniera, oppure sono io ad aver sbagliato qualche passaggio?
admin
Ciao La Combutta,
dal link di Alistapart, in inglese (sorry!) spiega dettagliatamente tutto il problema della visualizzazione su schermi differenti, in pratica lui conferma la tesi che occorre giocare con il codice per far apparire l’immagine non distorta o tagliata, come riferisci tu. Il trucco è impostare le dimensioni e sfocare l’immagine sui punti in cui viene tagliata. Non so se hai dimestichezza con l’inglese, ma ci sono vari esempi con relativo codice su quasi tutte le possibili soluzioni 😉
Moda Tacco Strass Piatto Stile Estive Boemo Pantofole Sandali Infradito con Scarpe Landove Mare Donna Dai un’occhiata, spero ti possa essere utile.. ma fammi sapere se hai risolto! 🙂
e grazie mille per il tuo commento, a presto
lacombutta
Grazie per l’aiuto/risposta.
Non ho avuto ancora tempo per leggere attentamente l’articolo da te segnalatomi (ad una veloce lettura sembra fare al caso mio), nell’attesa ti segnalo che lo stesso articolo esiste anche tradotto in italiano a cui è possibile arrivare tramite un link a fine articolo.
Se può essere utile lascio qui il link su detto:
http://www.italianalistapart.com/articoli/22-numero-10-20-luglio-2010/85-ingrandite-quel-background
A presto
admin
@La Combutta,
hai fatto benissimo!!! Non mi ero accorta del link: tanto meglio per tutti, anche se usando Chrome ti traduce direttamente 😛
Ehi, fammi sapere le dritte per riuscirci, mi raccomando.. Ti aspetto 🙂