A comprehensive collection of visual components for your site
About Fourteen Colors
Fourteen Colors is a plugin that allows you to easily customize the colors of the Twenty Fourteen theme without the need for coding. It provides color pickers for various elements of the theme and automatically adjusts the contrast to ensure accessibility. The plugin also includes an Accent Color feature that was originally developed for the Twenty Fourteen theme but was removed before release.Screenshots
Frequently asked questions
What does the Fourteen Colors plugin do?
Fourteen Colors allows you to re-color the Twenty Fourteen theme. It provides two color pickers to control various elements like background, link, and navigation colors.
Does Fourteen Colors ensure accessibility?
Yes, Fourteen Colors automatically adjusts your color choices to ensure the minimum required contrast. This helps keep Twenty Fourteen accessible-ready and your site readable.
What color elements can I customize with Fourteen Colors?
You can customize the Header/Sidebar/Footer Background Color, Featured Content Background Color, Link Color, Search Bar Color, Navigation Menu Hover Colors, Text Selection/Highlight Color, and Audio/Video Player Colorschemes.
How does Fourteen Colors relate to the Twenty Fourteen theme's development?
The Accent Color feature, which this plugin addresses, was originally developed in Twenty Fourteen core but was removed. This plugin reintroduces and enhances that functionality.
Changelog
Please note: this plugin is only updated when changes are needed for compatibility with theme updates or WordPress changes (or in rare cases, if additional bugs/edge cases are found and fixed). It is not anticipated that major updates will be needed in the future as of December 2015.
1.6
- Apply custom colors to theme-registered block editor color palettes.
- Add support for block editor styles corresponding to WordPress 5.0.
- Update color patterns to address changes in Twenty Fourteen 2.3, 2.4, and 2.5.
1.5
- Update color patterns to address changes in Twenty Fourteen 2.0, 2.1, and 2.2. This includes full support for the media widgets introduced in WordPress 4.8 and 4.9.
1.4
- Add postMessage previewing of base colors for an enhanced user experience. Contrast and accent colors are now instantly previewed in the customizer, with secondary generated colors updating on a slight delay (typically a few seconds).
1.3
- Implement support for Selective Refresh in the Customizer. Colors will now be updated much more quickly (but still not instantly) in the Customizer preview. Available in WordPress 4.5+.
1.2
- Updates for WordPress 4.0 / Twenty Fourteen 1.2. Please update those before updating Fourteen Colors.
- The mediaelements-genericons component, which facilitated audio/video player color-scheming, has been merged into Twenty Fourteen core.
- Added two new filters to adjust the plugin’s output CSS:
fourteen_colors_contrast_cssandfourteen_colors_accent_css. - Leverage some of the Customizer API improvements in WordPress 4.0.
- Fix a couple of really minor, obscure bugs that surfaced in the wild.
1.1
- Full support for Twenty Fourteen 1.1.
- Fix mobile menu-toggle button colors.
- Fix support for button-styled links in widgets (via the
.buttonclass). - Add a filter to the version of the accent color that contrasts with the white page background, facillitating the ability to override the automatically-generated version with another color picker via an add-on plugin.
1.0.2
- Fix bugs with mobile navigation menus with certain color combinations.
- Add support for the
.buttonclass introduced in Twenty Fourteen 1.1 / WordPress 3.9. - Fix link and border color in Twenty Fourteen Ephemera widgets when used in the Primary and Footer widget areas with a light contrast color.
- Override the Site Title option, as it is hidden from the Theme Customizer (since Fourteen Colors automatically adjusts it for contrast).
- Add basic support for IE8, which is handled differently in Twenty Fourteen due to its lack of support for modern standards.
1.0.1
- Add a description of the different color controls (requires changes that might change the order of the options).
- Fix paging navigation hover states (border, not background color should change).
- Darken all borders when using light contrast colors on mobile.
- Fix sub-menu colors on mobile when using a light contrast color.
- Automatically refresh the cached plugin output CSS after the plugin has been updated.
- Hide the site title color control to reduce confusion, since the color is automatically tweaked based on the contrast color. The Header Text Color option is still available via the Appearance -> Header page if it needs to be customized.
1.0
- Plugin is ready for general use, alongside Twenty Fourteen 1.0 and WordPress 3.8.
0.7
- Screenshots, finalized documentation.
0.6
- Code cleanup, inline code documentation, coding standards to match Twenty Fourteen core.
- Tweaks post-code-review, props @lancewillett.
0.5
- Save the entire plugin CSS output as a single theme_mod to allow for more computationally intensive color calculations.
- Introduce a more robust set of color calculations; most importantly, the ability to calculate the contrast ratio between any two colors.
- Adjustments to make any color work as the accent color, addressing the concerns that led to the feature’s removal from Twenty Fourteen core.
- Ensure that there is adequate contrast between all colors that are displayed against each other.
0.2
- Build out of the contrast color option.
0.1
- Initial port from the Twenty Fourteen Theme’s implementation.
- Initial pass at an experimental “Contrast Color” option.
