Tet banner

Custom Fields
Support MB Settings Page Metabox settings page / color picker / css variables / Oxygen

  • Creator
  • #30731

    How i can use css variables with MB settings page and color picker to use in the Oxygen colors fields? Is this possible on the metabox side? This is a solution related to Oxygen builder and ACF Pro Option Page from wpdevdesign? Metabox ist very different then ACF and confusing mit a little bit (I'm only semi pro Dev)


Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
  • #30755
    Long Nguyen


    The developers of WPDevDesign mark the content private so I cannot follow how they do. They could use custom code to create the variable CSS like that. You can try to contact them to do the same with Meta Box.


    Some Friends send me the code... The Problem is more, that Metabox works in a other way. Im new in the metabox community und buyed the Dev licence couple days ago. My Questions to you was, how we can do this with Metabox. Thx

    add_action( 'wp_enqueue_scripts', 'custom_css' );
     * Set custom CSS variables using values from ACF options page.
    function custom_css() {
        $primary_color = get_field( 'primary_color', 'option' );
        $secondary_color = get_field( 'secondary_color', 'option' );
        $light_gray = get_field( 'light_gray', 'option' );
        $main_dark = get_field( 'main_dark', 'option' );
        $custom_css = "
            :root {
                --primary-color: {$primary_color};
                --secondary-color: {$secondary_color};
                --light-gray: {$light_gray};
                --main-dark: {$main_dark};
        wp_add_inline_style( 'oxygen', $custom_css );
    Long Nguyen


    Thanks, you can do the same with Meta Box. Creating a settings page with custom fields, replace the code from ACF

     $primary_color = get_field( 'primary_color', 'option' );

    by this code

    $primary_color = rwmb_meta( 'primary_color', ['object_type' => 'setting'], 'your-option-name');

    Get more details on this documentation https://docs.metabox.io/extensions/mb-settings-page/


    Hey Long,

    I've attempted using this solution. But no luck.

    $primary_color = get_field('primary_brand_color', 'option');


    $primary_color = rwmb_meta( 'primary_brand_color', ['object_type' => 'setting'], 'business-settings');

    The color is being pulled from a settings page called business settings.

    Have I missed something obvious


    Hi thirdbirdca@gmail.com,

    Your code creates custom properties and make them available in Oxygen builder, but this doesn't register them as global colors.

    In the builder, you should got to your global colors, and register them manualy :
    primary : var(--primary-color)
    secondary : var(--secondary-color)

    Then, changing colors on your settings page should be reflected in the builder and on your site.


    I guess this is what you are looking for :

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