How to Debug CSS or Function Code to Fix Your Website Using Firebug

This firebug video tutorial explains about the extensive use of fire bug. If you are customizing your theme or you are designing your website, f irebug is very helpful for you. If you got any customization code from online websites even though the custom function.php code is working fine you need some modification in custom.css file in order to fix this code in your site. We already explained the basic use of  firebug in webpage design.

This video explains with an example ie) I got a code for second navigation menu from one web page and I wanted to add that code in my site. This contains custom functions code and css code. If you add this custom function code directly to your custom functions.php file if any error in that codes your site displays error message, you need ftp to solve this issue. In order to avoid the error and style according to your wish, you can use firebug.

First you can check the code by applying in your site using firebug. Once it is working fine then do some css changes in firebug, don’t refresh this webpage until all modification has been done, if you refreshed, this modification has been erased. Once you finished all modification firebug then copy this code and applied in custom.css or custom_function.php file via wp-admin.

This video explains about…

How to debug custom.css function code?

How firebug options works?

What is the use of firebug?

How to check a css or function code working or not?

How to edit css code using firebug?.

Hoe to add functions code in your site using fire bug?

It contains an example of how to add second navigation menu in thesis theme using firebug.

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 19 comments… add one }

Leave a Comment

  • BestofBlogger February 19, 2010, 2:59 AM

    It ok. Thank you for firebug tutorial. My question is: Can’t we save changes with firebug?

    • Suresh February 19, 2010, 10:48 AM


      thanks.. i have mentioned in post we cant save the changes in firebug, so before refreshing the web page you should copy the modified code from firebug..

  • DB May 10, 2010, 6:16 PM


    Can you please explain how you added the Related Tutorials at the bottom of each post?

    I am looking into adding something similar to this, only to call it Popular posts and I can’t seem to find how to make this happen on my blog.

    I would greatly appreciate your help.

    Thank you

  • Suresh June 16, 2010, 11:53 AM

    hai Saif,
    I am not able to translate your site… so i am not able to see the font style..

    do you want the above same title style for all headline h1 and h2.?

    then add the below line in front of .headline_area h1, specified in your comment to change in teaser box headline.

    .teaser h2, .teaser h2 a,

    then the second add .teaser h2 a:hover, before .headline_area h1 a:hover, specified in your comment.

    hope it will help you..

  • Suresh June 16, 2010, 3:15 PM

    hai saif,

    sorry..I am not able to see your site in english..

    It shown only squares for all your text.. how can i identify your problem..

    why it show error while applying google translate to your site?..

    • Suresh June 16, 2010, 3:28 PM

      hai Saif,

      I couldn’t exactly figure out your problem…
      css need for which part? fb-share or key board layout?

      • Suresh June 16, 2010, 3:48 PM

        hai saif,

        You used div id=”keyboard” in custom functions code.

        to style the hole keyboard part use below line in custom.css
        .custom #keyboard { here add your style}

        to style your individual buttons
        add the below part for
        first button
        #keyboard #unijoy { here add your style}
        2nd button
        #keyboard #phonetic { here add your style}
        3rd button
        #keyboard #probhat { here add your style}
        4th button
        #keyboard #english { here add your style}

  • Suresh June 16, 2010, 9:33 PM

    hai Saif,
    add the below code in custom.css file
    .custom .entry-content p:first-child:first-letter {
    color: #888;
    float: left;
    font-size: 3.571em;
    line-height: 0.76em;
    padding: 0.04em 0.12em 0 0;


  • Suresh June 18, 2010, 3:10 PM

    hai saif,

    To enable excerpt only in homepage.. Go to wp-admin select ‘site options’ in thesis1.7 (thesis options in 1.6).
    Inside this select display options–> posts

    here enable the check box ‘excerpts only’ and save it.

    now you will get only excerpt in homepage

    • Suresh June 18, 2010, 3:49 PM

      hai saif,

      when i open your site it show HTTP 403 – Forbidden error..
      I will check it when it it is visible to me..

      • Pascal June 20, 2010, 3:59 PM Reply
        • Pascal June 20, 2010, 10:34 PM

          Hi, Actually the site loading time is better than fourblogger blog.

          Design is good.

          I could not see the language. Just this is what i am seeing.

          • Pascal June 20, 2010, 10:50 PM

            @Saif Hassan

            I have already UTF-8 code support.

            But I think didn’t have bangala fonts. Just now put in my PC.

            But my other team people have already and in those people’s computer, I have already seen your blog.

            Here is screenshot.

  • smith July 22, 2010, 2:50 PM

    Hello mr suresh. can u help me?
    this is my site
    how can i center the adsense header ad?

    i use this code in my custom_functions.php

    ‘name’ => ‘HeaderAd’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”

    function header_widget() { ?>

    <?php }
    add_action('thesis_hook_header', 'header_widget', '1');


    .custom .sidebar ul.sidebar_list {position: relative;}
    .custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:0px; left:477px; width:468px; }

    I cant wait.
    I really need you help. my email

    • Pascal July 22, 2010, 3:17 PM

      Hi smith,

      I can fix single issue for $5. If you want to be done by me contact me via the contact form. I will send you my paypal id.

  • chung November 17, 2010, 8:32 AM


    I’ve watched all your videos regarding the use of Firebug but the problem that I’m having is putting (copy and pasting) html code in thesis’s custom_function.php properly.

    I think it may be a good idea to go one-step further and show your audience exactly not only how to make changes using Firebug BUT actually putting these changes on the website via custom_function.php.