How to get this background effect with X theme?

Hello,

I’ve tried different options inside cornerstone to get this https://tinyurl.com/y8byfokz background effect which includes white_wall_back background image but with no luck. I even changed the background here https://prnt.sc/m5kudl but it does not do anything!
What am I doing wrong?

Hi @JohnnyBeGood,

Thank you for writing in, please do a test for a plugin conflict. You can do this by deactivating all third-party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If that does not work, please provide us login credentials in a Secure note so we can take a closer look.

Cheers!

Hi,

I’ve tried disabling plugins and that’s not the issue.
Secure not has login credentials.

Hi Johnny,

I tried checking the login details of you provided but it doesn’t seem work.

Would you mind double checking the login details so that we can login and check your setup.

Thank you.

Hi,

Please try new user and pass in the secure note and remove your last screenshot to protect company privacy. Thanks!

Hi Johnny,

Please set the background pattern (not background image) again in Theme Options > Layout and Design. And make sure the background color is white or almost white instead of pink.

Then add this CSS to Theme Options > CSS

.site, .x-site {
    background-color: transparent !important;
}

The active Stack has predefined background color, setting it to transparent will make the background pattern visible.

Thanks!

Thanks! Almost there some parts still have white background ie. Cl@aning emergencies?

Hello @JohnnyBeGood,

Some parts still has a background because in your column settings you added a background color. To resolve this, simply edit the page back in Cornerstone and remove or change the background color to transparent. If you want that in those columns has a slight different opaque color, then play around with the opacity of the color. Anyways, to save you time, I went ahead and remove the background colors in the columns of your homepage.

Please check your site now.

Great! Where do I control bottom section (footer I guess) that is in white and menu on the top background?
With the menu I would like a slight transparent color so it overlays, just like it is in that example website.

Hey @JohnnyBeGood,

The background color of the navbar and footer were pre built in the stack. All icon stack sites has a white background color for those areas by default. If you want it to be transparent, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar,
.x-colophon.top,
.x-colophon.bottom {
    background-color: transparent;
    border: none;
}

For your menu, please go to Appearance > Ubermenu > General Settings and find the styling options.

Hope this helps. Please let us know how it goes.

That worked, thanks!
What I can’t to get to work is to have light background color so that is transparent in the menu. Need something that will get visitor attention that there’s a menu there.

Also, bottom menu I would like transparent color of that menu.

Hello Johnny,

Thanks for updating the thread. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.x-navbar, .x-colophon.top, .x-colophon.bottom {
    background: #ddd;
    opacity: .5;
}

Let us know how it goes.

Thanks.

If I trying changing opacity: .5; line numbers if I go lover it actually makes logo and menu text not visible.

If you look at example demo menu text is clearly visible and yet you can see background pattern.

Hi Johnny,

Try an RGBA value to your background-color instead.

.x-navbar, .x-colophon.top, .x-colophon.bottom {
   background-color: rgba(248, 186, 74, 0.3);
}

That last value (0.3) is the transparency.

HEX to RGBA Color Calculator

Hope it helps,
Cheers!

That’s what I was looking, thanks!

When on mobile device menu background is still white?

Hello @JohnnyBeGood,

The mobile menu background is still white because because of the Clean White skin setting. I have overridden the setting by adding this custom css right in your Ubermenu:

.site .ubermenu-skin-clean-white.ubermenu-responsive-toggle,
.x-site .ubermenu-skin-clean-white.ubermenu-responsive-toggle{
  background-color: transparent !important;
}

Please check your site in smaller screens now.

It works now!
Is this where you added custom CSS https://prnt.sc/m8iiuu
If so just curious why all 3 boxes are filled and why not just mobile?

Hey @JohnnyBeGood,

Sorry I forgot to remove the code in the other two boxes. You can leave the code in the first box and remove the code from the 2nd and 3rd box.

Regards.

No worries.
Thank you all for helping me in this!

You are most welcome. :slight_smile: