Eliminare o cambiare il bordo dell’header del template su Blogger

Anche se difficilmente riesco a trovare il tempo di commentare, in realtà mi capita spesso di girare tra i vostri blog e di leggere gli ultimi post inseriti, a volte anche per vedere come crescono quei blog che ho “visto nascere”. Oggi, mentre leggevo gli ultimi articoli di Cafè creativo, ho notato il bordo nell’header (l’unico rimasto in tutto il blog, ma vista la bravura di Anna nel personalizzarlo è sicuramente un effetto voluto) e mi è venuta in mente una richiesta fatta tempo fa da Laura (che nel frattempo ha risolto da sè) e che ultimamente mi è stata riproposta da altri lettori: eliminare i bordi dall’header del template.

Anche se i passi che seguirò fanno riferimento al template Minima, probabilmente andranno bene per la maggior parte dei vostri template.

Backup del template!!

Mi raccomando sempre di fare il backup del template di Blogger prima di fare le modifiche, in modo da poter tornare indietro nel caso le cose vadano male, e magari di farle prima in un blog di prova.

Questo passo è importante, mi raccomando, a volte una modifica va male (e spesso non per colpa mia o vostra, ma per colpa di Blogger), e quando qualcuno mi chiede come tornare indietro è sempre qualcosa di molto stressante per entrambi.

Eliminare il bordo dell’header del template

Ecco come appare l’header del template Minima:

Da Layout–>Modifica HTML, cercate questa porzione di codice (o analoga, nella maggior parte dei casi comincia con #header-wrapper):

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

E cambiate la parte in rosso così:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:none;
  }

Ecco come apparirà adesso l’header del template:

Con un solo bordo, che già è un effetto migliore. Per togliere anche questo, cercate questa porzione di codice (o analoga, nella maggior parte dei casi comincia con #header):

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

E cambiate la parte in rosso così:

#header {
  margin: 5px;
  border: none;
  text-align: center;
  color:$pagetitlecolor;
}

E dopo aver salvato le modifiche ecco come apparirà l’header:

Sicuramente una bella immagine farà un effetto migliore (magari una sempre diversa ogni volta che verranno caricate le pagine del blog).

Personalizzare il bordo dell’header

Ho già dedicato un articolo su come personalizzare i bordi delle sezioni del template, dove spiego come aggiustare la proprietà border per far apparire diversi effetti. Adesso che sapete come trovare il codice relativo all’header, potete seguire quelle istruzioni per personalizzarlo.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!