Register Arama Bugünkü Mesajlar Mark Forums Read

Reply
 
Thread Tools
Finding Specific StyleVars
vB.Org Poster
vB.Org Poster has disabled reputation
Kayıt Tarihi: Jul 2018
Mesajlar: 298

Show Printable Version Email this Page
Makale: vBulletin 4 Makaleleri, yazar vB.Org Poster 09 Jul 2018, 23:41

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
  • More spacing in-between images and the next step.
Views: 15
Reply With Quote
Reply

Thread Tools

Şunları Yapabilirsin
Yeni Konu Açmak
Konuya Cevap Yazmak
Eklenti Eklemek
Düzenleme Yapabilmek

Forum Atla


New To Site? Need Help?

All times are GMT +3. The time now is 15:36.

Tasarım Özelliği | Genişlik: Geniş Renk: Finding Specific StyleVars Finding Specific StyleVars Finding Specific StyleVars Finding Specific StyleVars Finding Specific StyleVars