Pubblicato il 19/05/12e aggiornato il

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.
 
stylebot-google-chrome
 
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
 
stylebot-modiifcare-css
 
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

selezionare-elemento-stylebot
 
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

css-titolo-post
 
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

edit-css-stylebot
 
In alto comparirà magicamente il codice dei CSS che abbiamo modificato
 
modifica-css-blogger-stylebot
 
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

copiare-css-generato-stylebot

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


aggiungere-css-modello
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.




2 commenti :

  1. Estensione molto utile.:) Anch'io passando da Firefox a Chrome ho dovuto rinunciare a Firebug - e Firebug Lite non mi ha mai convinto del tutto.

    RispondiElimina
  2. Installato, sembra interessante. Grazie Ernesto

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.