Okay
  Public Ticket #2826098
Overlay on blog post header
Closed

Comments

  •  23
    alberteck started the conversation
    July 14, 2021 at 9:14pm

    Hey

    I want to add a background overlay (for example black with 35% opacity) on the blog post header image, in order to make the text more easily readable.

    Blog header type being used is "Fullscreen with meta under".

    I can just make the image darker but that would also make the thumbnails darker. So I was wondering if a CSS could fix the issue...?

  •   alberteck replied privately
  •  8,860
    Tahir replied
    July 15, 2021 at 7:10am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .single-post .page-header-bg-image:before {
    background: rgb(0 0 0 / 35%);
    content: '';
    position: absolute;
    display: block;
    top: 0px;
    width: 100%;
    height: 100%;
}

    Thanks

    ThemeNectar Support Team 

  •  6
    Benjamin replied
    May 6, 2022 at 5:20pm

    FYI, I tried this by adding the alpha value to a hex color, but it didn't work. I had to convert to RGB.

  •  1,882
    Judith replied
    May 6, 2022 at 5:37pm

    Hello Benjamin,

    Please send in your website url so that we may provide css for it.

    Thanks.

  •  6
    Benjamin replied
    May 6, 2022 at 5:51pm

    Hi, Judith.

    I wasn't looking for a fix. Just sharing my experience in context in case anyone else had the same hair-brained idea I had to modify Tahir's code.

    Thanks,

    Benjamin

  •  1,882
    Judith replied
    May 6, 2022 at 6:21pm

    Hello Benjamin.

    Thanks for sharing, it is indeed helpful.

    Regards.

  •  16
    Jen replied
    May 16, 2022 at 2:54am

    I can see that you an actually add this within the post itself but it doesn't allow you to select a colour. 


    Can you tell me how where to change the current colour fro the standard black to another colour

  •  1,882
    Judith replied
    May 16, 2022 at 5:10am

    Hello Jen,

    Thanks for keeping in touch.

    Please send in your website url so that we can provide css for the blog overlay.

    Thanks.

  •  16
    Jen replied
    May 16, 2022 at 11:19pm

    I found a setting for this in salient blog settings so its all OK...

  •  1,882
    Judith replied
    May 17, 2022 at 4:20am

    Hi Jen,

    We're glad you got a workaround.

    Thanks.

  •  16
    Jen replied
    May 29, 2022 at 12:15pm

    There appears to be a dark overlay on my woo commerce shop header... But I can't see how to remove it. Can you help. I don't need it. Its just making my images dull.


    https://vivhealth.com.au/shop/


  •  1,882
    Judith replied
    May 30, 2022 at 5:25am

    Hello Jen,

    Please try this css:

    .archive .page-header-bg-image:after, .nectar-recent-post-slide .nectar-recent-post-bg:after, .single [data-post-hs=default_minimal] .page-header-bg-image:after {
        background-color: rgb(139 139 139 / 0%);
    }

    Thanks.