Metabox settings page / color picker / css variables / Oxygen

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #30731
    SashSash
    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

    #30755
    Long NguyenLong 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
    SashSash
    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 NguyenLong 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
    WillWill
    Participant

    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édricCédric
    Participant

    Hi [email protected],

    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édricCédric
    Participant

    I guess this is what you are looking for :
    https://youtu.be/mjLsbRgQ2k4

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