50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

Meta Box Color Picker to CSS Custom Property Workflow in Bricks

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 page post type i.e., static Pages having a page_color Color 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_color field in a variable
    • set it to a default/fallback color if the field is empty
    • build CSS having a --page-color custom property with the value of the page_color variable
    • add the above CSS to one of the enqueued stylesheets

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.

Creating Page Color custom field using Meta Box

Populating the Page Color custom field for a specific Page

Button background color for the above Page taken from the custom field value

Button background color for Pages where the custom field is not populated

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:

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

  • Ash Parker

    hi, this looks interesting, however, can we have some case studies for use cases please.

    • A

      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.

Leave your comment