Pubblicato il 09/01/11 - aggiornato il  | 6 commenti :

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.



6 commenti :

  1. Ciao,
    Si potrebbe invece aumentare lo spazio dove si possono scrivere i post? Nel mio blog devo sempre ridurre le immagini perchè un immagine con un formato 640x480 (un immagine extra-large dunque) non ci sta ...

    RispondiElimina
  2. @Pierzollo
    Si può fare anche se non è immediato se hai un vecchio modello. Puoi seguire questo tutorial
    http://www.ideepercomputeredinternet.com/2009/08/come-aumentare-la-larghezza-delle.html
    Se invece hai un modello nuovo o comunque compatibile con il Designer Modelli, devi andare su Design > Designer Modelli > Modifica le larghezze e, con il cursore, configurare larghezza di tutti gli elementi del blog.
    Ciao

    RispondiElimina
  3. Non devo più venire a leggere i tuoi post: non trovo il tempo di postare le mie nuove torte che mi distraggo pensando a come apportare modifiche al blog. Ma puntualmente, non avendo un modello blogger nè compatibile, perdo le giornate a cercare #voci che non troverò mai :D

    Mi fai solo del male ;)

    RispondiElimina
  4. @Sarù
    Così mi fai sentire in colpa ahahah

    RispondiElimina
  5. @# Tutto è possibile. Prova a usare Firebug o Firebug Lite per trovare i CSS relativi

    RispondiElimina
  6. @#
    Prova a togliere tutte le righe con border o alternativamente aggiungere la riga
    border: none !important;

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy