Modifying Twenty Seventeen Theme Header By Adding Opacity Under Blog Title

One of the first things I set out to tweak in the WordPress Twenty Seventeen theme  was applying a dark div with opacity enabled around the blog title and tagline.  I wasn’t a big fan of the title of my blog and tagline floating with no background color.

Example of before and after adding theme changes to show Div with Opacity


First step I did was to launch Chrome with Developer Tools enabled.  This is important in WordPress, or any platform that allows front end customization with CSS.  I needed to know more about the area I wanted to work with on the page.  Using Chrome I identified the area below the blog title by right-clicking, choosing Inspect and then additional page information populates in the developer tools.

Identifying Where in HTML/PHP Changes To Be Made To Add Div with Opacity

I browsed around to the “wrap” div and then went into WordPress Admin’s “Additional CSS” section under Appearance > Customize.

Drop in the few lines of CSS as shown above and done.


Additional References:

Leave a Reply

Your email address will not be published. Required fields are marked *