[Support request] Headline Text & Featured Images on Homepage Preview – Dispatch

[Jeffrey]

I’m using the Dispatch template and have added content to the blog that is now showing up in the preview section on the home page. One issue though is that due to the featured image being the background that the headline text is laid on top of, the headline text has become very hard to read for some posts due to the image behind it. I’m wondering if there is a way to add a black opaque box that the headline text would be in on the featured images when in this preview.

See this screenshot for an example of what I mean (in terms of not being able to read the headline): https://ibb.co/W31rZqh

Other than using featured images that wouldn’t create issues, is there a solution for this (like having a black opaque box the text sits in)?

Thanks for your help.

[David]

Hi there,

go to Customizer > Additional CSS and look for this:

.wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35); /* Edit this line */
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0))); /* Remove this line */
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%); /* Remove this line */
    pointer-events: none;
}

Above i have commented the line you need to edit, and 2 lines that need removing

[Jeffrey]

Thanks! That worked perfectly.

Is there any way I can do the same thing on the blog posts themselves? Like on the featured image of this post: https://ibb.co/7t5sGZb

Thanks.

[Tom]

Hi there,

Couple steps to achieve this:

1. Go to Customize > Additional CSS and remove this CSS:

.page-hero.overlay {
    -webkit-box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px -180px 83px -15px rgba(0, 0, 0, 0.75);
}

2. In the Header Element, remove the bottom/left/right padding values.

3. Add this CSS:

.page-hero.overlay .inside-page-hero {
    background: rgba(0,0,0,0.5);
    padding: 40px;
}

Hope this helps 🙂

[Jeffrey]

That worked, thanks Tom! I could not find the “header element” for step #2 though in the CSS. I followed steps 1/3 though (found the piece no problem) and it seems to have gotten the same result without any issues (that I’ve seen). Does that seem alright?

Thanks!

[Tom]

Looks good! 🙂

[Author]

Posts