![]() |
|
Article Options |
HOW TO Find what Stylevar you need to edit
by
![]() 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:
![]() 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):
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:
![]() Cheers to Lynne for noting that you can search for the CSS classes/ids in Search In Templates The following members like this post: too_cool_3
|
||||
Views: 207756
|
Comments |
#2
|
||||
|
||||
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
![]() ![]() No members have liked this post.
|
#3
|
||||
|
||||
thanks for that.. but i guess Google Chrome has this default
![]()
__________________
Vb Forum No members have liked this post.
|
#4
|
||||
|
||||
thanks for that
__________________
لا إله إلا الله .... محمد رسول الله No members have liked this post.
|
#5
|
|||
|
|||
OMG Dunhamzzz!! I LOVE YOU! Thanks for saving me sleepless nights!
No members have liked this post.
|
#6
|
|||
|
|||
The stylevar dictionary is also very helpful:
http://www.vbulletin.com/forum/entry...F-Documents%29 No members have liked this post.
|
#7
|
|||
|
|||
Thanks, Should have used this earlier!
No members have liked this post.
|
#8
|
|||
|
|||
Thanks for this will make my life easier.
No members have liked this post.
|
#9
|
|||
|
|||
Same, I oly use FF on my development desktop.
No members have liked this post.
|
#10
|
||||
|
||||
for me I just search for the nearest template tag : < -- tag -->
No members have liked this post.
|
#11
|
||||
|
||||
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 No members have liked this post.
|
#12
|
||||
|
||||
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.) No members have liked this post.
|
#13
|
||||
|
||||
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 No members have liked this post.
|
#14
|
||||
|
||||
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 No members have liked this post.
|
#15
|
|||
|
|||
Very great topic...fixed a couple of things that where off in my forum...thank you very much
No members have liked this post.
|
![]() |
«
Previous Article
|
Next Article
»
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
Article Options | |
|
|
New To Site? | Need Help? |
All times are GMT. The time now is 16:54.