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


image 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:

image

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:

image

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:

image

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:

image

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):

image

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:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

32 commenti:

Vinnie ha detto...

Bella modifica

ANhIMA ha detto...

o ciao tene scusa l OT ma mi son perso la mia precedente domanda. Quel icona comunista della falce e martello per l'edit veloce è possibile farla esplodere per favore? :)

Tenebrae ha detto...

@paolo: è stata inserita nel sondaggio

Iole ha detto...

Tenebrae sei sempre chiarissimo.
Io ci lavoro tutti i giorni con i fogli di stile, l'html e il javascript ma non riesco ad essere chiara come te nelle spiegazioni.

chiara ha detto...

é chiarissimo, io il colore dei bordi l'ho modificato da sola, ma come cambiare forma non lo sapevo proprio!vorrei togliere i bordi alle foto perchè col formato polaroid stanno malissimo secondo me..proverò così, allora, grazie
chiara

Tenebrae ha detto...

@iole: grazie iole! ah, rimani nei paraggi mi raccomando, che stasera (salvo imprevisti) sarai nominata ;)

@chiara: fammi sapere se va tutto come deve!

Stefano ha detto...

Ciao e complimenti per il blog strepitoso che seguo sempre!
Posso farti una domanda che non c'entra con questo post?
Nel mio blog (ancora di prova) ho inserito un header dal mio pc in formato jpg, metti che abbia un peso di circa 80 kB, ebbene, una volta caricato, quando visualizzo il blog noto che è più degradato e di bassa qualità.
Ci clicco col tasto destro, proprietà, e mi accorgo che è circa 27 kB!
Com'è possibile che l'immagine che ho caricato (e che ora risiede su un account picasaweb come le immagini che carica blogger) da 80 kB venga ridotta a 27 kB?
Non ho mai letto nessuna funzione di "ricompressione" automatica di picasaweb a riguardo..
E' una cosa che mi infastidisce perchè anche con 70 kB l'immagine è buona, mentre con 27 kB perde leggibilità..
Spero che potrai aiutarmi, per ora grazie infinite..

Tenebrae ha detto...

@stefano: la cosa suona nuova anche a me, sinceramente... l'unica cosa che mi viene in mente è che tu abbia selezionato l'opzione di adattare le dimensioni dell'immagine all'header, perchè magari troppo grande, anche se questo non spiega realmente la cosa

mi dovresti lasciare il link all'immagine e permettermi di vedere il tuo blog, così magari riesco a farmi un'idea

Iole ha detto...

@Tenebrae: sarò nominata??? che onore!

Amrita ha detto...

al solito,c'entro come i cavoli a merenda,ma mi servirebbe un elemento da aggiungere,per vedere i commenti che mi lasciano.qualcosa che li metta bene in evidenza,senza dover controllare ogni post...dove lo trovo sto coso?l'ho visto in diversi blog,ma cerca cerca,non ho trovato nulla...

enrico ha detto...

Ciao Tenebrae, come stai?Mi serve un aiuto per risolvere un problema. Premetto che questo mio commento non è inerente all'articolo qui sopra e per questo mi scuso, ma non sapevo dove poterti postare questo mio quesito.
Il problema è che ho notato che quando apro il mio blog (http://parliamodivino.blogspot.com) con Firefox ci sono alcuni post che nella home page vengono visualizzati per intero, invece che in parte con sotto "leggi il resto dell'articolo" come accade per gli altri. Ho notato che questo succede con gli articoli che presentano all'interno degli elenchi puntati. Puoi darmi qualche consiglio?grazie

Anonimo ha detto...

Molto interessante, ma quando hai tempo caro conterraneo, guarda se riesci a sapere se noi poveri splinderiani potremo mai inserire friendconnect... :-)

Ciao
Il Blog | Attualità | Psicologia

Silvano Bottaro ha detto...
Questo commento è stato eliminato dall'autore.
Ketty ha detto...

Ciao Tenebrae...ho seguito i tuoi consigli e ho anche rimpicciolito le immagini, ma non ho risolto il problema. E se dipendesse da Windows Live Writer? Magari il prossimo post provo a farlo direttamente dal blog senza usare WWR e se funziona ti faccio sapere...Non è di vitale importanza, ma ora è diventata una sfida! :-) Cmq grazie e... sei davvero in gamba!
Ketty

Dany ha detto...

voglio proprio provarci,
ma è possibile inserire un'immagine che faccia da cornice?
ciao e grazie mille per quello che fai

Dany ha detto...

per ora ho messo il bordo ed è stato molto facile grazie alle tue spiegazioni,

altra domanda (non mandarmi.....)
e un effetto ombra come hai fatto alle immagini è possibile farlo ai bordi del post?

Anonimo ha detto...

sei straordinario orazio, era da tempo che stavo pensando a questa modifica sul blog, bravissimo!

Silvano Bottaro ha detto...

Tutto apposto. Grazie Orazio

Anonimo ha detto...

@stefano:

tutte le immagini caricate sui blog di piattaforma blogger presentano un limite di kb quando vengono caricate. Per esempio le immagini caricate nei post non devono superare i 290 kb altrimenti vengono ridotte molto nella qualità; io da quando creo sfondi 1280x800 e 1440x900 ho dovuto hostare le immagini in siti esterni e non Picasa, perchè sono un pò pesanti e non ho intenzione di ridurre la qualità per i compromessi che ti impone Blogger. Stessa cosa vale per l'header, viene ridotta la qualità se supera il limite. Per risolvere il problema carica l'header in un host esterno e quando lo inserisci nel blog lo carichi dall'indirizzo dell'host e non dal pc. Così il peso dell'immagine è indifferente. Spero di esserti stato utile.

Monica ha detto...

ciao Orazio, ho visto alcuni template in giro che in fondo ad ogni post (dopo la data di pubblicazione e l'elenco delle etichette) hanno un'immagine, ad esempio un divisorio. Come posso fare per inserirla?
Grazie 1000000
Ciao

Anonimo ha detto...

ciao, avrei bisogno di aiuto su una cosa, ho fatto i bordi tutto bene, però il bordo mi viene attaccato al testo, vorrei che ci fosse un po' di distanza tra il bordo (io ho fattto solo il bordo a destra) e il testo...

immagino che devo usare il comando padding, ma non so bene di preciso.
spero mi aiuterai ^_^
ciao

Tenebrae ha detto...

@altra notizia: ne ho parlato in questo post, dovresti risolvere!

Anonimo ha detto...

ciao!!!ho lo stesso problema di altranotizia!
ho un blog a tre colonne ho modificato i margini ma il testo del post mi rimane attaccato al bordo sinistro....help me!!!

Marica ha detto...

ciao,
utilissimo anche questo post...
io nel mio blog ho cancellato tutti i bordi perchè mi piace di più così... solo che tra un post e l'altro vorrei inserire un'immagine (al momento ho lasciato il bordo "dotted"), potresti aiutarmi?
http://chiarordiluna.blogspot.com

Varese Wedding ha detto...

Complimenti per il sito !! E' molto preciso e utile alle persone alle prime armi come me !! Non ho trovato questa informazione: come si inserisce una cornice doppia semplice alle foto, come quelle delle foto dei blog dei fotografi??
grazie
Varese

flblu ha detto...

è possibile inserire un'immagine che faccia da cornice?

inchiostronero ha detto...
Questo commento è stato eliminato dall'autore.
Pennywise ha detto...

ciao ho un problema con un mio blog... ho la sidebar a sinistra, ci ho messo dei widget e il titolo di questi me lo mette sempre e solo in maiuscolo anche se io lo scrivo minuscolo... altro problema che non me lo allinea a sinistra come il contenuto del widget... hai qualche idea su come risolvere il problema?

altro problema è che il nuovo blogger nn mi da modo di cambiare il carattere dei post, me lo fai scegliere ma poi nn mi fa nessuna variazione, da cosa dipende???

questo è il link del blog tanto per farti un idea http://lacgilchevogliamofirenze.blogspot.com/...

Chiara -Cucinando con mia Sorella- ha detto...

ciao Tenebrae!
ho applicato il css con successo... solo che vorrei sapere se è possibile distanziarlo un pò dal post... le linee così vicne al corpo del post ho paura che facciano un pò di confusione quando si .
Grazie, Chiara

Chiara -Cucinando con mia Sorella- ha detto...

risolto!
padding:)

Unknown ha detto...

non ci sono riuscita :( uffa ! non mi potresti aiutare

Midori ha detto...

Ciao! Innanzitutto grazie per l'esaustiva spiegazione. Volevo chiederti se fosse possibile inserire un bordo nella homepage del blog, tipo una cornice.


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.