Not a big fan of green and black? Love the layout of Twenty Fourteen, but need its colors to match your brand? Don’t have time to create a child theme, or want to change up your site’s look on a regular basis without technical overhead?
Fourteen Colours is the most efficient way to re-colour the Twenty Fourteen theme. It provides two colour pickers, which together control:
- Header/Sidebar/Footer Background Colour
- Featured Content Background Colour
- Link Colour
- Search Bar Colour
- Navigation Menu Hover Colours
- Text Selection/Highlight Colour
- Audio/Video Player Colourschemes
- And more…
Fourteen Colours automatically adjusts your colour choices to ensure the minimum required contrast to keep Twenty Fourteen accessible-ready, and to keep your site as readable as possible. The plugin is designed to support almost any combination of colours, so you can be creative and express yourself with your site! Please report any issues on the support forums, after reading the FAQ and the changelog to see if they address your question.
The Accent Colour feature was originally developed in Twenty Fourteen core, but it was removed near the end of the initial development cycle due to a variety of concerns. This plugin addresses those concerns and adds the contrast colour feature to enable a broad range of custom colourschemes.
Special thanks to the entire Twenty Fourteen team for their work on the accent colour throughout the development cycle. This plugin (and Twenty Fourteen) would not exist without their hard work and attention to detail.
- Take the easy route and install through the WordPress plugin adder OR
- Download the .zip file and upload the unzipped folder to the
- Activate the plugin through the ‘Plugins’ menu in WordPress
- Go to the Customiser (Appearance -> Customise) and adjust the two new colour pickers under the “Colours” heading to your liking
- I tried using Fourteen Colours with a theme other than Twenty Fourteen and …
Don’t. There is a known bug where the plugin may be applied to other themes when live previewing them, but Fourteen Colors will prevent itself from functioning when the current theme is not Twenty Fourteen or a child.
- Child Themes
Fourteen Colours is a plugin, not a child theme, because it is primarily programmatic (ie, it would only consist of a functions.php file), and for flexibility.
You can use Fourteen Colours with both Twenty Fourteen and child themes. Be aware that the Fourteen Colours settings are stored with the active theme, so if you switch to a child theme or switch child themes, you’ll need to re-set your colours. Child theme compatibility depends on the extent of changes made by the child theme. But child theme developers can hook into Fourteen Colours to extend it to adapt to their changes, allowing the plugin to work seamlessly even if the child theme is significantly different than the parent theme.
- Suggested/Recommended Colours
The contrast colour option tends to work best with colors that are either greyscale or close to greyscale. Try light or dark greys in conjunction with any accent colour if the default black feels too bold.
Accent colours work best when they are intense, fully saturated colours that avoid anything too light or too dark. However, brighter colours such as yellow do work well, as do darker colours such as black, with a good choice of contrast color. If a particular set of colours feels close, but not quite right, try making the accent colour more intense and making the contrast colour lighter (if it’s already light) or darker (if it’s already dark) to increase the overall contrast of your site.
- Known Issues
Due to the automatic generation of secondary colours, in order to maximize colour contrast ratios, undesirable colours may come up in some places. You can override these with custom CSS, and feel free to post in the support forums if you can’t figure it out (but search there first).
Please note that if you’re having trouble getting the plugin to “work” it is extremely likely that you’re doing something wrong. Don’t forget that the colour options are added to the Customiser.
- Supported Colours
All colours are supported except for pure white (#fff), which should technically work but results in a poor user experience due to the lack of contrast, which helps to provide visual hierarchy. Pure black (#000) accent colours are more fully supported, but can also have (less significant) issues with providing proper visual hierarchy.
I worked the past weekend and this plugin working fine
I saw the last review and decided to try it again on my site.
Its working for me now.
I am using the most current version of WordPress 4.4 and the most current version of Twenty Fortheen Theme. The plug-in installed and will activate but does not show up after activation. The options under Appearance / Customize / Colors are the defaults only for the theme. I have noticed reports on the support blog over a month ago of the same issue on earlier versions of Twenty Fourteen Theme. I hope that the developer gets this message and has time to resolve the issue. His plug-in was a great value.
THANK YOU NICK!
A few months ago I created silentcinemasociety.org and spent hours changing all the green to gold. I don’t even remember if I did it in css or html or both. Just a lot of inspecting and trial and error. It looked great, and has for months.
Then today I went to the site and everything was green again.Arrrrrgh! Like I said, I don’t remember how I did it the first time, and don’t know why it reverted. Maybe an update?
So I googled how to do global color changes — and instead of complicated code I found this one-click plugin. It’s absolutely superb.
I’m actually glad the colors reverted, so I could discover this plugin. Like I said, HA! — happy accident.
Thank you again!
very simple and easy to use, thank you!
First I found some descriptions how and where to edit the CSS file (e.g. http://www.pc-zu-hause.de/wordpress-twenty-fourteen-farben-anpassen. But this plugin is really great and very easy to handle.
Contributors & Developers
“Fourteen Colours” is open source software. The following people have contributed to this plugin.Contributors
Interested in development?
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.
- Add postMessage previewing of base colors for an enhanced user experience. Contrast and accent colours are now instantly previewed in the customizer, with secondary generated colors updating on a slight delay (typically a few seconds).
- Implement support for Selective Refresh in the Customizer. Colours will now be updated much more quickly (but still not instantly) in the Customizer preview. Available in WordPress 4.5+.
- Updates for WordPress 4.0 / Twenty Fourteen 1.2. Please update those before updating Fourteen Colours.
- The mediaelements-genericons component, which facilitated audio/video player colour-scheming, has been merged into Twenty Fourteen core.
- Added two new filters to adjust the plugin’s output 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.
- Full support for Twenty Fourteen 1.1.
- Fix mobile menu-toggle button colours.
- Fix support for button-styled links in widgets (via the
- Add a filter to the version of the accent colour 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.
- Fix bugs with mobile navigation menus with certain colour combinations.
- Add support for the
.buttonclass introduced in Twenty Fourteen 1.1 / WordPress 3.9.
- Fix link and border colour in Twenty Fourteen Ephemera widgets when used in the Primary and Footer widget areas with a light contrast colour.
- Override the Site Title option, as it is hidden from the Theme Customiser (since Fourteen Colours 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.
- Add a description of the different colour controls (requires changes that might change the order of the options).
- Fix paging navigation hover states (border, not background colour should change).
- Darken all borders when using light contrast colours on mobile.
- Fix sub-menu colours on mobile when using a light contrast colour.
- Automatically refresh the cached plugin output CSS after the plugin has been updated.
- Hide the site title colour control to reduce confusion, since the colour is automatically tweaked based on the contrast colour. The Header Text Colour option is still available via the Appearance -> Header page if it needs to be customized.
- Plugin is ready for general use, alongside Twenty Fourteen 1.0 and WordPress 3.8.
- Screenshots, finalized documentation.
- Code cleanup, inline code documentation, coding standards to match Twenty Fourteen core.
- Tweaks post-code-review, props @lancewillett.
- 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 colour calculations; most importantly, the ability to calculate the contrast ratio between any two colours.
- Adjustments to make any colour work as the accent colour, 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.
- Build out of the contrast color option.
- Initial port from the Twenty Fourteen Theme’s implementation.
- Initial pass at an experimental “Contrast Colour” option.