Stylebot è un addon di Chrome per modificare i CSS del blog.

Stylebot per modificare i CSS di una pagina web verificandone l'anteprima e per copiare i fogli di stile degli altri blog senza andare nel sorgente pagina.

Quando usavo Firefox, l'estensione di elezione per investigare sui CSS di una pagina web era Firebug che permette di trovare facilmente i fogli di stile di un determinato elemento. Ora prevalentemente uso il browser Chrome che trovo migliore sotto molti punti di vista rispetto a Firefox. Internet Explorer non l'ho mai preso in considerazione.

 

In poco tempo il browser di casa Google ha accumulato una quantità di componenti aggiuntivi veramente notevole che facilitano la navigazione e la produttività. Cliccando su una pagina web con il destro del mouse e selezionando Ispeziona Ispeziona elemento si apre una finestra a fondo pagina simile a quella di Firebug su Firefox. Però non ho mai trovato questo tool particolarmente utile.

 

Stylebot è invece un addon di Chrome che è più semplice da utilizzare di Firebug e che può aiutare moltissimo gli utenti di Blogger a modificare l'aspetto dei loro modelli. Dopo l'installazione non occorre riavviare il browser e si visualizzerà l'icona di Stylebot (CSS)alla fine della barra degli indirizzi.

 

 

Se ci si clicca sopra, si aprirà un pannello verticale con tutti gli strumenti utili per modificare i fogli di stile della pagina che è stata aperta

 

 

In alto c'è l'icona per selezionare un singolo elemento della pagina sopra all'URL della stessa. Se si passa con il mouse su un elemento del blog, per esempio il titolo, la data, il testo o un widget, questo si vedrà contornato da un rettangolo di colore verde

 

Nello screenshot precedente sono stati selezionati prima la data e successivamente il titolo. Se si clicca sopra all'elemento si visualizzeranno nel pannello di Stylebot i CSS che sovrintendono al suo aspetto

 

L'esempio precedente riguarda il titolo del post. Come vedete si può intervenire modificando la famiglia di caratteri, la dimensione dei caratteri, si può scegliere il grassetto (Font Weight) o il corsivo (Font Style), l'altezza della riga (Line Height), vari tipi di "decorazioni" e "trasformazioni" (maiuscole, minuscole, text-decoration:none, sottolineato o barrato), il colore di sfondo e altri parametri.

 

Se si clicca sui vari pulsanti o si inseriscono dei valori, vediamo subito l'anteprima di come muta l'aspetto della pagina. Ovviamente tale pagina web sarà vista nel nuovo modo esclusivamente da noi. Si possono sempre cancellare le modifiche impostate andando su Reset o Reset Page. Se il blog è vostro e volete applicare queste modifiche, andate in basso e cliccate su Edit CSS

 

In alto comparirà magicamente il codice dei CSS che abbiamo modificato

 

 

Nel test ho cambiato l'aspetto del titolo e quello del footer inserendo dei colori di background e altri parametri. Se in basso si va su Save, quella pagina sarà visualizzata dal browser con quell'aspetto. A noi però interessa che tutti la possano vedere in quel modo. Dobbiamo quindi selezionare tutti i CSS, cliccare sul destro del mouse e andare su Copia

Adesso occorre incollare i fogli di stile nel template. Si può scegliere di andare su Modello > Personalizza > Avanzato > Aggiungi CSS e incollarli nell'apposito spazio

quindi andare sulla destra su Applica al blog. Personalmente preferisco però andare su Modello > Modifica HTML > Procedi e incollare il codice sopra la riga ]]></b:skin>. E' però consigliabile cercare i blocchi di codice nel template per aggiungere o modificare solo le righe interessate senza incollare tutto il resto del codice.