How to find StyleVar responsible for element on page

[srock]

So I open my vBulletin forum and I want to change a color for a specific element. In this case, the background color surrounding a forum post.

So I'm in Chrome and I open developer tools and the element selector to select the big box surrounding all the posts. It shows me a div:

<div id="content">
		<div class="canvas-layout-container js-canvas-layout-container">
... lots more below

Then I go to the Computed styles tab. I find background-color its rgb(245,245,245) #f5f5f5 Color Hex White Smoke. I can change it in developer tools and it changes the element color I want on the page.

Now the hard part. Is there a sane way to figure out what StyleVar in vbulletin is controlling this background-color setting?

I'm currently just looking through ALL the style variables looking for this color code then changing it to see if its the one I want. This is insanity.

I did find this color in the css-additional.css file.
StyleManager->MyStyle ->Edit Template->CSS Templates->css-additonal.css

#htmlTag #content {
	background-color: #F5F5F5;
}

Does this mean there IS NOT a StyleVar controlling this particular color?

I changed it to this:

#htmlTag #content {
	background-color: {vb:stylevar wrapper_background};
}

To set it to a stylevar I can control, wrapper_background, vie StyleVars. Am I doing this correctly? When I upgrade my theme I feel like this will get blown away.

It worked by the way, but this seems an arduous technique for editing a simple color.

VBulletin 5.2.3
Theme: Quarto - with some customizations

[Lynne]

You may want to take a look at this helpful stylevar page for vB5 - ​http://www.vbulletin.com/forum/stylevars

And, you may be interested in this article to help you find stylevars yourself - Finding Specific StyleVars

[Dragonsys]

I miss stylevars.com