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.
Related Tutorials:
- How to use Firebug to Debug CSS and Function code of a Web page
- How to Use Hooks in Thesis Theme?
- How to add Page Navigation Menu without Using Open Hook Plugin in Thesis Theme
- Widgetized Thesis Theme-Header, Content box and Footer
- How to Change Background and Border in Thesis Theme
Article by Suresh K
Suresh has written 40 awesome articles.
Subscribe to feed via RSS or EMAIL to receive instant updates.
Subscribe to our fourblogger You tube channel
Fernando (4)
Sameer (3)
aaslin (2)
Asrul (2)
blogger gurem (2)
Carol (2)
David (2)
issty (2)
Nate (2)
{ 33 comments… read them below or add one }
It ok. Thank you for firebug tutorial. My question is: Can’t we save changes with firebug?
hi,
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..
Hi
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
hi Db We use YARPP plugin. For more wordpress plugin check this post http://fourblogger.com/12-necessary-plugins-needed-for-wordpress-blog-video-tutorials/
Great!
Thanks.
I Have A Question!
I Have Added A Small Customization For The Titles Of Posts.
But It Shows Only in Two Featured Posts!
The Code is Like This
It Works For Only 2 Featured Posts… How To Activate This CSS For All Posts Headline?
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..
Ohh … Suresh Thanks.. Its Working Perfectly..
Thanks Very Much…
1 Question Also…
I have added A Set Of Local Keyboard At The Comment Box by adding these lines on Custom_Functions.php (Actually I Haven’t Added! You Gave Me The Code How To Place It)
function keyboard_layout(){
?>
<fb:share-button href="" type="box_count">
<?php
}
add_action('thesis_hook_after_comment_box','keyboard_layout');
Below The Comment Box I can see 4 Button. Like This:
But How Can I Customize Its CSS?
There Are Four Buttons On That Place… I Wanna Make That Like The “Reply” Button Of This Page.
Oh Sorry…The Code Is
/*BanglaKB Plugin Code*/
function keyboard_layout()
{
?>
<?php
}
add_action('thesis_hook_after_comment_box','keyboard_layout');
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?..
Because Bengali Language Translation Support Isn’t In Google Translate Still!
hai Saif,
I couldn’t exactly figure out your problem…
css need for which part? fb-share or key board layout?
Keyboard Part
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}
Thanks! Now I can Style As I Can
Suresh…
Can You Say How To Make Every Posts’s First Word DropCapped Automatically (in Both Teaser Posts & Featured Posts) ?
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 Thanks Again…Working Properly..
I Use Only Post Excerpts (Not The Full Post). That’s Why Any Image & Links Dont’t Activate On First Page. Can You Tell Me How To Activate Only Images & Links Inside Posts Make Visible In The Home Page’s First Two Featured Posts & In The Teaser Posts? (I Don’t Wanna Use The Full Post Option)
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
Hahaha… You Didn’t Understand…
I’m using Post Excerpts. That’s Why in Homepage Post’s Link Don’t Work
I am trying to say that How to activate links and images in excerpt in homepage?
hai saif,
when i open your site it show HTTP 403 – Forbidden error..
I will check it when it it is visible to me..
My Site Is Temporally Down For Hosting!
I will inform u when my site is OK!
My Site Is Ok Now…
Can U Tell Me Now How To Activate How to activate links and images in excerpts & Teasers in homepage?
This will help you to use image in thesis teasers.
http://fourblogger.com/how-to-add-thumbnail-image-inside-the-teaser-box-of-thesis-theme/
Thanks
Pascal Can You Kindly Visit My Site & Give Me Some Comments About It ? (About The Design, About The Loading Time Etc Etc). I Know Its A Localized Website Yet You Can Give Some Comments…
Would You Kindly Give Me Some Advice Please ?
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.
http://fourblogger.com/wp-content/uploads/2010/06/yout-site.png
Ohh Pascal..
U don’t Have UTF-8 (Unicode) Support On Your Site?
You Should Have It Now.. Lots Of Site Are Designed in UTF-8..
Ok
Now You Will Need 2 Things…
1) iComplex Bangla Tool
2) Then You Will Need 2 Fonts.
Install These 2 Fonts On Your PC (Just Paste On Control Panel>>Fonts)
a) SolaimanLipi
b) SiyamRupali
Then Give Me A Screenshot Of My Site…
Another Strange Thing Is U & I Both Use Google Chrome & We Use The Same Theme…Isn’t it Strange?
Thesis Experts!
Would You Kindly Tell Me How To Increase Font Size of the top commentators widget ?
I want to increase these font!
Can Anyone Tell Me How To Increase Font Size Of Custom Widgets?
I have added two widgets on right widget footer.
But Their Text Size is too small to read.
Can Anyone Tell Me How Increase Text Size On Those Two Widgets?
Thanks
Saiftheboss7
Hello mr suresh. can u help me?
this is my site http://salesmanagementjournal.com
how can i center the adsense header ad?
i use this code in my custom_functions.php
/***BUILD HEADER WIDGET***/
register_sidebars(1,
array(
‘name’ => ‘HeaderAd’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”
)
);
function header_widget() { ?>
<?php }
add_action('thesis_hook_header', 'header_widget', '1');
/*** BUILD HEADER WIDGET END***/
AND THIS I PUT ON MY CUSTOM.CSS
.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 admin@salesmanagementjournal.com
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.
@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. http://fourblogger.com/wp-content/uploads/2010/06/bangla.png
Screenshot Link Isn’t Working!
Upload Into Imaghost.org Please!
{ 2 trackbacks }