Support › MB Settings Page › Metabox settings page / color picker / css variables / Oxygen
- This topic has 6 replies, 4 voices, and was last updated 2 years, 11 months ago by
Cédric.
-
AuthorPosts
-
September 13, 2021 at 9:17 PM #30731
Sash
ParticipantHow 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
September 14, 2021 at 9:21 PM #30755Long Nguyen
ModeratorHi,
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.
September 14, 2021 at 9:39 PM #30756ParticipantSome 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 ); }September 15, 2021 at 9:15 AM #30772ModeratorHi,
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/
October 7, 2021 at 1:22 PM #31200Will
ParticipantHey 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
October 7, 2021 at 2:05 PM #31203Cédric
ParticipantYour 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.
October 7, 2021 at 2:12 PM #31204ParticipantI guess this is what you are looking for :
https://youtu.be/mjLsbRgQ2k4 -
AuthorPosts
- You must be logged in to reply to this topic.