Dyad Navigation Background Color Change

Hi there!

Do you mean the area where the color/overlay at the top is (behind the title and menu links)? https://cloudup.com/coHtrKPDex5

Or something else?

Hi Sarah,
Yes, the overlay at the top on the home page as well as on the inside pages at the top and the bottom left. I’m not sure what specifically in the CSS code I need to change.

I was able to change the footer without a problem.

I appreciate your advice.

Elise

Hi Elise, I used my browser inspector to discover which CSS targets the background colour on the navigation strip:

.home .site-header, .blog .site-header {
    background-color: rgba(36, 38, 41, 0.4);
}
.site-header {
    background-color: rgba(36, 38, 41, 0.8);
}

You can add this to your custom CSS with your own RGB value to override the default dark grey. You can also vary the opacity level by changing the value from 0.4 — which currently targets the header on the homepage and the blog — and from 0.8, which targets the value on other pages.

Thank you Kathryn. Could you help me with identifying where to change the color on the inside pages too? On the left side there’s a transparent overlay on top of the photo. It is grey, but I’d like to change it to brown as well.

I appreciate your help.

Elise

You can use a browser inspector to find that. If you aren’t familiar with browser inspectors, check out the link I gave you above and have a look at the tutorial.

Here’s a screenshot of where I’ve right-clicked on the element in question:

And you can then copy-paste out the code you need to override, right from the inspector:

.has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header {
  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
}

The screenshot is from my preferred inspector, Firebug, but they are all similar. Inspectors are also built into Chrome and Firefox and are super helpful for CSS customization.

Thank you! You’ve been very helpful. I’m attending the WordPress Camp this weekend to learn more!
Elise

Wonderful – have fun at WordCamp Minneapolis!