MB Settings + Customizer

faithmade-settings-tweaks.php

//Register Settings pages for styles and info 

add_filter( 'mb_settings_pages', function ( $settings_pages ) {
	$settings_pages[] = array(
		'id'               => 'fm_styles_panel',
		'option_name'      => 'theme_mods_page-builder-framework',
		'menu_title'       => 'Style Settings',
		'parent'           => 'themes.php',
		'customizer'       => 'true',
	);
	return $settings_pages;
} );

add_filter( 'mb_settings_pages', function ( $settings_pages ) {
	$settings_pages[] = array(
		'id'               => 'fm_church_info_panel',
		'option_name'      => 'theme_mods_page-builder-framework',
		'menu_title'       => 'Church Information',
		'parent'           => 'themes.php',
		'customizer'       => 'true',
	);
	return $settings_pages;
} );

// Register Button Colors Panels

add_filter( 'rwmb_meta_boxes', 'fm_button_colors_settings' );

function fm_button_colors_settings( $meta_boxes ) {
	$prefix = '';

	$meta_boxes[] = array (
		'title' => esc_html__( 'Buttons', 'text-domain' ),
		'id' => 'fm_button_colors',
		'fields' => array(
			array (
				'id' => $prefix . 'heading_u6cs92mu54f',
				'type' => 'heading',
				'name' => esc_html__( 'Primary Button', 'text-domain' ),
			),
			array (
				'id' => $prefix . 'fm_primary_button_color',
				'name' => esc_html__( 'Button Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
			),
			array (
				'id' => $prefix . 'fm_primary_button_color_hover',
				'name' => esc_html__( 'Hover', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
			),
			array (
				'id' => $prefix . 'fm_primary_button_text_color',
				'name' => esc_html__( 'Text Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
			),
			array (
				'id' => $prefix . 'fm_primary_button_text_color_hover',
				'name' => esc_html__( 'Hover', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
			),
			array (
				'id' => $prefix . 'fm_button_radius',
				'type' => 'slider',
				'name' => esc_html__( 'Button Radius', 'text-domain' ),
			),
			array (
				'id' => $prefix . 'fm_button_border_width',
				'type' => 'slider',
				'name' => esc_html__( 'Border Width', 'text-domain' ),
			),
			array (
				'id' => $prefix . 'fm_primary_button_border_color',
				'name' => esc_html__( 'Border Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
				'visible' => array(
					'when' => array(
						array (
							0 => 'fm_button_border_width',
							1 => '>=',
							2 => 1,
						),
					),
					'relation' => 'and',
				),
			),
			array (
				'id' => $prefix . 'fm_primary_button_border_color_hover',
				'name' => esc_html__( 'Hover', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
				'visible' => array(
					'when' => array(
						array (
							0 => 'fm_button_border_width',
							1 => '>=',
							2 => 1,
						),
					),
					'relation' => 'and',
				),
			),
		),
		'settings_pages' => array(
			0 => 'fm_styles_panel',
		),
	);

	return $meta_boxes;
}

//Register Accent Color Settings

add_filter( 'rwmb_meta_boxes', 'fm_accent_colors_panel' );

function fm_accent_colors_panel( $meta_boxes ) {
	$prefix = '';

	$meta_boxes[] = array (
		'title' => esc_html__( 'Accent Colors', 'text-domain' ),
		'id' => 'fm_accent_color_choices',
		'fields' => array(
			array (
				'id' => $prefix . 'fm_accent_color',
				'name' => esc_html__( 'Accent Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_accent_color_hover',
				'name' => esc_html__( 'Hover', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_light_color',
				'name' => esc_html__( 'Light Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_cark_color',
				'name' => esc_html__( 'Dark Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_light_overlay',
				'name' => esc_html__( 'Light Overlay', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
			),
			array (
				'id' => $prefix . 'fm_dark_overlay',
				'name' => esc_html__( 'Dark Overlay', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
				'alpha_channel' => true,
			),
		),
		'settings_pages' => array(
			0 => 'fm_styles_panel',
		),
	);

	return $meta_boxes;
} 

//Register Menu color options (Probably Added through Connected Fields instead of CSS)

add_filter( 'rwmb_meta_boxes', 'fm_menu_colors_panel' );

function fm_menu_colors_panel( $meta_boxes ) {
	$prefix = '';

	$meta_boxes[] = array (
		'title' => esc_html__( 'Menu', 'text-domain' ),
		'id' => 'fm_menu_colors',
		'fields' => array(
			array (
				'id' => $prefix . 'heading_jtl5gl8n59e',
				'type' => 'heading',
				'name' => esc_html__( 'Main Menu', 'text-domain' ),
			),
			array (
				'id' => $prefix . 'fm_menu_link_color',
				'name' => esc_html__( 'Link Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_menu_link_color_hover',
				'name' => esc_html__( 'Hover', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'heading_jtl5gl8n59e_mamgiq52fwl',
				'type' => 'heading',
				'name' => esc_html__( 'Sub Menu', 'text-domain' ),
			),
			array (
				'id' => $prefix . 'fm_submenu_link_color',
				'name' => esc_html__( 'Link Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_submenu_link_color_hover',
				'name' => esc_html__( 'Hover', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_submenu_bg_color',
				'name' => esc_html__( 'Background Color', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
			array (
				'id' => $prefix . 'fm_submenu_bg_color_hover',
				'name' => esc_html__( 'Hover)', 'text-domain' ),
				'type' => 'color',
				'size' => 7,
			),
		),
		'settings_pages' => array(
			0 => 'fm_styles_panel',
		),
	);

	return $meta_boxes;
}

//Have NOT added church info stuff yet

faithmade-styling.php

//How to write CSS for these settings? 

//Set Variables

$buttoncolor = rwmb_meta( $fm_primary_button_color, ['object_type' => 'setting'], $theme_mods_page-builder-framework );
$buttonhovercolor = rwmb_meta( $fm_primary_button_color_hover, ['object_type' => 'setting'], $theme_mods_page-builder-framework );

//CSS for Variables in Settings page

.fl-button {
    color: $buttoncolor;
}

.fl-button:hover {
    color: $buttoncolorhover
}