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

Home Forums Support Headline Text & Featured Images on Homepage Preview – Dispatch

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1105556
    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.

    #1105724
    David
    Staff
    Customer Support

    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

    #1106050
    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.

    #1106327
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1106559
    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!

    #1107039
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.