Tet banner

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

  • Creator
    Topic
  • #30731
    Sash
    Participant

    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)

    acf-color-picker-custom-fields-to-css-custom-properties-workflow-in-oxygen

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

    Hi,

    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.

    #30756
    Sash
    Participant

    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 );
    
    }
    #30772
    Long Nguyen
    Moderator

    Hi,

    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/

    #31200

    Hey Long,

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

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

    to

    $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

    #31203
    Cédric
    Participant

    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.

    #31204
    Cédric
    Participant

    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.