[Resolved] using custom field page values in element header

Home Forums Support using custom field page values in element header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #985639

    I have a page header set up which works fine. I’d like to set the pagehero background colour to be the value of the page custom value, eg breadcrumbs_bg_color

    I could do this using inline css but I’m concerned that scoped inline css is no longer supported and not the best way, eg

    === HEADER ELEMENT ===
    <style scoped>
    .page-hero { background-color: {{custom_field.breadcrumbs_bg_color}}; }



    Please can you advise best way to do this?

    Customer Support

    Hi there,

    it would be better to hook the CSS inline in the <head> so:

    Create a new Hook Element.
    Add this to the Content:

    $css = get_post_meta(get_the_ID(), 'css', true);
    if (!empty($css)) { ?>
        <style type="text/css">
            <?php echo '.page-hero {background-color: ' . $css .';}'; ?>
        <?php }

    Select the WP_Head hook and check execute PHP then set your Display Rules to match the header element.

    The above example has a Custom Field of css


    Perfect , many thanks (needed to change closing to </style>

    Is there any way to set this to have higher precedent than global site “Additional CSS” set in the customizer? (without having to resort to using !important)

    Customer Support

    You can change the priority in the Hook Element to 0 – should move it above the customizers CSS.


    I needed this to take precedence, so needed it after the cusotmizer css. Gave it priority 200 and it moved it below.
    Many thanks

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