Making .b-top-background_header-mainnav transparent

[glennrocksvb]

I don't see Testing style because I'm not an admin. What is its style id?

[Snowhog]

I 'think' I've isolated the cause as being the css code above (post #10). IF not the actual cause, it affects the cause.

I commented out the three lines that are active and saved/closed the CSS Editor. The result:


As you can see, .b-top-background__header-mainnav is transparent.

Does this suggest anything to you?

[Snowhog]

I've tested by removing all content from css_additional.css (from Style testing) and reloading the site. body background color is white (default) and it shows through the transparent areas of your site logo and the rest of .b-top-background__header-mainnav.

When I add:

/* Background Image  - START */
body:not([class*="cke_"]):not([contenteditable]) {
/* background: url("core/images/misc/water.png") no-repeat center fixed; */
/* background: url("core/images/misc/Cracks_in_the_Earth.jpg") no-repeat center fixed; */
/* background: url("core/images/misc/AlpineWildflowers.jpg") no-repeat center fixed; */
/* background: url("core/images/misc/AI_Abstract1.jpg") no-repeat center fixed; */
/* background: url("core/images/misc/forest-morning-light-1.jpg") no-repeat center fixed; */
/* background: url("core/images/misc/forest-morning-light-2.jpg") no-repeat center fixed; */
/* background: url("core/images/misc/forest-morning-light-3.jpg") no-repeat center fixed; */
/* background: url("core/images/misc/Space_HD.jpg") no-repeat center fixed; */
   background: url("core/images/misc/Sun_glint_on_the_Caspian_Sea.jpg") no-repeat center fixed;
   background-size: cover;
}
/* Background Image - END */​

to css_additional.css (no other coding), .b-top-background__header-mainnav still shows a black background when looking at the site, but is transparent when viewing the site with Inspector on.

I really want to get to the bottom of this. Why does your site respect the transparency of .b-top-background__header-mainnav and our does not?

[Snowhog]

Make sure you select testing as the Style Theme. You should see it in the list; non-Admins can't see/use it.

[Snowhog]

Right now, I'm seeing the background as #0F2332 and not transparent

It isn't now. It's set as transparent. Look again?

But even though it is set transparent, the background image doesn't show through it, again, unless viewing the page with Inspector.

What is its parent element?

[glennrocksvb]

Right now, I'm seeing the background as #0F2332 and not transparent

[glennrocksvb]

If you inspect the .b-top-background__header-mainnav element and see that the background is set to transparent (and its parent element also has transparent background set), then you should see the body background image through it.

[Snowhog]

If it doesn't show as transparent in the Inspector even if you set the stylevar to transparent, then check if you are on the right style/theme.

I am using the right style/theme. If I set a background color in topbg_header_mainnav_background and save, that color is reflected on the sites main page. If I set topbg_header_mainnav_background to transparent, it isn't reflected on the sites main page.

Regardless of the background color value I set, looking at the sites main page with Inspector, the element (?) .b-top-background__header-mainnav is transparent.

[glennrocksvb]

If it doesn't show as transparent in the Inspector even if you set the stylevar to transparent, then check if you are on the right style/theme.

Nice background, btw.

[Snowhog]

Thank you. Crappy quality video; blurry.

topbg_header_mainnav_background is the style var, but changing the background color to transparent doesn't make the container transparent unless viewing the page in Inspector, and I don't understand why. I can change the background color to any other color and the container reflects that color change.

[glennrocksvb]

Follow the instructions in this vBulletin video tutorial.

It was posted 11 years ago but the instructions still apply today except that instead of using Firebug, you can use the built-in debugger tool in the browser by right-clicking and choosing Inspect.

[Snowhog]

In the Inspector and looking at:

.b-top-background_header-mainnav
background #0F233200

Changing background to transparent gives me what I want.

What Style Variable is this? I tried changing topbg_header_mainnav_background to transparent, but it doesn't do what the above does.

Or what css would do this?

Additionally, how do you 'convert' the Inspector item name to the Style Variable name?