No announcement yet.

Easiest way of finding which stylevar affecting a specific place in the vBulletin?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Wayne Luke
    We try to name the style variables based on the element they affect. All header style variables start with header. All module style variables start with module. Etc... If you can't find the variable you want this way then using your browser's developer tools is the quickest way. I am using Google Chrome so my steps reflect that.
    1. Right-click on the element you want to change
    2. Choose "Inspect Element."
    3. In the new window that opens it will show the HTML for the element and its CSS on the right column.
    4. Get the classes from class=""
    5. In the AdminCP get the Search in Templates function to search for those classes.
    6. Review the CSS that comes up in the search results. It will list which style variables are used, if any.
    This is the method that I use every time someone asks "What style variable is this?"

    Or you can simply skip the style variable altogether, inspect the element, get its classes and write your own custom CSS in the css_additional.css template. Both methods are considered valid.

    Leave a comment:

  • Glenn Vergara
    What In Omnibus said. But this may also help a bit.

    In some cases, an element style is hardcoded and not tied to any stylevar. In those cases, use css_additional template to add your custom CSS.

    Leave a comment:

  • In Omnibus
    There is no "easy" way to find out which stylevar controls which element(s), id(s), or class(es) because most control multiple property values. The elements are frequently not named the same as the stylevars which control their properties. Having said that the recommended method of determining a stylevar for a given element is to inspect the element (Right-click - Inspect Element in Firefox) which will show all of the CSS associated with any given element. You can then search in templates for the CSS element(s) selector(s) and their respective properties and values.

    In short, it's not all that easy and sometimes it's easier to just ask because the stylevar that controls the one thing you want to change might also change other things you don't want to change. Stylevars serve a purpose but they are limited in what they allow you to do or not do with a theme.

    Leave a comment:

  • Mr B
    Maybe the thread should be moved to ? I could find a video tutorial for vb4 but my question is regarding vb5.

    Leave a comment:

  • Easiest way of finding which stylevar affecting a specific place in the vBulletin?

    Maybe i have missed some info somewhere but i cant find a simple reference that shows which stylevar is affecting a specific place in the vBulletin 5? Is there a simple way to find out which stylevar that needs to be edited if i for example want to change background color in a specific place?

    Best regard from Anders

Related Topics