wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Change Default Green Color WP 2014 Theme

WordPress themes

Change Default Green Color WP 2014 Theme

Last updated on February 18, 2017
Posted on June 29, 2014

I got a question from one of my YouTube video audience, a few months ago, he was asking how we can actually change the default green color of Twenty Fourteen theme.

Now before we do anything further here, I strongly suggest you to create a child theme first, click here to watch or read how I did it.

If you don’t really care about SEO (Search Engine Optimization) point of view, then it’s so easy, install “Fourteen Colors” which is created by Nick Halsey, and you’re done.

However if you want to make the SEO thing a little bit better, then you shouldn’t have a bunch of long code on your header, as Search Engine bots start crawling your page from top to bottom, as far as I know.

Long codes on header
I would clean this.

I didn’t say, it is a bad thing, not at all, but I personally would to have a cleaner header codes. I also have another video tutorial on the same principal here with this theme.

So my method to change green color WP 2014 Theme

Result of changing green color
Result of changing green color

1. Install the plugin, “Fourteen Colors”.

Fourteen colors plugin
Fourteen colors plugin by Nick Halsey

2. Still in dashboard, navigate to “Appearance”, and click on “Customize”. This will bring you to the theme’s customizer. This will bring you to the theme’s customizer. Another tutorial using customizer for the same theme, you can find on my previous post.

How to Remove Twenty Fourteen Author Name or Link

3. Here you will find the “Accent Color”, “Contrast Color”, and “Background color” options.

Fourteen Colors Options
3 Options of the plugin

And to change the green color WP Twenty Fourteen theme, you can click “Accent color” and choose color you like by moving the slider, or choosing the solid provided colours which are already there.

Change green color 2014 theme
Change green to another color in Twenty Fourteen

Click Save&Publish button then “Close”. Refresh your browser, and you should see the changes.

This is the cleaning part begins,

4. Right click anywhere on your page, using Firefox or Chrome browsers, you will see “View Page Source” option, click that.

View Page Source
Right click anywhere – View Page Source

This is what you will see, a long css code on your header. If you want to clean it, copy these code, starting from the /* Custom accent color. */ text until the first </style> code on the bottom.

Then, add these code on child theme’s style.css stylesheet file.

Change the comment to be description that you can remember what the code is for.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

For example, I added this line to mine:

/*Twenty Fourteen color change with Fourteen colours plugin – Custom accent color */

Which code to be copied
Which code to be copied
Changing CSS comments - easier to understand
Changing CSS comments – easier to understand

Click “Update File” button.

5. Refresh the blog, you should see the same result, but with a cleaner header code.

What Next?

Now that we are done, you can either keep the plugin or deactivate and delete it. I always think that using less plugin, our admin page will be faster, because it needs less resources to load.

How about if we want to change the color again in the future? You can do the steps above and repeat them. Leave your feedback below if you have any questions or other opinions.

color twenty fourteen twentyfourteen wp 2014

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Showing Twenty Fourteen Thumbnail in A Smaller Size
→ How I add thumbnails with Twenty Twelve theme

Comments

  1. Pintu says

    October 8, 2014 at 8:34 am

    Good way to change the colour.

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen
  • Setting Autoplay Twenty Fourteen Slider

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept