color scheme example

color scheme example

$this->sections[] = array(
    'title'     => __('Color Schemes', 'redux-framework-demo'),
    'desc'      => __('Color Scheme layout', 'redux-framework-demo'),
    'icon'      => 'el-icon-home',

    'fields'    => array(
        array(
            'id'            => 'opt-color-scheme',
            'type'          => 'color_scheme',
            'title'         => 'Color Schemes',
            'subtitle'      => 'Save and load color schemes',
            'desc'          => '',
            'output'        => true,
            //'compiler'      => true,
            'simple'        => false,
            'options'       => array(
                'show_input'                => true,
                'show_initial'              => true,
                'show_alpha'                => true,
                'show_palette'              => true,
                'show_palette_only'         => false,
                'show_selection_palette'    => true,
                'max_palette_size'          => 10,
                'allow_empty'               => true,
                'clickout_fires_change'     => false,
                'choose_text'               => 'Choose',
                'cancel_text'               => 'Cancel',
                'show_buttons'              => true,
                'use_extended_classes'      => true,
                'palette'                   => null,  // show default
            ),
            'groups'        => array(
                'Header'    => 'Set header and nav colors here.',
                'Body'      => 'Set body and content colors here.',
                'Widget'    => '',
                '' => 'These colors are not asigned to any group.'
            ),

            'default'       => array(
                array(
                    'id'        => 'site-header',
                    'title'     => 'site header',
                    'color'     => '#980000', 
                    'alpha'     => 1,
                    'selector'  => '.site-header',
                    'mode'      => 'background-color',
                    'important' => true,
                    'group'     => 'Header'
                ),                            
                array(
                    'id'        => 'site-header-border',
                    'title'     => 'site header border',
                    'color'     => '#ff0000', 
                    'alpha'     => 1,
                    'selector'  => '.site-header',
                    'mode'      => 'border-color',
                    'important' => true,
                    'group'     => 'Header'
                ),                            

                array(
                    'id'        => 'home-link', // ID
                    'title'     => 'home link', // Display text
                    'color'     => '#fdfdfd',   // Default colour
                    'alpha'     => 1,           // Default alpha
                    'selector'  => '.home-link',      // CSS selector
                    'mode'      => 'color',     // CSS mode
                    'important' => true,         // CSS important
                    'group'     => 'Header'
                ),
                array(
                    'id'        => 'site-description',
                    'title'     => 'site description',
                    'color'     => '#ededed', 
                    'alpha'     => 1,
                    'selector'  => 'h2.site-description',
                    'mode'      => 'color',
                    'important' => true,
                    'group'     => 'Header'
                ),
                array(
                    'id'        => 'navbar',
                    'title'     => 'navbar',
                    'color'     => '#e06666', 
                    'alpha'     => 1,
                    'selector'  => '.navbar',
                    'mode'      => 'background-color',
                    'group'     => 'Header'

                ),   

                array(
                    'id'        => 'body-text',
                    'title'     => 'body text',
                    'color'     => '#000000', 
                    'alpha'     => 1,
                    'selector'  => 'body',
                    'mode'      => 'color',
                    'group'     => 'Body'
                ),                             
                array(
                    'id'        => 'site-content',
                    'title'     => 'site content',
                    'color'     => '#a4c2f4', 
                    'alpha'     => 1,
                    'selector'  => '.site-content',
                    'mode'      => 'background-color',
                    'group'     => 'Body'
                ),
                array(
                    'id'        => 'entry-content',
                    'title'     => 'entry content',
                    'color'     => '#93c47d', 
                    'alpha'     => 1,
                    'selector'  => '.entry-content',
                    'mode'      => 'background-color',
                    'group'     => 'Body'
                ), 
                array(
                    'id'        => 'entry-title',
                    'title'     => 'entry title',
                    'color'     => '#000000', 
                    'alpha'     => 1,
                    'selector'  => '.entry-title a',
                    'mode'      => 'color',
                    'group'     => 'Body'
                ),   
                array(
                    'id'        => 'entry-title-hover',
                    'title'     => 'entry title hover',
                    'color'     => '#ffffff', 
                    'alpha'     => 1,
                    'selector'  => '.entry-title a:hover',
                    'mode'      => 'color',
                    'group'     => 'Body'
                ),                            
                array(
                    'id'        => 'entry-meta',
                    'title'     => 'entry meta',
                    'color'     => '#0b5394', 
                    'alpha'     => 1,
                    'selector'  => '.entry-meta a',
                    'mode'      => 'color',
                    'group'     => 'Body'
                ),                            

                array(
                    'id'        => 'widget-container',
                    'title'     => 'widget container',
                    'color'     => '#f1c232', 
                    'alpha'     => .5,
                    'selector'  => '.widget',
                    'mode'      => 'background-color',
                    'group'     => 'Widget'
                ),
                array(
                    'id'        => 'widget-title',
                    'title'     => 'widget title',
                    'color'     => '#741b47', 
                    'alpha'     => 1,
                    'selector'  => '.widget-title',
                    'mode'      => 'color',
                    'important' => true,
                    'group'     => 'Widget'
                ),
                array(
                    'id'        => 'widget-text',
                    'title'     => 'widget text',
                    'color'     => '#fdfdfd', 
                    'alpha'     => 1,
                    'selector'  => '.widget a',
                    'mode'      => 'color',
                    'important' => true,
                    'group'     => 'Widget'
                ),

                array(
                    'id'        => 'sidebar-container',
                    'title'     => 'sidebar container',
                    'color'     => '#d5a6bd', 
                    'alpha'     => 1,
                    'selector'  => '.sidebar-container',
                    'mode'      => 'background-color',
                    'important' => true,
                    'group'     => ''
                ),
                array(
                    'id'        => 'site-footer',
                    'title'     => 'site footer',
                    'color'     => '#ededed', 
                    'alpha'     => 1,
                    'selector'  => '.site-footer',
                    'mode'      => 'background-color'
                ),
                array(
                    'id'        => 'site-footer-text',
                    'title'     => 'site footer text',
                    'color'     => '#000000', 
                    'alpha'     => 1,
                    'selector'  => '.site-footer a'
                ),  
            )
        ),
    ),
);