This Pro tutorial provides the steps to declare a custom property (CSS variable) whose value is equal to the post-specific color set via a custom field created using Meta Box in Bricks builder 1.5 Beta and above.
We shall
- create a field group for
pagepost type i.e., static Pages having apage_colorColor Picker type of field - write code that checks if the current page being viewed is a static Page and that Meta Box is active and
- store the value of
page_colorfield in a variable - set it to a default/fallback color if the field is empty
- build CSS having a
--page-colorcustom property with the value of thepage_colorvariable - add the above CSS to one of the enqueued stylesheets
- store the value of
With this in place, we can simply specify the color value as var(--page-color) in Bricks editor and the Page-specific color or a fallback color will be used depending on whether the field is populated or not.
Step 1
Install and activate Meta Box.
Create the field group having a Color Picker type of field and attach it to your desired post type - page in this example.
Edit your Pages and populate the field by selecting the Page-specific color.
Step 2
Add the following in the function hooked to wp_enqueue_scripts in your child theme's functions.php:
2 comments
Ash Parker
hi, this looks interesting, however, can we have some case studies for use cases please.
Sridhar Katakam
Hi Ash. Here are a couple of use cases:
1) Pages can have their own unique color schemes. For example, button backgrounds/borders, link colors for Contact page can be blue while they are all purple for About page.
2) Sitewide Primary color, Secondary color, Background color etc. can be changed by the client in a Settings page and these can be set to be used inside by you in the Bricks builder. For this use case, the code needs a little tweaking.