Making .b-top-background_header-mainnav transparent

[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?

[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]

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]

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]

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 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.

[glennrocksvb]

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

[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?

[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]

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]

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?

[glennrocksvb]

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

[Snowhog]

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

Made you a full Admin (temporarily). Log back in and you should be able to select that Style.

[glennrocksvb]

Thanks. I checked the Testing style and I think it's working as designed. The top portion of the background image is plain black and it's showing through the header as expected.

[Snowhog]

Thanks. I checked the Testing style and I think it's working as designed. The top portion of the background image is plain black and it's showing through the header as expected.

But if you view the page with Inspector, you see what is shown in image 2 in post #3. There is image content that should show....Wait! I'm seeing something I didn't see before.

I'm about to head out for a bit. I'll get back to you on this.