Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > General Articles
Reload this Page HOW TO Find what Stylevar you need to edit
FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply
Page 3 of 3 12 3
 
Thread Tools
HOW TO Find what Stylevar you need to edit
Dunhamzzz
Join Date: Jul 2008
Posts: 54

 

Hampshire, UK
Show Printable Version Email this Page Subscription
Dunhamzzz Dunhamzzz is offline 12-15-2009, 10:00 PM
Loads of people are having problems finding which stylevar they need for a certain element. Here's an easy way to get you started in the world of css.

You will need:
Right now navigate to the a page that has something you want to change on, open firebug and click inspect as circled here:



Then, using your mouse, hover over the part of your site you want to edit, and all the CSS values attributed to it will appear in the bottom right hand corner:



The underline is the classes/ids that are affecting said element, from these you can derive the name of the style var. In the example we can see the class is ".navtabs li a.navtab:hover", which gives us a clue we're looking for some sort of "tab" variable. We have to use common sense and look in the "navbar" section of the stylevar manager, and we can see there a few variables called "navbar_tab".

If you still can't find the stylevar you need, you can also copy the id from the firebug panel - .navtabs li a.navtab:hover - and go to Search in Templates. That will bring up the css template where it is defined - vbulletin-chrome.css in this case. Click on the template to Edit and then click on Find (the words you searched for will already be entered in the Search box). You will then see exactly what stylevars define that class (in case it isn't obvious):

Code:
.navtabs li a.navtab:hover {
    background:{vb:stylevar navbar_tab_selected_background} 0 -{vb:stylevar navbar_tab_selected_top_width}px;
        _background-image:none;
    /*color:{vb:stylevar linkhover_color};*/
    color:{vb:stylevar navbar_tab_linkhover_color};
}
We can see the var that we need to edit (navbar_tab_selected_background) here:


In this example (below) we can see the CSS name for this bit of the forum is called ".threadbit .alt", so look in the threadbit section in the stylevars and voila! You should see alternating colour in there.



This obviously won't plainly point out the variables all the time, but it's a step in the right direction. You can also check you're editing the right variable by checking if the values you see in firebug reflect the variables in the admincp.

Handy Hints:
  • You can open Firebug with F12!
  • You can also right-click and select "inspect element" to get right in the action!
  • You can click on the CSS values and change them on-the-fly to get a preview!
  • You can edit the HTML as well!
  • There are ways to get Firebug on IE, if you really, really must.!
*Edit- Would have looked better with the images displayed inline as in the Preview
Cheers to Lynne for noting that you can search for the CSS classes/ids in Search In Templates
Attached Images
File Type: jpg firebughowto.jpg (151.5 KB, 0 views)
File Type: jpg firebughowto2.jpg (166.6 KB, 0 views)
File Type: jpg firebughowto3.jpg (154.3 KB, 0 views)
File Type: jpg firebughowto4.jpg (139.5 KB, 0 views)
Reply With Quote
  #22  
Old 04-03-2010, 09:26 PM
skrabler's Avatar
skrabler skrabler is offline
 
Join Date: Mar 2010
Location: Bozeman, MT
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by tafreeh View Post
thanks for that.. but i guess Google Chrome has this default
Chrome has several css identification extensions that will help.
Reply With Quote
  #23  
Old 05-18-2010, 03:53 PM
Fuhrmann Fuhrmann is offline
 
Join Date: May 2010
Posts: 76
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Great this! I already tried to make something like that on Chrome...but now i will try on firefox.
Reply With Quote
  #24  
Old 07-21-2010, 08:43 AM
salafmisr.net's Avatar
salafmisr.net salafmisr.net is offline
 
Join Date: Apr 2010
Posts: 11
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
very useful topic , thanks
Reply With Quote
  #25  
Old 08-19-2010, 05:59 AM
delmarva's Avatar
delmarva delmarva is offline
 
Join Date: Jun 2006
Posts: 140
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by daveaite View Post
Thanks so much for this!
Reply With Quote
  #26  
Old 04-02-2011, 06:39 PM
garycb garycb is offline
 
Join Date: Mar 2011
Location: Missouri, USA
Posts: 1
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
IE 9 has the option for Developer tools which appears to have the same functionality as Firebug has with Firefox. I have worked with it at length just a off the cuff comment.
Reply With Quote
  #27  
Old 01-21-2012, 05:22 PM
too_cool_3's Avatar
too_cool_3 too_cool_3 is offline
 
Join Date: Sep 2007
Location: ON, Canada
Posts: 108
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
This thread just saved me an unimaginable ammount of time trying to skin my forum. I don't know how I even did it without firebug before. (very slowly lol).

This thread should be stickied here and over at vb.com !
Reply With Quote
Reply
Page 3 of 3 12 3

« Previous Thread | Next Thread »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 02:28 PM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04826 seconds
  • Memory Usage 2,289KB
  • Queries Executed 22 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_code
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (7)post_thanks_box
  • (2)post_thanks_box_bit
  • (7)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit
  • (7)post_thanks_postbit_info
  • (6)postbit
  • (4)postbit_attachment
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete