The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
Finding Specific StyleVars
mmfgamer5
Join Date: Mar 2010
Posts: 139
08-06-2011, 10:00 PM
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, 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.  Click here for larger image. 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.  Click here for larger image. 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.  Click here for larger image. 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.  Click here for larger image. 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.  Click here for larger image. 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.  Click here for larger image. 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.  Click here for larger image. 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
|
|
#2
08-10-2011, 04:44 PM
|
|||
|
|||
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, 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.  Step 3: Now, click on the CSS tab in Firebug. This will bring up the whole webpage's CSS.  Click here for larger image. 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 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.  Click here for larger image. Step 5: After copying the hex code, paste it into the search box, and press the Enter/Return key.  Click here for larger image. 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.  Click here for larger image. 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.  Click here for larger image. 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
|
|
#4
08-16-2011, 09:32 AM
|
|||
|
|||
|
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
|
 |
«
Previous Thread
|
Next Thread
»
|
|
All times are GMT. The time now is 02:37 PM.