Using Integrity/How to set content area to different bg colors on separate pages

I need to arrange some pages to have a different background color.
I am using Integrity dark and for some content it is way too dark.
Like black.

How can that be done, my attempts are in constant fail.
I uploaded some screenshots to help convey what I am wanting to accomplish.

From a past site color combo to my new one I am developing now.
The lighter brown is my desired color to change to.
My fingers are crossed this can be done.

Blessings,

Jann

Hi There,

Thank you for writing in, please add this to Theme Options > CSS

header .x-navbar,
header .x-logobar,
footer.x-colophon,
.x-main .entry-wrap {
	background-color: #c4b5a0;
}

.x-main .entry-wrap {
	box-shadow: inset 0 -0.125em 0.5em 0 rgba(196, 181, 160, 0.80), 0 3px 2px -2px rgba(255,255,255,0.075);
	border: 1px solid #c4b5a0 !important;
}

This will change the dark background-color of logo bar, navbar, top & bottom footer bar, and the content container to light brown (#c4b5a0)

Let us know how it goes,
Cheers!

I am always in awe as to how you coders can just whip out these codes.
Puts me in my quiet spot.

Before I do this I want to clarify what I am wanting to do.
I want to be able to pick single pages and change them from the black to the brown color background for the content box.

If I read the code right, this that you wrote will change the whole site on a global level.
That is not what I want to do.
I was thinking that a simplistic css snippet inserted within the pages css additional
commands for the page would hopefully do that.

To change the content box to the brown and the font there to black id the white does not work.
All the rest of the page stays in the dark theme color.

The dark theme option is really a foreboding dark and for me a challenge.
I need it dark but not to the extreme black.

If pages that need the lighter tones could be done so, it would help the harsh contrast of white/black tone.

Thanking you ahead,

Jann

Hey Jann,

It depends where you put the code. If you put the code in Theme Options > CSS, it will be site-wide or global. If you put in in the Content CSS, it will only work on the specific page.

If you want to use it globally but want to target only the pages, you will need to add the page class to the selector like this.

.page header .x-navbar,
.page header .x-logobar,
.page footer.x-colophon,
.page .x-main .entry-wrap {
	background-color: #c4b5a0;
}

.page .x-main .entry-wrap {
	box-shadow: inset 0 -0.125em 0.5em 0 rgba(196, 181, 160, 0.80), 0 3px 2px -2px rgba(255,255,255,0.075);
	border: 1px solid #c4b5a0 !important;
}

If that does not help, please provide the specific page URL and access to WordPress admin in a Secure Note so we could show you how you can change things.

Thanks.

I have total faith in you.
Thank you, I will test these new uncharted code
waters for me and let you know how I do with it.
Having you beside me in this is a blessing.

Thank you,

Jann

You are most welcome, Jann. :slight_smile:

Well, more validation for not knowing what I am doing has been given me.

I am totally lost…I went to the theme options, from then on it was all down hill for me.
I could not find where to put anything.

Many terms/names for things are alien to me.
So here I am to give you the info to access my site.

Hi Jeanette,

I’m really sorry that lots of this information overwhelm you, X with Cornerstone should not be this hard.

I see that you built your pages using the WordPress Classic text editor, please built your pages in Cornerstone page builder instead, this way you can edit and style your pages much easier.



If you edit an existing page in Cornerstone, make sure you copy the entire content first on a text document and start over the page in Cornerstone.

Note: Once you edit/built a page in Cornerstone, do not edit it on other page builder/editor or else you’ll lose the ability to edit that page back in Cornerstone

To learn more about Cornerstone content builder, please follow this link and see the articles on Cornerstone / Content Builder section.

Note: Because those articles where taken from the previous version of X and Cornerstone, the videos and screenshots on those will look different from what you have, but the workflow is all the same, don’t hesitate to write a new thread if you found something confusing on those articles/videos

Now, let’s go back to your main issue, keep in mind that the theme has a lot of options on the Theme Options, but forget about those other options for now and focus on the Theme Options > CSS area.

We should not give this kind of custom CSS, but what you’re after needs to. Yes, you’re right, the custom CSS I provided you above does affect all your pages, but we can make that more specific to only affect the pages that you need to be affected, by simply adding a CLASS on those pages. Let’s say our CLASS is named brown-bg, apply this class to your video pages (http://prntscr.com/joaqci)

And then update the CSS code I provided you above to this:

.brown-bg header .x-navbar,
.brown-bg header .x-logobar,
.brown-bg footer.x-colophon,
.brown-bg .x-main .entry-wrap {
	background-color: #c4b5a0;
}

.brown-bg .x-main .entry-wrap {
	box-shadow: inset 0 -0.125em 0.5em 0 rgba(196, 181, 160, 0.80), 0 3px 2px -2px rgba(255,255,255,0.075);
	border: 1px solid #c4b5a0 !important;
}

Again add this on Theme Options > CSS

What this does is to change the background-color of the pages that have a class of brown-bg

For the text/headline colors, we could provide you with custom CSS for that too, but if you use Cornerstone’s Text element or Headline element, you get all that styling options for your text.



Hope this shed some lights,

If you’re interested in learning more about basic CSS, you can watch this free course here.

Cheers!

Hi,

I am reading and getting some understanding under me before I do anything
on my site. I have a terror of messing it up.

I will gather some learning under me then follow your guidance and let you know how it went.
I want to thank you for all your help and for providing links
to more knowledge.

Your a wonderful support counselor.

Blessings,

Jann

You’re most welcome Jann!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.