Come eliminare o ingrandire i bordi delle sidebar in Blogger.

Nei modelli di Blogger è quasi sempre presente una linea di divisione tra l'area del post (main-wrapper) e quella della sidebar (sidebar-wrapper) o delle sidebar, se ce ne sono più di una. Nei vecchi modelli si possono agevolmente modificare le impostazioni delle sidebar andando su Design > Modifica HTML e cercando il foglio di stile relativo alla sidebar. I fogli di stile (CSS) sono individuabili perché iniziano con un punto oppure con un cancelletto.

Se si ha una sola sidebar dovremo quindi cercare le righe .sidebar oppure #sidebar. Nel blocco di codice sotto di queste, ci dovrebbe essere il parametro border che si riferisce appunto alla linea di separazione. Ecco cosa si trova per esempio in questo modello

#sidebar {
  text-transform:none;
  background-color: $sidebarBgColor;
  color: $sidebarTextColor;
  padding-$startSide: 20px;
  width: 30%;
  float: $endSide;
  font: $bodyFont;
  border-$startSide:2px solid #003366;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

La parte che ci interessa in questo contesto è data dalla linea

border-$startSide:2px solid #003366;

Le personalizzazioni che possono essere fatte sono

1. Si può sostituire una linea continua (solid) con una tratteggiata (dashed) o punteggiata (dotted)
2. Si può personalizzare il colore della linea modificando il codice del colore HEX.
3. Si può modificare la larghezza della linea agendo sui pixel (2px)
4. Se si vuole eliminare completamente è sufficiente inserire 0px e la linea scomparirà

Se si hanno due sidebar queste sono in genere individuabili come sidebar-left e sidebar-light o viceversa. Ricordo che molti modelli di Blogger sono stati creati da degli appassionati che quindi possono aver usato anche una terminologia diversa da quella ufficiale. 

Nei nuovi template associati al Designer Modelli, il codice è un po' diverso. Si cerca sempre cliccando su F3 o su Ctrl+F la sezione Columns. Ecco un esempio di codice

/* Columns
----------------------------------------------- */
.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
}

Anche in questo caso si può eliminare la linea di separazione mettendo 0px come larghezza del bordo, in entrambe le occorrenze, rendendolo invisibile. Si può anche variare l'attributo solid con dashed o dotted come illustrato in precedenza. Se si vogliono modificare i colori ricordo che in Design > Designer modelli ci sono un sacco di tool che permettono di effettuare modifiche di questo genere, che mostrano la relativa anteprima per decidere se siamo soddisfatti e quindi applicare le modifiche al blog.