[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
    Posts
  • #985639
    Ben

    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}}; }
    </style>
    <h1>

    {{post_title}}

    </h1>

    Please can you advise best way to do this?

    #985694
    David
    Staff
    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:

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

    #985818
    Ben

    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)

    #985823
    David
    Staff
    Customer Support

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

    #988748
    Ben

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

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