[Support request] overlay behind text on page header

Home Forums Support [Support request] overlay behind text on page header

Home Forums Support overlay behind text on page header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #606391
    Mark

    Hi, I am using the full screen image on the page header. I would like to have a background overlay just behind the text – not for the whole image.

    Is there a way to do this from settings? Or do I need to use CSS? If so, could you tell me the CSS needed?

    Thanks,

    Mark

    GP Premium 1.6.2
    #606411
    David
    Staff
    Customer Support

    Hi Mark,

    the content sits inside this div .inside-page-header – the size of which is defined by the page header padding, so you can style it like so:

    .generate-page-header .inside-page-header {
        background-color: rgba(255,255,255,0.5);
    }

    If you want more control over it then you could wrap your content in a div and style that, something like this:

    <div class="my-class">
        HTML Markup
    </div>
    
    .my-class {
        display: inline-block; /* Will fit to size of content */
        padding:  10px;
        box-sizing: border-box;
        background-color: rgba(255,255,255,0.5);
    }
    #875881
    Mark

    Hi David,

    Thanks for your response. One question – how do you differentiate which page you are on? So, for example, I might have text on the home page, but also some different text on some other pages?

    Mark

    #875884
    Mark

    David,

    And btw, how do I add HTML to the text? I know how to add CSS.

    Mark

    #875886
    Mark

    Sorry, I meant “add HTML to the page.”

    #875995
    Leo
    Staff
    Customer Support

    If you want to re-use the page hero but with different texts on different pages, template tags is the easiest solution:
    https://docs.generatepress.com/article/header-element-template-tags/#custom_field-name

    You need to use the HTML editor to add that.

    Or simply copy and paste as it is in the page hero content box.

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