Come usare Firebug Lite per modificare il modello di Blogger.

Come usare l'estensione Firebug Lite di Chrome per investigare sul codice HTML e CSS di una data pagina web.

I tanti appassionati di blogging che però non sono professionisti del settore si trovano spesso a disagio quando devono apportare delle modifiche al layout de loro sito. Diciamo pure che quelli alle prime armi non sanno neppure quale sia il codice che determina l'aspetto di un dato elemento del layout.

Da diverso tempo esiste l'ottima estensione Firebug per Firefox che aiuta a investigare sul codice di una data pagina. Se non si hanno esigenze particolarmente avanzate si può anche usare Firebug Lite per Chrome che può essere installata dal Chrome Web Store.

Dopo l'installazione sarà visibile l'icona della estensione nella parte alta del browser. Avrà l'aspetto di un insetto e potrà essere usata semplicemente cliccandoci sopra. Alternativamente si può andare sul destro del mouse per aprire il menù contestuale e scegliere Inspect with Firebug Lite.

Nella parte bassa della scheda si aprirà una finestra con tutti gli strumenti di Firebug. Se la visualizzazione in basso non permette un suo agevole utilizzo si può sempre scegliere la finestra popup per spostarla a piacimento su tutto il layout. Si va semplicemente su uno dei bottoni rossi sulla destra

Per investigare sul codice di un elemento della pagina occorre andare su Inspect e selezionare con il mouse la zona del layout che ci interessa. Contestualmente l'elemento verrà racchiuso in un rettangolo da bordi azzurri in modo da rendere facilissima questa operazione

Sulla sinistra sarà visibile l'HTML dell'elemento mentre sulla destra si potranno vedere i CSS corrispondenti

Potranno anche essere fatte delle modifiche virtuali per vedere come viene modificato l'aspetto cambiando alcuni parametri. Ho postato un video di illustrazione dell'utilizzo di Firebug Lite

Tale operazione è utile per conoscere la classe di stile a cui corrisponde un dato widget. Per inserire delle modifiche nel template, esemplificando in modo un po' grossolano, dovremo andare nel modello e cercare il CSS relativo. Se non esiste possiamo crearlo noi ricordandoci di far precedere la classe con un punto ( . ) o con un cancelletto ( # ) a seconda che il selettore sia class o id.

Se per esempio troviamo class="post-footer" allora dovremo utilizzare la classe .post-footer. Viceversa con id="HTML10" dovremo usare il CSS #HTML10. Le modifiche potranno essere fatte nel codice dei CSS del modello, se tali classi esistono già, oppure andranno aggiunte subito sopra alla riga ]]></b:skin> se invece non sono ancora presenti. Le righe dovranno essere comprese tra due parentesi graffe. Per esempio il codice #HTML10 {margin-bottom:-10px;} serve per diminuire di 10 pixel la distanza tra il widget con ID HTML10 e il contenuto che gli sta subito sotto. Ovviamente tutto questo procedimento può anche essere usato per ispezionare una pagina web non nostra ma che abbia delle personalizzazioni o dei widget particolarmente interessanti che vorremmo utilizzare nel nostro sito.