28 settembre 2009

20 commenti Condividi il post Facebook Twitter Google+

Come modificare il template con Firebug

Spesso ricevo delle email con richieste d'aiuto per modifiche più o meno semplici da apportare al template, come ad esempio:

  • modificare il font o il colore del titolo del post
  • eliminare il bordo delle immagini
  • modificare lo style delle voci della sidebar
  • aggiungere un'immagine di sfondo al post
  • "allargare" o "stringere" una colonna
  • modificare la data del post

Con Firebug, un add-on per Firefox, è possibile capire facilmente quale parte del template modificare; vediamo come.

Innanzitutto dovete installare Firefox, poi l'add-on Firebug e aprire il vostro blog con questo browser.

In basso a destra nella finestra di Firefox vedrete un'icona con un insetto. Cliccando sull'icona, la finestra del browser viene visualizzata in questo modo:



cioè nella parte inferiore della finestra è possibile vedere ed analizzare l'html della pagina.

Per modificare un elemento (il titolo del post, la data, il link dei commenti, ecc) occorre cliccare sull'icona con la freccetta azzurra



e posizionarsi con il mouse sull'elemento da modificare. Man mano che vi muovete sulla pagina vedrete i singoli elementi rappresentati con un rettangolo dal bordo azzurro.
Ad esempio, se nel mio template voglio modificare il carattere della data, clicco sull'icona e mi posiziono sulla data:



In basso vedrò evidenziata la porzione di codice html relativa alla parte del template contenuta nel rettangolo azzurro:



Quindi se il codice html è <strong class="giorno">28</strong>, per qualsiasi modifica devo cercare la classe giorno nel css del template e modificare il font, il colore, la dimensione, l'immagine di sfondo, ecc.

Se invece voglio modificare il link dei commenti, procedo allo stesso modo. Clicco sull'icona e mi posiziono con il mouse sulla parte che intendo modificare:


Visualizzo così questo html:



In questo caso, qualunque siano le modifiche che voglio apportare devo trovare nel template la classe comment-link.
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

20 commenti

  1. Ma noi preferiamo i tuoi post ed il tuo costante aiuto ^_^

    RispondiElimina
  2. @Amsis: e i miei preziosi consigli, no? ^_^

    RispondiElimina
  3. Ho bisogno di attaccare le trasparenze dei post nel blog nuovo e di una mappa link dello stesso blog. Grazie!

    RispondiElimina
  4. e poi senza il commento tuo, comment-link rimane un comment-link. mica so cos'è! Ciao e bentornata dalle Ferie^^^

    RispondiElimina
  5. Questo sì che è utile!!!
    Grazie per la dritta!

    RispondiElimina
  6. ciao... io preferisco te... sempre presente... ovviamente quando puoi.
    Secondo me, però, devi dar piu' risalto al link...
    Sostieni questo blog!
    ciao

    RispondiElimina
  7. @Ale: per te... posso sempre!
    Per quanto riguarda la scritta Sostieni questo blog! potrei scriverla anche a caratteri cubitali e nessuno la noterebbe.

    RispondiElimina
  8. Interessante! Avevo da mesi installato Firebug, ma non l'avevo mai usato! Grazie per l'informazione!!!

    RispondiElimina
  9. Bellissimo plugin! Preso!

    Ma tu sei più brava del plugin ;D

    RispondiElimina
  10. Molto probabilmente non è la sezione giusta, ma, mi servirebbe un consiglio. Vorrei cambiare colore ai link esci e iscriviti per email (sono di colore blu) che si trovano vicino a posta un commento. Dopo tanti tentativi fatti nel blog di prova ancora non ci sono riuscito. Mi è venuto un dubbio, sono forse link a riposo? Stò cambiando la veste grafica del blog e quel blu stona un pò con i colori del template.
    Bellissimo plugin,già installato.

    RispondiElimina
  11. Ciao Iole, ho installato Firebug e grazie alla tua dritta sono riuscita ad eliminare la cornice alla foto di testa del blog. Ora mi piacerebbe allargare la colonna centrale e ridurre leggermente le due laterali ma non riesco a capire cosa modificare; seguendo le tue indicazioni mi aspettavo di trovare qualcosa che facesse riferimento alla larghezza della colonna per poterla modificare e invece...sono io la solita cecata?!?!?!
    Gazie dell'aiuto, a presto

    RispondiElimina
  12. @Federica: per allargare la colonna centrale e ridurre leggermente le due laterali devi modificare i valori di width delle sezioni #main-wrapper e .sidebar-wrapper. Tieni conto che la somma delle tre ampiezze non deve superare il valore della width della sezione #outer-wrapper.

    RispondiElimina
  13. Il firebug può essere utilizzato per cancellare commenti di post che non esistono più?
    Ho provato a farlo, al momnento spariscono dal sito, quando poi aggiorno la pagina riappaiono di nuovo.

    RispondiElimina
  14. @Gloria: per cancellare i commenti devi cliccare sull'icona a forma di cestino che compare accanto ad ogni commento.

    RispondiElimina
  15. vediamo se riesco a ridimensionare l'header...grazie

    RispondiElimina
  16. sto provando ad installarlo ma mi appare l'avviso che l'autore non è verificato...cosa faccio? Non rischio?

    RispondiElimina
  17. @Scarlett: io l'ho installato senza problemi.

    RispondiElimina
  18. Ok Allora procederò anch'io al più presto^^
    Grazie

    RispondiElimina
  19. carissima oggi ho avuto un po' di tempo e l'ho dedicato a fare un giro sul tuo blog e su (f)un po'in giro ho visto e letto tanti commenti ho anche dedotto che sei occupatissima ho trovato un mail nella mia posta ma purtroppo non ho fatto in tempo a leggerla perchè il (P.C.)ha fatto i capricci qualche volta non mi segue non vorrei aver perso qualche infor.importante per me scusami e abbi pazienza (voglio essere un'amica) Gil

    RispondiElimina
  20. @gil: eh sì, ogni giorno ricevo tante richieste ma il tempo che ho a disposizione è poco quindi mi è difficile accontentare tutti e in breve tempo.
    Ho controllato e ora sono amministratore nel tuo blog. Spero di realizzare presto la firma che mi hai richiesto.

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy