upthemes / colorcase Goto Github PK

A plugin to add custom color schemes to your WordPress theme.

PHP 79.49% CSS 3.11% JavaScript 17.40%

colorcase's Introduction

Colorcase

A plugin to add custom color schemes to your WordPress theme.

###Example theme support declaration

$color_locations = array(

	'sections' => array(

		'Sidebar' => array(
			'Background Color' => array(
				'selector' => 'body:before',
				'attribute' => 'background-color',
				'default' => '#FFFFFF',
			),
			'Text Color' => array(
				'selector' => '#sidebar, #sidebar .widget-title',
				'attribute' => 'color',
				'default' => '#333333',
			),
			'Link Color' => array(
				'selector' => '#sidebar a',
				'attribute' => 'color',
				'default' => '#333333',
			),
			'Link Hover Color' => array(
				'selector' => '#sidebar a:hover, #sidebar a:focus',
				'attribute' => 'color',
				'default' => '#707070',
			),
		),

		'Content' => array(
			'Background Color' => array(
				'selector' => '.hentry',
				'attribute' => 'background-color',
				'default' => '#FFFFFF',
			),
			'Text Color' => array(
				'selector' => '#content',
				'attribute' => 'color',
				'default' => '#333333',
			),
			'Link Color' => array(
				'selector' => '#content a',
				'attribute' => 'color',
				'default' => '#333333',
			),
			'Link Hover Color' => array(
				'selector' => '#content a:hover, #content a:focus',
				'attribute' => 'color',
				'default' => '#707070',
			),
		),

	),

	'palettes' => array(

		'Default' => array(

			'Sidebar' => array(
				'Background Color' => '#FFFFFF',
				'Text Color' => '#333333',
				'Link Color' => '#333333',
				'Link Hover Color' => '#707070',
			),

			'Content' => array(
				'Background Color' => '#FFFFFF',
				'Text Color' => '#333333',
				'Link Color' => '#333333',
				'Link Hover Color' => '#707070',
			),

		),

		'Winter Sky' => array(

			'Sidebar' => array(
				'Background Color' => '#FFF6C6',
				'Text Color' => '#543900',
				'Link Color' => '#543900',
				'Link Hover Color' => '#333333',
			),

			'Content' => array(
				'Background Color' => '#543900',
				'Text Color' => '#EBF5FF',
				'Link Color' => '#EBF5FF',
				'Link Hover Color' => '#FFF6C6',
			),

		),

		'Mirkwood' => array(

			'Sidebar' => array(
				'Background Color' => '#C7C095',
				'Text Color' => '#302A20',
				'Link Color' => '#382F22',
				'Link Hover Color' => '#D8F536',
			),

			'Content' => array(
				'Background Color' => '#302A20',
				'Text Color' => '#C7C095',
				'Link Color' => '#D8F536',
				'Link Hover Color' => '#615F3C',
			),

		),

		'Crooked Crown' => array(

			'Sidebar' => array(
				'Background Color' => '#332C0B',
				'Text Color' => '#F0A50E',
				'Link Color' => '#A34212',
				'Link Hover Color' => '#6B091C',
			),

			'Content' => array(
				'Background Color' => '#9E970B',
				'Text Color' => '#332C0B',
				'Link Color' => '#A34212',
				'Link Hover Color' => '#6B091C',
			),

		),

	),



);

add_theme_support( 'colorcase', $color_locations );

colorcase's People

Contributors

Stargazers

Watchers

colorcase's Issues

Themes instead of granular control

@chriswallace just expanding on out talk the other day. Feel free to jump in here.

Looking to revamp Colorcase to allow themes to register color palettes instead of granular sections like header, sidebar, etc.

Need to compare color contrast and decide a text color to use when the background color is changes as well. Chris suggested this article.

Adding support for translations and media queries

I'd like to use Colorcase but had a couple of features I'll need. I'm happy to implement them but wanted to run them by you before putting in the time.

Translations
Because array keys are used for section and control titles, they can't be safely translated. Currently the structure looks like this:

$color_locations = array(

    'sections' => array(

        'Sidebar' => array(
            'Background Color' => array(
                'selector' => 'body:before',
                'attribute' => 'background-color',
                'default' => '#FFFFFF',
            ),
        )
    )
);

I'd like to extend it to have a label argument for sections and controls:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
            'label' => __( 'Sidebar', 'theme-slug' ),
            'controls' => array(
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => 'body:before',
                    'attribute' => 'background-color',
                    'default' => '#FFFFFF',
                )
            )
        )
    )
);

To ensure backwards compatibilty, I'd look for a label array key and then load the controls appropriately depending on whether or not one exists. There's a small potential for a clash if someone called a section or control "label", but it seems unlikely for it to be lower-case.

I'm open to alternatives, like _label if you want to protect this more. Or we could preserve the array structure and just add a _label control alongside the existing controls, which we pluck out before processing the controls:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
                '_label' => __( 'Sidebar', 'theme-slug' ),
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => 'body:before',
                    'attribute' => 'background-color',
                    'default' => '#FFFFFF',
                )
            )
        )
    )
);

This approach may actually be less code to maintain backwards compatibility. Though it may muddy the simplicity of the data structure for new adopters.

Media Queries
I'd like to add support for adding selectors wrapped in a media query, since this is something I need to tackle. I would suggest an implementation like this:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
                '_label' => __( 'Sidebar', 'theme-slug' ),
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => 'body:before',
                    'attribute' => 'background-color',
                    'default' => '#FFFFFF',
                    'media_queries' => array(
                        array(
                            'query' => "@media(min-width:500px)",
                            'selector' => '.site-header',
                        ),
                        array(
                            'query' => "@media(min-width:900px)",
                            'selector' => '.site-footer',
                        ),
                    ),
                )
            )
        )
    )
);

I can work on this stuff later this week if you think it's something you'd like to merge.

upthemes / colorcase Goto Github PK

colorcase's Introduction

Colorcase

colorcase's People

Contributors

Stargazers

Watchers

colorcase's Issues

Themes instead of granular control

Adding support for translations and media queries

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent