How to get a black background site

Support
#1

I am trying to make a site that has a black background.

This includes:

  • Background behind the entire site incuding the header (this is one essentially black image that shows behind the header/page/footers)
  • Transparent header
  • Page templates that are transparent so they show the background image.

I’ve worked with X a lot, but always with a white background site. For some reason I can’t figure this out. If I use Ethos, it Is dark, but any pages I add have a white background on top. I’d prefer transparent.

I’m really trying to get the site to look like this example:
http://rhythm.themerella.com/one-homepage/

#2

I’m trying to get a similar, if not the same effect, on my site. Another example page is this one: http://athenschurch.com/times-location/

Can’t figure out how to make that change where its a different image set on each page page.

#3

Hi there,

It will be really helpful if you try to pinpoint the question to a specific case so that we can focus on a solution.

As a general suggestion, I would start the project using this demo:

http://demo.theme.co/integrity-3/

That will give you a good kick start, after that if you encounter problem get back to us with specific cases with URLs and we will try to suggest you proper CSS fixes here and there.

Thank you.

#4

@christopher.amirian is there a way to import aspects of the demo on individual pages? Our overall theme was a Church (expanded ) demo so I don’t know that I can pull in integrity-3 also.

#5

Hi There,

No, if you import another demo it will overwrite your previous theme options.

You can go to X > Theme options > Select Stack Integrity > Layout and design > Integrity Dark.

Hope it helps

#6

Hi again, I have changed my site to Intergrity dark and by default the page background color is black, but I’d like to make the page background color black with some transparency so that the theme’s background image shows through. How do I do that?

BTW, I have tried adding this to the Global CSS

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

But it didn’t work. The black box in the middle is what I want to change.

#7

Hi there,

There are two possible solutions, first is to change your page template to Blank template, instead of Full-width template. Second is add this CSS to your global custom CSS.

.entry-wrap {
background: transparent;
}

Hope this helps.

#8

Hello, this did indeed work! Thanks!

http://greengrowthventure.com

#9

You’re welcome!

#10

I’m still using this code to change the background of the page contents to a different color or transparent in a site. However, when I make the backround transparent, there is now a shaded box that shows around the page area. I’d like to eliminate this outline on the page. Here is an example:

http://gtgvip.com/test/

#11

Hi there,

The outline that you are seeing a default box shadow added to the entry-wrap div through the default CSS.

If you want to get rid of it, please update your code to:

.entry-wrap {
    background: transparent;
    box-shadow: none;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#12

Thank you that worked perfectly!