Come modificare la larghezza della sidebar dei Nuovi Temi di Blogger.

Come modificare la larghezza della sidebar dei nuovi Temi di Blogger per adattarla a quella dei widget.

Come certo saprete da qualche giorno sono disponibili i Nuovi Temi di Blogger che sono sicuramente un grande sviluppo rispetto i vecchi Temi o meglio i vecchi Modelli come si chiamavano fino a qualche giorno fa.

Abbiamo già visto che i nuovi Temi hanno una velocità di caricamento sensibilmente maggiore e soprattutto sono Responsive cioè si adattano alla risoluzione del dispositivo con cui vengono aperti. Quando i nuovi Temi si aprono da mobile con una risoluzione inferiore a 1440 pixel sparisce la sidebar che contiene widget di default e quelli che eventualmente avessimo aggiunto.

La personalizzazione di questi Temi sarà un lavoro lungo e proseguirà a piccoli passi quindi vi prego di non chiedermi subito delle modifiche troppo complicate visto che devo ancora capire il codice di questi nuovi Temi che è diverso in moltissimi punti rispetto a quello da anni che avevamo imparato a maneggiare.

Una delle tematiche più di base è quello delle dimensioni della larghezza dell'area del post e della sidebar. La natura Responsive di questi Temi fa sì che queste larghezze rimangano sostanzialmente fisse mentre varia la parte vuota del layout quando si aumenta o si diminuisce la risoluzione del dispositivo.

Come prima modifica vediamo come modificare la larghezza della sidebar. Prenderò in esame un Tema Contempo ma ritengo che la modifica sia applicabile a tutti gli altri 20 Temi. Si va su Tema -> Backup/Ripristino -> Scarica Tema per salvare il file XML da usare per un eventuale ripristino.

Si va poi si Modello -> Modifica HTML e si cerca questa stringa con Ctrl+F

name="sidebar.width"

quindi si va su Invio. Si troverà un blocco di codice simile a questo

<Variable name="sidebar.width" description="Width"
      type="length"
      min="250px"
      max="420px"
      default="284px"
      hideEditor="true"  value="284px"/>

che ci fornisce molte informazioni. Innanzitutto che la sidebar di default è larga 284 pixel che in effetti sono un po' pochini visto che molti widget sono larghi 300 pixel. Siamo informati anche delle dimensioni che sono supportate e che vanno da un minimo di 25o pixel a un massimo di 420 pixel.

Per modificare la larghezza della sidebar dovremo modificare solo il dato che si trova su value. Per esempio sostituendo value="284px" con value="320px" per poi salvare il Tema modificherà la larghezza della sidebar che naturalmente smetterà di visualizzarsi quando la risoluzione è inferiore a 1440 pixel.

Come vedete dallo screenshot precedente la maggiore larghezza della sidebar non andrà a discapito della larghezza dell'area del post ma occuperà una parte del layout che prima era vuoto. Al posto di 320 pixel si può inserire un valore compreso tra quello minimo (250px) e massimo (420px). Nei prossimi post mi occuperò anche della larghezza dell'area del post e di come modificarla. Almeno spero di riuscire a trovare il modo per farlo 🙂.

Aggiornamento: Contrariamente a quanto pensavo la sidebar del modello Emporio non è modificabile nella larghezza con questo codice. Le larghezza della sidebar del Tema è fissata da un codice come questo

.sidebar-container {
  background-color: #f7f7f7;
  max-width: 280px;
  overflow-y: auto;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);
          transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);
  width: 280px;
  z-index: 101;
  -webkit-overflow-scrolling: touch;
}

dove è indicata la massima larghezza in 280 pixel. Ho provato a aumentare entrambe le occorrenze ma la sidebar scompare. Non escludo si possa aumentare la larghezza della sidebar a scapito di quella del resto del layout ma per poterlo fare occorreranno delle modifiche più approfondite. Il Tema Emporio è significativamente diverso rispetto agli altri visto che si presenta con tre colonne centrali.