srock
10-28-2016, 01:27 PM
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
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