wpthemedetector-logo
WordPress Theme Detector Blog
fourteen-colors

Changing the colors of the Twenty Fourteen theme

27 comments

The new WordPress default theme Twenty Fourteen was released with WordPress 3.8 on Dec 12, 2013. That very same day, a new plugin developed to easily re-color the Twenty Fourteen theme appeared in the WordPress Plugin Directory.

I realized about the existence of this plugin when, a few days after the WordPress 3.8 release, it was detected on a site by our WordPress Theme Detector tool. The name of the plugin caught my attention so I looked for it in the Plugin Directory. I found the Fourteen Colors plugin interesting enough so I thought I´d share it with our readers as soon as I had a little time to write this post.

Changing the default colors with the Theme Customizer

If you try to customize the colors of your site with the Twenty Fourteen theme default options, you will find that by using the WordPress Theme Customizer (Appearance > Themes > Customize) you will only be able to modify the Site title Color and the Background Color:

default-twenty-fourteen-colors

The basic color options for Twenty Fourteen customization

So, if you wanted to give your theme a further color twist, for example if you wanted to change the header or the sidebar colors, you would need to modify the styles of those elements by CSS editing (if you are going to do so, please create a child theme first as I always recommend).

But if you just want to change your color scheme in an easy, quick way, there is this plugin that will do that for you on the fly:

Changing colors with the Fourteen Colors plugin

The Fourteen Colors plugin allows you to change the look of your site by means of two new color options, each with its own color picker. These options take care of controlling the colors of a lot of elements such as the header, sidebar and footer backgrounds, the links, the featured content background, the navigation menu hover color and many more.

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?

It is a very easy to use plugin. All you have to do is install it, activate it, and you will be able to see your new color options waiting for you on the Theme Customizer:

twenty-fourteen-colors

The new color options added by the Fourteen Colors plugin

In addition to Site Title Color and Background Color, you will find these two new options:

  • Accent Color: It is the color used for links, highlighting, menu elements hover or for the search icon shown at the top right corner of your site.
  • Contrast color: It is the background color that will be used for your header, sidebar or footer, and on some other elements such as the audio/video player.

According to Nick Halsey, the author of this plugin, the Accent Color feature was originally developed in Twenty Fourteen core, but it was removed near the end of the development cycle due to a variety of concerns. He says this plugin addresses those concerns and adds the contrast color feature to enable a broad range of custom color schemes.

If you wanted to modify the color of some elements independently (for instance if you wanted your footer to have a background color different from the colors used on the rest of your site), then you would need to tweak your CSS.

But if all you want is to be able to modify colors in a general and readable fashion, this plugin provides an efficient way for easily changing your site´s color scheme.

Luis Alejandre

Luis is the creator of the WPThemeDetector tool and the chief editor of this blog. You can read more about Luis in our About page.
Liked this post? Please share it!

27 Comments

  1. sir how can show ads in navbar in twenty fouteen theme…please write a post about how to

  2. Hi Luis, thanks for your sharing 🙂 But I have a problem: no matter changes I make, they do not show up on my blog. Link color or background, they stay green and black. I don’t understand.

    • Hi Tony,
      That´s strange. I can´t understand it either, this plugin is so easy to work with. Of course you´re saving your changes before leaving the Customizer, aren´t you?

  3. Great recommendation. Thank You. But how do I change the color of main content aera?

      • I am struggling with this also. I am dyslexic and words move about when there is a white background. If I could just make it grey I would be so happy.

        • Try adding this to your style.css, for example to get a #bbb grey background:

          .content-area, .entry-header, .entry-content , .entry-meta {
          background-color: #bbb !important;
          }

          I always recommend using a child theme for any theme modification. You can read more about it in our Child Theme Tutorial Series

  4. Hi Luis, your posts have been very helpful to me a brand new blogger. I started out with Sunspot, but changed to the wonderful Twenty Fourteen Theme. Everything worked well.
    Then I created a child theme with Child Themify (was successful after many tries.)
    My problem is I’ve lost my menu. I don’t seem to be able to get it back on the left side of my page. I’ve tried everything.

    • Sorry I was away for the weekend. I hope you figured it out and have your menu back by now.

  5. Thank you, finally get rid of the green.

  6. Can I change the background color of the content area to semi-transparent? Now my background is only a narrow column on the right,where the penguin is.

    • You would need to do via CSS. As usual, I strongly recommend to use a child theme for any customization.

  7. Hi Luis,
    I really like the twenty fourteen plugin, thank you!
    I added a header image, but have now decided to change the main colours and need to change this image for a new one, I have tried to remove the image, which it does from the site, but I cannot get the option to load a new image, help please?

    • Hi Philip,

      In your admin area go to “Appearance” > “Header” and over there under “Header Image” you´ll see the option “Select Image”, from where you can upload your image.

  8. Thanks for this Luis.
    I cannot find the Theme Customizer for Fourteen COlors on my site. I have installed and activated the plugin. What Am I doing wrong?

    • There is not such a thing as the Theme Customizer for the Fourteen Colors plugin. The color options are added by the plugin to the Theme Customizer of your active theme (“Appearance” > “Customize” on your Admin area, or the “Customize” button on your active theme when you are in the Themes Manager). Twenty Fourteen must be your active theme for it to work.

  9. This was a great article!!

    Luis i have a question about twenty fourteen as it relates to this plugin. By changing the accent color it will change the menu elements hover exactly like you said. the color i chose was white so now when i hover over the navigation it changes to white just like it want it to. but it also changes the color of the search icon. do you know where in the ccs i can change the color of just the search icon?? even if i hover over the icon and it turns white like the rest of the menu elements thats fine. but i dont want the search icon to be white when its not active or being hovered over by the users mouse.

    • The search icon has its own class. You just need to add this to your style.css:

      .search-toggle {
      background-color: #55cc55 !important;
      }

      Of course, change the color to any value you want (for instance #55cc55 is a greenish color).

      As usual, I always recommend using a child theme for any modification. If you are not familiar with child themes, please check our Child Theme Tutorial Series

  10. Thanks for share it and twenty fourteen is best theme for a blog and its easily managed.

  11. Thanks for helpful post, I have a question too is this plugin will work for others themes too ?

  12. which one is best theme?? twenty fourteen or fifteen??

  13. This is perfect for what I want to do. However, it does not seem to work with the latest version of Twenty Fourteen Theme. Version 1.6. When installed and activtated the choices do not appear under Appearance / Customize / Colors. The same basic background, contast, and accent colors. I need ot change the White Pages to a light gray so my forms fields show up.

  14. How can I change the background color in the navigation bar (back/forward)

  15. Has the Fourteen Colors plug-in been tested for wordpress 4.9.4 and Theme 2014 version 2.1? I am just looking to change the sidebar color.

Submit a Comment

Your email address will not be published. Required fields are marked *

×

Featured post: All Top Ten WordPress themes are premium now Read more