Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
HOW TO Find what Stylevar you need to edit
Dunhamzzz
Join Date: Jul 2008
Posts: 54

Hampshire, UK
by Dunhamzzz Dunhamzzz is offline 16 Dec 2009

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):


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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, 1077 views)
File Type: jpg firebughowto2.jpg (166.6 KB, 960 views)
File Type: jpg firebughowto3.jpg (154.3 KB, 697 views)
File Type: jpg firebughowto4.jpg (139.5 KB, 659 views)
Views: 206969
Reply With Quote
Comments
  #2  
Old 16 Dec 2009, 19:38
Trip's Avatar
Trip Trip is offline
 
Join Date: Mar 2008
Real name: Troy
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
Reply With Quote
  #3  
Old 24 Dec 2009, 19:28
tafreeh's Avatar
tafreeh tafreeh is offline
 
Join Date: May 2008
Location: Canada
Real name: DON
thanks for that.. but i guess Google Chrome has this default
__________________
Vb Forum
Reply With Quote
  #4  
Old 28 Dec 2009, 15:09
fourat's Avatar
fourat fourat is offline
 
Join Date: Mar 2008
thanks for that
__________________
لا إله إلا الله .... محمد رسول الله
Reply With Quote
  #5  
Old 28 Dec 2009, 21:31
chloe101 chloe101 is offline
 
Join Date: Dec 2007
OMG Dunhamzzz!! I LOVE YOU! Thanks for saving me sleepless nights!
Reply With Quote
  #6  
Old 29 Dec 2009, 11:06
Brother Malachi Brother Malachi is offline
 
Join Date: Jun 2008
Real name: Nick
The stylevar dictionary is also very helpful:
http://www.vbulletin.com/forum/entry...F-Documents%29
Reply With Quote
  #7  
Old 04 Jan 2010, 16:06
chriske chriske is offline
 
Join Date: Oct 2008
Thanks, Should have used this earlier!
Reply With Quote
  #8  
Old 04 Jan 2010, 22:19
Cableguy69 Cableguy69 is offline
 
Join Date: Apr 2008
Thanks for this will make my life easier.
Reply With Quote
  #9  
Old 05 Jan 2010, 16:51
Dunhamzzz Dunhamzzz is offline
 
Join Date: Jul 2008
Real name: Matthew
Originally Posted by tafreeh View Post
thanks for that.. but i guess Google Chrome has this default
Same, I oly use FF on my development desktop.
Reply With Quote
  #10  
Old 08 Jan 2010, 15:48
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
for me I just search for the nearest template tag : < -- tag -->
Reply With Quote
  #11  
Old 16 Jan 2010, 12:54
Attitude5ire's Avatar
Attitude5ire Attitude5ire is offline
 
Join Date: Feb 2006
You can also use Web Developer Extension, its lighter than firebug. I prefer that.
__________________
New Style Satinacious Released
DigitalVB.com
simply beautiful! vBulletin designs
Join us on Facebook

Reply With Quote
  #12  
Old 16 Jan 2010, 16:00
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Originally Posted by Attitude5ire View Post
You can also use Web Developer Extension, its lighter than firebug. I prefer that.
Or have both, like I do. I use different parts from each one depending on what I'm trying to do.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #13  
Old 23 Jan 2010, 18:39
carrlos's Avatar
carrlos carrlos is offline
 
Join Date: Nov 2006
This really helped me but it's ridiculous that I have to resort to all this to make some simple color changes.
__________________
http://www.iphonemodding.com
Reply With Quote
  #14  
Old 27 Jan 2010, 16:18
Mukashi's Avatar
Mukashi Mukashi is offline
 
Join Date: Jan 2004
Real name: Liam Pomfret
Agreed. For people like myself who basically only had 4 color setups (not including text and links), it's ridiculous that we now need at least an hour to create a basic style, with the first style just learning the stylevars taking significantly longer than that.

I posted a request for a mod or script that would convert the colour scheme from a vB3 style into the vB4 stylevars, that's been put into the requests for paid services by a mod, but I've not even had a nibble as yet.
__________________
Webmaster, Bulbagarden.net / Bulbapedia
Reply With Quote
  #15  
Old 30 Jan 2010, 03:23
Mecca860 Mecca860 is offline
 
Join Date: Apr 2008
Very great topic...fixed a couple of things that where off in my forum...thank you very much
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

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


New To Site? Need Help?

All times are GMT. The time now is 10:38.

Layout Options | Width: Wide Color: