[blueoaksParticipant]

Hello,
I would like to add a CSS color overlay with opacity to a background image in a section.

I found a few older forum posts on this topic but they are all pre-Cornerstone and I am having difficulty adapting those solutions.

Here is the CSS I have so far, that I’m guessing is incorrect because its not working:

/*****************************/
/*! ADD COLOR OVERLAY BLACK  */
/*****************************/

.overlay {
  position: relative;
}

#x-section-1:before.overlay {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
  z-index: 0;
}

I’m guessing this is simple but I’m still learning CSS and how to use ID’s with classes. Can you suggest some CSS that would accomplish this?

Ideally I could apply the class “inline” via Cornerstone so as not to have to make a bunch of unique ID’s in my stylesheet.

I’m running WP 4.2.2; X v4.0.3

[blueoaksParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add a class name like my-class to this section and add the following code from Customize -> Custom -> CSS :

.my-class:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255, 0.5);
  content: '';
  display: block;
}

Hope that helps.

[blueoaksParticipant]

This isn’t quite right.
This added an overlay to all the sections on the page even though only the first section has my class name applied to it.

Is this because I added the css you provided to my child theme style sheet rather than to Customize–> Custom –> CSS ? I didn’t think that would make a difference.

I’d like to be able to pick and choose which sections I apply the overlay to via the class field in Cornerstone.

[blueoaksParticipant]

Hmm now it doesnt seem to be working at all. The class name is still there in the section but it has no effect.
I’ve cleared my browser cache and am not using any caching plugins.

[Rue NelModerator]

Hello There,

We cannot login to your site.

For the meantime, we will go back to your code. Please try this instead:

.overlay {
  position: relative;
}

#x-section-1.overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
  z-index: 0;
}

This code will only work in every first section #x-section-1 in all your page. If you want to target a particular page, you can use this code instead:

.overlay {
  position: relative;
}

.page-id-1 #x-section-1.overlay:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
  z-index: 0;
}

To locate the page or post ID, please check it here: https://community.theme.co//kb/how-to-locate-post-ids/

Hope this helps. Kindly let us know.

[blueoaksParticipant]

Still not working for me.

1) Using the directions in the link you provided, I get an ID of 7173. However the hover over URL says its a post ID not a page ID, even though I am in the Pages section of the admin panel. Changing the CSS to

.post-id-7173 #x-section-1.overlay:before {
did not make a difference however.

2) But backing up a step, although I do want to target particular sections on particular pages, I was hoping to avoid using both IDs and Classes in stylesheet.css because it seems I would need to create unique CSS definitions for each and every page/section combo where I want the overlay. I thought the fact that each *section* in Cornerstone has its own Class field meant that I could simply define a class once in my stylesheet (as in your first reply above where you use ‘.my-class’ without an ID) and then apply it at will, site wide, to any section on any page using the Class field of Cornerstone for that section? Am I misunderstanding the purpose of the Class field in Cornerstone? If I have to target both the page and section in stylesheet.css then what is the purpose of having class and ID fields for each section in Cornerstone?

I’m just wanting to keep things simple and clean.

3) Not sure why you couldnt log in. I’ll repost my credentials

Thanks

[blueoaksParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Thanks for the information above.
Upon checking the page, I’ve notice that what causing the CSS style for not to work is the semi-colon ; right after the class overlay. That is a syntax error. Please remove that unnecessary semi-colon. Also, class would suffice and no need to add page classes if you want it to work for different pages.

Hope this helps.

[blueoaksParticipant]

Ok thanks. Now it’s working like I had hoped. Resolved.

Has anything been published on the proper syntax for the ID, class and style fields of cornerstone? I haven’t come across much in the KB but perhaps its there and I’m missing it.

Even if the only rule was “separate consecutive classes with only a space” that would be good info for a novice like myself.

But even that rule doesn’t apply to the style field where semi-colons are needed.

Perhaps a syntax guide to Cornerstone is still being developed? The CSS class index article is a start but it doesnt address syntax.

Thank you

[ChristianModerator]

Hey there,

Those are the same as HTML ID, Class, and Style attributes that are mostly used for CSS. Please see the CSS tutorial at http://www.w3schools.com/css/default.asp for guidance.

Hope that helps. 🙂

[Author]

Posts