|
Finding Specific StyleVars
by
07 Aug 2011
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 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".  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. 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. 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. 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. 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. 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. 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. 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. 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
|