Aggiungere e personalizzare un bordo ai post e agli elementi del blog su Blogger

Altra proposta votatissima nel sondaggio è stata la possibilità di aggiungere e personalizzare un bordo ai post e agli elementi del blog. Con questo articolo spiegherò sia come aggiungere un bordo fatto non solo da linee ma anche da altri motivi.

Come sempre partirò dal template Minima (il più diffuso e base di partenza per la maggior parte degli altri) per fare l’esempio.

Come viene definito il bordo dei post e degli elementi del blog

L’aspetto dei bordi viene definito dal codice CSS presente nei template. Nel template Minima, l’aspetto dei post viene definito da questo codice:

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Mentre l’aspetto dei widget da questo:

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

Più genericamente, possiamo dire che la definizione dello stile dei post comincia con .post o #post, mentre quello degli elementi della colonna laterale con .sidebar o #sidebar.

Modifichiamo i bordi dei post

Delle righe viste, ce ne interessa particolarmente una, ed è quella che definisce il bordo delle varie parti:

border-bottom:1px dotted $bordercolor;

Questa riga indica di inserire un bordo sotto gli elementi (border-bottom), larga 1 pixel (1px), punteggiata (dotted), del colore predefinito da Layout->Caratteri e colori ($bordercolor, ovvero Colore del bordo nella personalizzazione dei colori). Se nel vostro template non trovate questa riga, inseritela voi stessi nella sezione corrispondente!

Vediamo le possibili combinazioni del comando:

• border: inserisce un bordo in tutto l’elemento
• border-bottom: inserisce il bordo solo in fondo all’elemento
• border-top: inserisce il bordo solo in alto nell’elemento
• border-left: inserisce il bordo a sinistra
• border-right: inserisce il bordo a destra

Per fare una prova e capire il concetto, sostituiamo nel codice che definisce l’aspetto del post la parola border-bottom con border:

.post {
  margin:.5em 0 1.5em;
  border:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Ecco l’aspetto che avrà il post:

Il bordo non è più solo sotto ma tutto intorno. In questo caso si nota davvero poco, ma possiamo intervenire sul primo parametro (1px) per definire la larghezza del bordo:

.post {
  margin:.5em 0 1.5em;
  border:5px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Ed ecco il risultato ottenuto:

Adesso si nota sicuramente di più. Passiamo al secondo parametro (dotted - punteggiato) che definisce l’aspetto della linea. Ecco i possibili valori:

• none (nessun bordo)
• hidden
• dotted
• dashed
• solid (un linea compatta)
• double
• groove
• ridge
• inset
• outset

Facciamo direttamente una prova per capire, nel codice sostituiamo dotted con dashed (tratteggiato):

.post {
  margin:.5em 0 1.5em;
  border:5px dashed $bordercolor;
  padding-bottom:1.5em;
  }

Ecco il risultato:

A questo punto resta l’ultimo parametro, $bordercolor, che potete personalizzare direttamente da Layout->Caratteri e colori (Colore del bordo) oppure decidere voi stessi usando la codifica RGB dei colori (potendo così scegliere un colore diverso per le varie sezioni del blog). Proviamo a cambiare $bordercolor con #FF9900 (che provato con Color Scheme Online darà una tonalità di arancione):

.post {
  margin:.5em 0 1.5em;
  border:5px dashed #FF9900;
  padding-bottom:1.5em;
  }

Ecco come appaiono i nostri post ora:

Adesso potete sbizzarrirvi a provare le varie cominazioni.

Modifichiamo i bordi degli elementi della colonna laterale

Ricordiamoci della seconda porzione di codice, quella che definisce il bordo dei widget:

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
}

In realtà questa porzione non definisce solo l’aspetto della colonna laterale ma anche quella dell’area occupata dalle varie sezioni del blog. Per semplificare le cose, incolliamo subito sotto queste righe:

.sidebar .widget {
  border-bottom:1px dotted $bordercolor;
}

Che ci permetteranno di personalizzare solo il bordo degli elementi della colonna laterale. Facciamo una prova più completa, modificando così il codice aggiunto:

.sidebar .widget {
  border-bottom:5px dotted #993300;
  border-left:5px dotted #993300; 
}

Che secondo quanto spiegato sopra, aggiungerà un bordo sotto (border-bottom) e uno a sinistra (border-left):

Anche se la cosa può sembrare più complicata di quella che è, basta fare delle prove per afferrare subito il concetto. Per qualsiasi chiarimento, lasciatemi un commento!

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!