Tutorials, tips and tricks about Blogger

08 Sep

Customizing Blogger templates easily with Firebug

41 Comments | by in Design, Tips and Tricks, Tools, Tutorials | 2011

Español Português

Customize a template is one of the first challenges for those who start a blog. To do this, nothing can save us of learning the basics of HTML and CSS, but there are some tools that can make this easier, as Firebug, a extension for Firefox and Chrome.

One of the simplest tools, but also more useful, in Firebug is Inspected, as its name implies, lets you navigate through each element of a website and know how it is configured and related to other elements.

This little guide will focus mainly on modifying the CSS code to adapt a design to our needs. CSS in Blogger is within the same template, between the codes <b:skin> and </b:skin>.

Customizing the CSS of a web element with Firebug.

To customize any feature of a web element from a Blogger template you simply:

1. Install Firebug in your browser: Firefox or Chrome. Personally I recommend to use Firefox, is more complete and quick, but applies to both the content of this tutorial.

2. Click the button for Firebug in the toolbar , then click the button to Inspect  and place the cursor right over the element to customize, it can be text, image, video, flash or anything, and click on it.

3. In the right Firebug panel, with the tab “style” active, shows all the styles that affect the element.

Styles are shown as a CSS style sheet, however, Firebug, sort and standardized the properties alphabetically.

It’s easy to recognize the following information: selectors, properties and the CSS rule location (code line and file that contains it).

4. Live tests.
Something very interesting of Firebug is that you can modify any CSS property and see the results directly applied on the page. You only need to click on the property or value to change it and see what happens directly on the page.

For properties that can only take certain values​​, Firebug lets explore them just clicking on the value and use the up and down keys of the keyboard.

And in the same way for numeric values:

Another really useful option is to disable the properties to see how an element behaves without them, simply click on the red circle to the left of each property.

Find the background image of an element is also useful when you are customizing a template, for it is only necessary to be placed on the element, clicking, and the panel of “Style” will appear the selector that contains the image, usually in property background or background-image.

Once you know you’ve come to the desired result in the tests, you need to apply those same changes to the styles in your template. Firebug saves never the changes, you should make this part of your hand.

In other words, if you’ve added a property in Firebug, you should add that same property to your CSS code, if you’ve made ​​a modification, it must be done in the styles of your template.

Screencast

With this introduction, you can see Firebug in action in the official screencast.

Conclusion

Firebug is a very intuitively tool, so some recommendations: Try and try, you will learn a lot about CSS and the tool itself, but without the risk of affecting your design. Read the official guide, where you can learn to take better advantage of the extension. And finally, learn at least basic CSS and HTML, it will make any design task less frustrating.

Comments

41 Comments, leave a reply · Feed
  1. My blog template you lost with the background images this morning. What happened?? You’re bringing me a nuisance!

  2. ayah arya February 6, 2012

    thank’s for you information,i need this for my tamplate

  3. thanks info firebug, ,

  4. that is just client side only right,,..?

    i prefer use inspect element in google chrome.
    thanks for share this great post. :D

  5. Tate Mcgee July 5, 2012

    Hooray for the Firebug. This appears to be a great tool.

  6. AryKame July 22, 2012

    Please accept my template ^_^

  7. kadinlar October 4, 2012

    be not fully understand

  8. Multi Info November 13, 2012

    i’m a little bit confused o.O

  9. KUSEN PINTU JATI December 25, 2012

    there’s always an interesting work that makes people amazed to use. I like. and i’ll try it.

  10. nagababu May 8, 2013

    Yes firebug is really useful tool.I use this tool to find the source code of template and do some modifications to my template.From now on wards its easy to me.Thank you

  11. Adhitya June 22, 2013

    Easily tools, but what is the difference to Inspect element?

  12. Osfir Insan Bersahaja July 2, 2013

    Really… i will try
    I think this tool Is easy but Useful An interesting work
    awasome.

  13. mian umair ahmad July 8, 2013

    hhhhhhhhhhhjjjjjjjjjjjjjjj

  14. mian umair ahmad July 8, 2013

    Blending Headers into the Background With Artisteer (Blogger)
    Create Unique And Custom Designed Website Templates With A Click Of A Button
    Design quality WordPress themes in a minute with Artisteer
    Review of Artisteer software for automatically generating Drupal themes
    Generate your own Drupal themes — too good to be true?
    ArtISteer Review: An Absolute Must for Drupal and WordPress Design

  15. Tricajus July 29, 2013

    I’ve tried using firebug, good results can be seen once before use

  16. Thats a nice and useful information to be appreciated. Thanks

  17. demolek from Poland October 5, 2013

    Why not instalation btemplates on blogger?
    “Zapisanie szablonu nie powiodło się.
    Nie można przetworzyć szablonu, ponieważ nie jest on poprawnie sformułowany. Sprawdź, czy wszystkie elementy XML zostały prawidłowo zamknięte. Komunikat o błędzie XML:
    (SyntaxError) stack: SyntaxError: Unexpected token < at Pfc (:179:28) at Object.W$b [as th] (:393:5010) at Object.Gpe [as Hf] (:994:43571) at Aod (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2663:190) at qod (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2460:60) at ql (com.google.blogger.b2.gwt.app.BloggerModule-0.js:890:26) at Object.Cpe [as Vc] (:994:43492) at L3c (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2446:104) at C3c (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2032:61) at Object.P3c [as Oh] (com.google.blogger.b2.gwt.app.BloggerModule-0.js:2821:1524) __gwt$exception: : Unexpected token <"

    Limax.xml

  18. Miko Waldufri November 12, 2013

    hi there, i’m using the amazing template from you guy, and thanks for that. but now i have any problem in customization, i don’t know how to use the slide picture, and why the date icon doesn’t work (undefined)? Please teach me to solve this problem, i’m a beginner actually. thank you.

  19. training plans for runners January 9, 2014

    Its really hard to find informative info but here I can… Pretty nice post. I just wanted to say that I have truly enjoyed browsing your blog posts. In any case I’ll be subscribing and I hope you write again soon..

  20. Swaraj Mazda Parts January 18, 2014

    B.P. Impex Specializes in after market parts for Leyland, Tata Motors, Leyland parts India, Engine Parts in India, Engine Parts India, Tata and motor parts

  21. Phone Charing Station January 18, 2014

    With 98% percent of Americans owning an active cell phone or mobile device Veloxity One LLC understands the importance of keeping consumers connected with the rest of the world
    Cell phone charging station
    Cell phone charging kiosk
    Phone charging machine for rent
    Smartphone charging station
    Multiple device charging station
    Universal charging station
    Electronics charging station

  22. Nata Exam February 5, 2014

    Firebug is really helpful, its helps to check the code of every controls as well as CSS of web page. thank you… keep posting,, :)

  23. Business grade internet in Brisbane February 7, 2014

    Thank you for sharing a nice information . this is very useful and informative for everyone .

  24. Fire Pit Kit March 23, 2014

    This is really an awesome project. Every detail has been thought of, even the additional traffic of the construction workers.

  25. Nashville Shoulder Pain April 12, 2014

    This is really an awesome project. Every detail has been thought of, even the additional traffic of the construction workers. Great effort guys

    Really,the good one. Everyone will appreciate this. Thanks for this amazing post.

  26. Nashville Back Pain April 12, 2014

    This is really an awesome project. Every detail has been thought of, even the additional traffic of the construction workers.
    Great effort guys

  27. AsubJourney April 13, 2014

    Thank you for this article.Personally,I think this material is great.I agree with much of your information here…

  28. mexicoflowers May 5, 2014

    Deliver your love as in the form of Flowers, Chocolates and many other gifts to the doorsteps of your loved ones and express your affectionate love to them. Order amazing collection of gifts for the people of Mexico and show them that how much your care about them. Send gifts to Mexico with lots of joy and happiness.

  29. Toronto Limo May 7, 2014

    Its jsut a great information.. nice sharing about useful tool

  30. Beverly HIlls May 14, 2014

    The area is run down today, but it is possible to explore the remnants of the compound, much of which are rusted over and covered in graffiti. While the ruins may be stark and somewhat ugly for the most part, the walk through Murphy’s Ranch includes some of the best attractions nature has to offer in the greater LA area.

  31. Software developer kanpur May 23, 2014

    Thank you so much for the great share

  32. toner cartridges May 24, 2014

    Thank you for sharing a nice information

  33. Tao Yoga May 30, 2014

    Very thankful to share great information related to firebug.

  34. Mp3skull June 2, 2014

    fire bug is superb software

  35. Penerjemah Bahasa June 7, 2014

    great share.. thank you very much

  36. Thanks for sharing your info…really nice post it helps a lot

  37. Ionita Elena July 5, 2014

    I like this post because it help us with a lot of important information!
    Thank you very much!

  38. nice share , thank you

  39. live bangla news July 24, 2014

    Great tutorial.

  40. DSC 2014 August 4, 2014

    I like this post because it help us with thank you very much

  41. Julie Hegyi August 13, 2014

    Sunshine coast real estate Waterfront property BC Sunshine coast real estate listings Sunshine coast property Keats Island BC Keats Island Real Estate

Reply

Thank you for your comment! If it contains links, your comment will be moderated. Please, don't spam :)

Tutorials, tips and tricks about Blogger