vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   General Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=189)
-   -   HOW TO Find what Stylevar you need to edit (https://vborg.vbsupport.ru/showthread.php?t=230309)

Dunhamzzz 12-15-2009 10:00 PM

HOW TO Find what Stylevar you need to edit
 
1 Attachment(s)
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:

https://vborg.vbsupport.ru/external/2009/12/80.jpg

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:

https://vborg.vbsupport.ru/external/2009/12/81.jpg

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:
https://vborg.vbsupport.ru/external/2009/12/82.jpg

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.

https://vborg.vbsupport.ru/external/2009/12/83.jpg

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

Trip 12-16-2009 06:38 PM

I was aware of the firebug add-on, but never experimented with it and wasn't aware of what it can actually do. Thanks for the write-up, it'll come in handy :):up:

tafreeh 12-24-2009 06:28 PM

thanks for that.. but i guess Google Chrome has this default :)

fourat 12-28-2009 02:09 PM

thanks for that

chloe101 12-28-2009 08:31 PM

OMG Dunhamzzz!! I LOVE YOU! Thanks for saving me sleepless nights!

Brother Malachi 12-29-2009 10:06 AM

The stylevar dictionary is also very helpful:
http://www.vbulletin.com/forum/entry...F-Documents%29

chriske 01-04-2010 03:06 PM

Thanks, Should have used this earlier!

Cableguy69 01-04-2010 09:19 PM

Thanks for this will make my life easier.

Dunhamzzz 01-05-2010 03:51 PM

Quote:

Originally Posted by tafreeh (Post 1937467)
thanks for that.. but i guess Google Chrome has this default :)

Same, I oly use FF on my development desktop.

abdobasha2004 01-08-2010 02:48 PM

for me I just search for the nearest template tag : < -- tag -->


All times are GMT. The time now is 12:13 AM.

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.01183 seconds
  • Memory Usage 1,737KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete