PDA

View Full Version : Finding Specific StyleVars


mmfgamer5
07 Aug 2011, 17:19
This is a technique that I have been using since I have been using vBulletin. This article will show you how to find specific StyleVars, with the help of a Firefox addon named Firebug. Firebug basically allows you to see the HTML/CSS of specific elements of webpages, and allow you to change those elements in real time.

How it works: Firebug allows you to right-click elements of a webpage, and then 'inspect' the code. This is useful, as say you want to change the "Recent Comments" text colour in your websites blog, it will help you to get the CSS element that contains the code which changes the colour of the element. You then take the CSS element and search for it in the templates (in the AdminCP). Then, where the colour is in the template, should hopefully be the StyleVar name. I'm probably not explaining it that well, so lets go into a step-by-step tutorial.


Main Tutorial

Step 1: Download Firebug here (http://getfirebug.com/), and then install, restarting Firefox if required.

Step 2: Go to the page which the StyleVar you want to find is located on. Say you want to change the colour of some text, hover your mouse over this text, right click, and then click "Inspect Element".

https://www.vbulletin.org/forum/external/2011/08/67.png



Step 3: A popup should appear at the bottom of your browser. You will notice on the right is the CSS information. What you will be looking for is a hex colour (#000000, for example). Scroll down until you find one. Once you have found one, move your mouse over it, and you should see the actual colour which the code represents. If this colour is the same as that of the colour of the text you want to change, then go to step 4. If not, repeat until it is found.

https://www.vbulletin.org/forum/external/2011/08/68.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step3.png)



Note: If you get stuck at finding the variable, don't fret. Try right clicking on the element again. You can also hover your mouse over the "Inherited from" header in the CSS code.

Step 4: Now click on the hex code, and change it to something else (I usually change it to white or black, depending on whether it is a light or dark colour [#FFFFFF or #000000]). If you notice a colour change then you're in luck.

https://www.vbulletin.org/forum/external/2011/08/69.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step4.png)



Step 5: Above the variable, in black, should be a CSS element name. Make note of this name. Some of these elements will be separated by a comma - just make note of one of these elements.

https://www.vbulletin.org/forum/external/2011/08/70.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step5.png)



Step 6: Log in to your AdminCP, and go to Styles & Templates > Search in Templates. Set the "Search in Style" dropdown to the style which you want to change the StyleVar in. Then set the "Search for Text" to the name of the element which you noted earlier. Then click Find.

https://www.vbulletin.org/forum/external/2011/08/71.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step6.png)



Step 7: You should notice a few CSS templates. Click on the one which seems most appropriate. For the purpose of this tutorial, I have been inspecting the "Recent Comments" element in the blog, so I am going to double-click on the "blog.css" template to edit it.

https://www.vbulletin.org/forum/external/2011/08/72.png



Step 8: Click on the Find button to jump to the first instance of what you searched. In the CSS code underneath the highlighted text, look for a reference to colour. If there isn't one, click on the Find button again, repeat until you find a reference to colour in the CSS code.

https://www.vbulletin.org/forum/external/2011/08/73.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step8.png)



Step 9: Next to the "color" variable should be something which looks like this:
{vb:stylevar sidebar_header_color}
Copy the text between the "{vb:stylevar " and "}". This is the StyleVar name.

https://www.vbulletin.org/forum/external/2011/08/74.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step9.png)



Step 10: Now go to Styles & Templates > Style Manager > [your style] > Go (StyleVars should already be selected by default). Paste the copied text into the "Search Stylevar" edit box and press the Enter/Return key. You should see the list filtered down to the Stylevar name. Click on it, and edit as necessary.

https://www.vbulletin.org/forum/external/2011/08/75.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step10.png)

If you have any questions, suggestions, feedback etc, please do not hesitate to post below.

Last update: 10th of August 2011 at 17:46 GMT

More spacing in-between images and the next step.

mmfgamer5
10 Aug 2011, 18:44
Tips and Tricks

Finding colour StyleVars quickly: there is a small trick to help you find specific StyleVar colours. It basically uses Firebug to search in the CSS for the hex code of the colour you want to find. This can help if you are struggling to find a colour.

Step 1: Download Firebug here (http://getfirebug.com/), and then install, restarting Firefox if required.

Step 2: Okay, first things first, click on the Firebug button in your browser (after going to the webpage of your choice, where you want to find the StyleVar). For me, it's up in the top right of the Firefox window. This will open the Firebug window without actually inspecting anything via the right click menu.

https://www.vbulletin.org/forum/external/2011/08/55.png



Step 3: Now, click on the CSS tab in Firebug. This will bring up the whole webpage's CSS.

https://www.vbulletin.org/forum/external/2011/08/56.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step3-1.png)



Step 4: Next, take a screenshot of the webpage, and paste it in Paint, Photoshop, Fireworks etc. Using the Pipette tool, click on the colour which you wish to find. Zoom right the way in, so you can be sure to select the lightest or darkest colour (in a gradient). If you're using a program such as Photoshop or Fireworks, which give you the hex code directly, copy that hex code. If you are using Paint, or something which does not give you the hex code directly, make note of the RGB code, then go here (http://www.javascripter.net/faq/rgbtohex.htm) to convert it to a hex code. To find the RGB code in Paint, click on the "Edit Colours" button after selecting the colour, then get the Red, Green and Blue values from the text boxes.

https://www.vbulletin.org/forum/external/2011/08/23.gif
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step4-1.gif)



Step 5: After copying the hex code, paste it into the search box, and press the Enter/Return key.

https://www.vbulletin.org/forum/external/2011/08/57.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step5-1.png)



Step 6: Now it's time to check if you have the right code. Change the hex code to #FFFFFF (white) if it is a dark colour, or #000000 (black) if it is a dark colour. If it changes the colour of the element you're trying to find, awesome, if not, just try step's 5 and 6 again. I'll change the hex code to #000000.

https://www.vbulletin.org/forum/external/2011/08/58.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step6-1.png)



Step 7: If the colour changes, copy the black element text above the variables in the CSS. Some of the elements will be separated by a comma - just copy one of these elements.

https://www.vbulletin.org/forum/external/2011/08/59.png
Click here for larger image. (http://i273.photobucket.com/albums/jj223/Game_Master10P/step7.png)



Step 8: Do steps 6 to 10 in the main tutorial.



If you have any questions, suggestions, feedback etc, please do not hesitate to post below.

Last update: 10th of August 2011 at 18:54 GMT

Minor layout changes.

Taurus1
13 Aug 2011, 07:49
Thank you for an awesome tutorial. It really helps a lot!

leejohn02
16 Aug 2011, 11:32
you can also use chrome, it has an inspect element, also helps if you want to custom ur css code for one specific thing and not the whole style vars, u can change seperate colors, within the elements to test, and the just add the code to the css

Alan_SP
19 Aug 2011, 10:33
Excellent thread. :up:

Opera also has option to inspect element out of the box.