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

Steps

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 *