Adding Opacity Overlay in Goran Header

Resolved ESSBEEAY
(@essbeeay)

10 years, 2 months ago

Hi there,

I’m building a site with Goran theme on my localhost.

I’d like to darken off some of my header images so the page-title text is more legible. I’d like to add it on a page by page basis, and I have a custom CSS plugin for pages.

I know it’s something to do with:
.hero.with-featured-image {

but if I go and add an RGBA backround there, I lose my image.

It seems I need to layer the rgba background over the featured-image, but under the page-title.

Any help greatly appreciated.

Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

Moderator Kathryn Presner
(@zoonini)

10 years, 2 months ago
My colleague Laurel put this together:
```
.hero .hentry, .hero-wrapper, .no-sidebar-full .content-area {
    position: relative;
    z-index: 3;
}

body.page-id-xxx.hero-image .hero.with-featured-image::after {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
}
```
Adjust the 0.4 opacity as you like. Replace “xxx” with your actual page ID, which you can get by looking at the body tag in the browser source, or in the browser’s address bar when editing the page.
Thread Starter ESSBEEAY
(@essbeeay)

10 years, 2 months ago

Hi and thanks for this.

If I use the code as-is, my entire content-area is affected on the page.

I removed .hero-wrapper and .content-area in the first line, and got the effect I was looking for. But then I noticed if I expand a nested menu item, the header image sits over the drop down menus.

Moderator Kathryn Presner
(@zoonini)

10 years, 2 months ago

It’s difficult to troubleshoot without seeing your site.

Did you replace page-id-xxx with your own page ID?

When you have the site up and running on a test server, I’d be glad to have a look.

Thread Starter ESSBEEAY
(@essbeeay)

10 years, 2 months ago

Oh, I forgot to mention I’ve uploaded to a test server.

I’ve created a page with the suggested code for you to take a look.

Thanks!

http://www.100hands.org/scottys/header-test/
Moderator Kathryn Presner
(@zoonini)

10 years, 2 months ago
That’s very helpful, thanks!

Could you try adding this to your custom CSS as well:
```
@media screen and (min-width: 1230px) {
  body.hero-image .hero.with-featured-image {
    padding-top: 312px;
    position: relative;
  }
}
```
Thread Starter ESSBEEAY
(@essbeeay)

10 years, 2 months ago

Perfect!!

Thanks so much.

Moderator Kathryn Presner
(@zoonini)

10 years, 2 months ago

You’re welcome!

Thread Starter ESSBEEAY
(@essbeeay)

10 years ago

Hi again,

After marking this resolved, I realize I still have a problem with this task. When I reduce my media screen down from 1230px, the opacity change affects the entire content area.
http://www.100hands.org/scottys/scottys-construction/projects/

Is it possible to have the opacity change work across all widths, as I really love the way the text pops this way?

Thank you,
Scott

Thread Starter ESSBEEAY
(@essbeeay)

10 years ago

Sorry, Will post a new question and keep this resolved.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Adding Opacity Overlay in Goran Header’ is closed to new replies.

Tags