Blogs: Remove or reduce overlay shadow effect

The main blog index page shows a preview of your articles. The featured image from your blog and title are displayed. The image has an overlay effect to help read the title text. This customization allows you to remove or reduce the darkness of the overlay.

Blog index page (grid view):


Result with lighter overlay and bold title:

Code to decrease overaly:

/* -- code to decrease blog overlay -- */
.blog__article__overlay:after { opacity:0.5; }
/* - end - */

The opacity value can be adjusted to your needs. 0.1 would be almost no overlay and 0.9 would be high background overlay.

Before:

After:
with opacity: 0.5

After:
with opacity: 0.1 and bold title

If the above code isn't affecting the overlay, try this to completely remove the overlay:

/* -- code to remove blog overlay -- */
.blog__article--image:after { display:none; }
/* - end - */

Code to make the title font bold:

/* -- code to make blog headings bold -- */
h3.blog__article__title { font-weight:bold; }
/* - end - */

Where do I add the code?

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

Still need help? Contact Us Contact Us