Icon stack - Background Colour

[Aph100]

Hi I am using the above, and have changed the background colour. However when I view in Chrome, the colour does not appear to have changed

I was looking at some other posts and from one have added to the global css:
.page-template-template-layout-full-width .x-container.main:not(.x-row):not(.x-grid)::before {
background-color: transparent;
}

However this does not appear to have worked, is the code above correct?

Many thanks

Alex

[ruenel]

Hello Alex,

Thanks for writing in!

This code will only work if you are using the Layout - Fullwidth page template:

.page-template-template-layout-full-width .x-container.main:not(.x-row):not(.x-grid)::before {
  background-color: transparent;
}

Can you please provide the URL of the page where you have applied the code or where you want to change the background color so that we can check your setting?

Regards.

[Aph100]

@RueNel

.page-template-template-layout-full-width .x-container.main:not(.x-row):not(.x-grid)::before {
background-color: transparent;
}

Hi Thanks for your post. the url is: https://sentinelhouse.uk/the-loft/

Thanks

Alex

[ruenel]

Hey Alex,

The page is under construction mode. Kindly provide us access so we can check the page and your settings.

Cheers.

[Aph100]

my apologies https://staging.sentinelhouse.uk should work

[friech]

Hi Alex,

Thank you for the URL, the site general background color can be set under Theme Options > Layout and Design > Background Color

However, there is a body {background: transparent;} custom CSS added somewhere on your site. You need to remove that, because it overwrites the background you set on the Theme Options.

• 

Sorry, I can’t figure out where that is coming from, do you remember adding that custom CSS?

Cheers!

[Aph100]

Hi and thanks for your help.

This is getting weird. There are only two pages in the web site at the moment and I have checked everywhere and cannot see that code.

Also, if I switch from the Icon stack to the Integrity stack, the background colour is changing to what I want.

Could I just confirm that you are using the staging.sentinelhouse.uk site as on the image you sent at line 218 but looks as if the page is loading from sentinelhouse.uk where we have the “Common Soon” banner

Cheers

Alex

[friech]

Hi Alex,

Yeah sorry I was confused which site you’re working on, now I can see the issue on (https://sentinelhouse.uk/). To resolve that please add this to Theme Options > CSS

.x-stack-icon .site,
.x-stack-icon .x-site {
	background-color: transparent;
}

You should see the background-color you set under Theme Options > Layout and Design > Background Color after adding this.

Here’s some bonus CSS, if you want a transparent or to change the header and footer background-color.

/*icon header background*/
.x-stack-icon .x-topbar,
.x-stack-icon .x-navbar,
.x-stack-icon .x-breadcrumb-wrap {
	background-color: transparent;
}

/*icon footer background*/
.x-stack-icon .x-colophon.bottom {
	background-color: transparent;
}

Hope it helps,
Cheers!

[Aph100]

Thanks very much - worked a treat

Alex

[friech]

You’re most welcome,

Cheers!