- This topic has 5 replies, 2 voices, and was last updated 5 years ago by
.
-
Posts
-
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?
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_Headhook and check execute PHP then set your Display Rules to match the header element.The above example has a Custom Field of
cssPerfect , 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)
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 thanksGlad to be of help
- You must be logged in to reply to this topic.