Knowing CSS can help you in solving Blogger template errors ,or make some customization . But how to do that ? how to find where is the trouble or find what CSS attribute you need to change when  make customization ? In this post ,I will show you what I did : using Firebug (a Firefox add-on ) to work with CSS


Firebug is a great add-on of Firefox browser ,it's very popular in web development because it can help us inspecting website elements ,debugging errors in CSS ,script ,seeing web layout ....
To use Firebug ,first ,Firefox browser must be installed in your PC . Then go to website : http://getfirebug.com/ ,click on Install Firebug to get the latest version and installed this add-on to Firefox .

After installing Firebug ,you will see an new button in browser window ,this button has the image of a bug .

Enter the Blogger blog you want to fix errors or make customization
When the page fully loaded ,click on firebug button ,the firebug window will appear at the bottom of browser window .

Click on the arrow button in firebug window
 
After click this button ,there will be a rectangle around the element that the mouse is pointing .  Move your mouse pointer to the element you want to change size or fix error
In the right panel of firebug window ,you will see the CSS tags of element which you are pointing .


You can click on the value of these CSS attributes to change value of them ,for example ,in this picture ,I changed width of an element in the right panel ,and see how it look after changing immediately in browser window .
You can also add more attributes to a CSS tags to make it display as you want ,for example ,you want color of all text in an element changed to white color,just right click on right-panel and ,choose new property ,and then add color:#fff;

That's very easy and fun because you can see how your site is right after making changes .

But how to know which CSS need to change ,or meaning of CSS tags or what need to add to make it display as you want ? You can see it easily in my previous post : 31 online CSS cheatsheets that may helpful .

You can use Firebug to see the element layout ,the right or left margin ,padding... in Layout tab in right panel .
When you finish the work ,just go to Blogger template (xml file) ,and add the tags or attributes that you've just added in Firebugs to your template .
There're many functions that Firebug can help you in finding bugs and fixing errors .It's very easy to use ,believe me ,just need a little of time ,you can handle this software and make it work for you ^^

Share this post

Advertisement

13 comments

  1. I tried it with SimplexBuzz to fix missing post image background too, but no luck cause it 's that simple for me :(

    Please, advice me further. I am using it here: http://adultloo.info

    ReplyDelete
  2. @Open door to everyone... : I can't access your site at http://adultloo.info . The page can not load

    ReplyDelete
  3. I always use this application for each template edit your blog / website.
    I often do when you want to imitate anything in other people's websites. hehehe
    nice share bro \m/

    ReplyDelete
  4. @nhamngahanh, try again dude. It's hosted in Blogger; and as it's adult it you have to click I accept to open the page. It has been working fine for years :)

    ReplyDelete
  5. Firebug helped my work done x3 faster.

    ReplyDelete
  6. The post is pretty interesting. I really never thought I could have a good read by this time until I found out this site. I am grateful for the information given. Thank you for being so generous enough to have shared your knowledge with us.
    Business Loan

    ReplyDelete
  7. Glad to know about fire bug it is a very useful information

    ReplyDelete
  8. Firebug is the best! I use it all the time to troubleshoot issues on webpages.

    ReplyDelete
  9. woww, I have a lot of errors in css, maybe I can try this :)
    thanks . .

    ReplyDelete
  10. Firebug was really helpful.In our web design company we use the Firebug to solve many errors regarding the CSS bloggers.

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers