No announcement yet.

How To: Find the correct StyleVar/LayoutVar to edit

  • Filter
  • Time
  • Show
Clear All
new posts

  • How To: Find the correct StyleVar/LayoutVar to edit

    This "How-To" will show you how to find the correct stylevar to edit to change a specific style element in vBulletin.

    To make this easier for you, use FireFox and FireBug. You have to be able to use FireBug to inspect different areas of a webpage. If FireBug is something new for you, then please read some FireBug Tutorials

    Finding the correct StyleVar

    Finding the correct stylevar requires first to find the css class you want to edit and the attribute that you want to change.
    1. Use FireBug to inspect the specific area you want to edit. Find which css class is the correct one that reflects on your desired changes. A good way to do it, is to edit the css attribute of the class you think is the one to edit and pay attention to the changes that instantly will be displayed on your FireFox. Sometimes it requires to edit a child/parent css class in order to reach the desired changes.
    2. Now that you found the correct css class, copy it and go to Styles & Templates -> Search Templates, and search for it. In the search results you will see the css template(s) which you can enter to read. Scroll down to the css class you just copied and read the class attribute and find out which stylevar represents the attribute to change.

    Let's say you want to edit the header background color.
    1. Use FireBug to inspect the correct css class, you will find out the it is above_body
    2. Go to Styles & Templates -> Search Templates, and search for above_body. You will see vbulletin-chrome.css, enter it and search for above_body inside the template.
    3. You will see that the above_body css class has the attribute background which is what we want to edit. Beside the attribute, background for instance, you find the stylevar and in this case it is header_background.
    4. Go back to stylevars/layoutvars of your style and search for the stylevar variable, enter, edit and save.
    And you are done
    $someone->needsHelp() && $i->canHelp()) $post->help();
    $i->findBug()) $post->bug();

Related Topics