Create a new Skin color


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Last Reviewed: 11-Sep-15 (3.4.8) 3.1-3.4.*

IMPORTANT!
Customizer 3.1.11 added a new feature in the Skin Panel to use the minified CSS stylesheet. This checkbox MUST be unchecked for this snippet to operate correctly using Method 1.

Method 1 (Free version)

If you need to create a new Skin color, here is one way of achieving it. The basic process is that we are going to use one of the existing Skins (red.css) and make changes to it to reflect the new Skin color. In order to demonstrate, I’m going to create a new Skin based on pink/green (what a great combination for a Dentist out there!).

To make this change, you must create a child theme. Everything you need to know about creating a child theme with Customizr here.
Download a free start-up child theme here

Step 1 – Make a copy of the original red.css

Since 3.1, there have been changes to the css files which are now reflected in this updated snippet. For example, red.css has been updated to red2.css, blue.css has been updated to blue3.css. So choose the highest version number where red(n).css is referenced below. Substitute your child theme folder for (customizr-child).

Go to
3.2+/wp-content/themes/customizr/inc/assets/css
3.1 /wp-content/themes/customizr/inc/css
and move a copy of red(n).css to
3.2+/wp-content/themes/customizr/inc/assets/css
3.1 /wp-content/themes/customizr/inc/css.

Now copy the 3 subdirectories (fonts, img and rtl) from
3.2+/wp-content/themes/customizr/inc/assets/css
3.1 /wp-content/themes/customizr/inc/css
to
3.2+/wp-content/themes/(customizr-child)/inc/assets/css/
3.1 /wp-content/themes/(customizr-child)/inc/css/

Step 2 – Set Customizr Skin to Red

Click Customise-Global options-Skin, and select Skin>Red. You should now see the Red skin throughout the site.

Step 3 – Choose new Skin colors

The Skins have been set up with all the CSS needed to represent shades of Blue, Green, Yellow, Orange, Red, Purple, Grey, Black. With each shade, there are 2 Primary shades and 10 Secondary shades. All 12 are used, but the Primary shades are the significant ones (66 primary occurrences v 69 secondary occurrences). The simplest approach is to get the 2 Primary shades in place and then work out the remaining Secondary shades needed. The following table shows the existing shades of Red (red.css) and Blue (blue.css), and the number of occurrences throughout (color).css.

Primary red.css red2.css blue.css blue3.css New Color
Primary 1 (x47/52) #e10707 #e7797a #0088cc #27cda5 #________________
Primary 2 (x16/16) #970505 #db383a #005580 #1b8d71 #________________
Secondary red.css red2.css blue.css blue3.css New Color
Secondary 1 (x5/8) #f93c3c #f3baba #1ab2ff #60e1c2 #________________
Secondary 2 (x2/1) #d70707 #e57071 #0081c2 #25c49e #________________
Secondary 3 (x17/11) #c80606 #e36365 #0077b3 #23b894 #________________
Secondary 4 (x1/1) #c30606 #e25f60 #0074ad #22b390 #________________
Secondary 5 (x12/10) #7e0404 #d42628 #004466 #177760 #________________
Secondary 6 (x4/2) #650303 #be2224 #00334d #13624f #________________
Secondary 7 (x10/10) #f70a0a #eb8f8f #0099e6 #35d9b1 #________________
Secondary 8 (x1/1) #ab0505 #ab0505 #0099e6 #35d9b1 #________________
Secondary 9 (x3/2) #4d0202 #a91e1f #002233 #0f4c3e #________________
Secondary 10 (x2/2) rgba(225, 7, 7, 0.5) rgba(231, 121, 122, 0.5) rgba(0, 136, 204, 0.5) rgba(39, 205, 165, 0.5) #________________

Start by choosing your 2 Primary colors, I’m going to use Pink and Green.

Step 4 – Replace Skin colors

Using a Text Editor, edit red(n).css and do a Search/Replace on the Primary colors. In my example, I’ll change:
#e7797a to pink (#ffc0cb)
#db383a to green (#008000)

Save your changes and refresh your browser – you should now see the new Skin based on the 2 Primary colors (which can be the same color).

Now do the same for all the Secondary colors. Some of the shades are very close, so you may decide to change the 10 Secondary colors to either of the 2 Primary colors.

Because you have made this change in a Child Theme, when you next Update to the next release of Customizr your changes should still work.
However, this file is a key file within the core Theme and may be subject to change in a future release.
Every new release contains the file readme.txt in customizr/ (root directory) so check if any changes have been made to (color).css.
If so, then you will need to reapply this Snippet to ensure you are using the latest version of (color).css.

IMPORTANT!
Customizer 3.1.11 added a new feature in the Skin Panel to use the minified CSS stylesheet. This checkbox MUST be unchecked for this snippet to operate correctly using Method 1.

Method 2 (3.1 Free version)

Thanks to @ElectricFeet for isolating the list of selectors that have an impact on Customizr 3.1. Same principle as Method 1, but with a much smaller code base to change. (Will add 3.2+ code in future).

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.


Related Snippets you may also like


69 thoughts on “Create a new Skin color

  • Stefania

    Hello, great article, thanks.
    I am using method 2 to assign my colors. However, with this method I could not change the color of drop caps.
    Even if I try to address the class of the drop caps in my css, this is ignored and overridden by the standard skin color.
    The color for drop caps seems to be addressed directly by a function within the file “class-fire-resources.php” that directly picks up either the standard skin color from the user options or black (#444). Is there a way to overcome this? Thank you!

    • Menaka S

      Hi Stefania,
      Along with the above code, add the following to the child theme’s style.css

  • Sara

    Hi.
    This is great advice. I’m looking for a way to change the lower border of the header as well and I can’t find the right bit in the code. Could somebody point me to where to look?
    Thanks! 🙂

    • Menaka S

      Hi Sara,
      Try adding this to your child theme’s style.css

  • Anthony Gomgom

    Hello.

    I have followed your instructions, step by step, but it doesn’t work !

    I copied red.css and red.min.css (in /wp-content/themes/customizr/inc/assets/css) then I rename by blue4.css and blue4.min.css.

    After refresh, I go to my Customise-Global options-Skin and I have 1 more skin colour available.

    But this colour is called “#27CDA5” and when I chose this one, my website become red, as when I chose #e10707.

    After checking with notepad++, there aren’t #e10707 in blue4.css and blue4.min.css

    So, where the problem come from ?

    Thank you for your help.
    Best regards !

  • Marshall Hunt

    Hello,

    Thanks for the tutorial, first of off – it took some work, but it’s probably good to get my hands dirty with CSS. 😀

    Anyway, I created a brand new color (dark blue) with the title blue4.css abd blu4.min.css. My question is this: My new color used the copy and paste for the blue3 and blue3.min code, and that is what is showing up in my back end when I edit the skins. It changes to the blue4 hex color I changed, but the backend of wordpress shows it as a duplicate of the blue3.

    In other words, when choosing the skins, I have two blue3 options (same color and hex code), but the second (new) one when selected changes to the new blue4 color. It’s an asthetics question more than anything, but if there’s an easy fix… I wanted to add a new color, not change an existing one.

    Thanks!

    • Dave Bardell Post author

      Hi Marshall. Your timing was (maybe) immaculate as I’ve just completed an update for the Free version.

      I’m not sure of the Czr code base, but my intention was that you’d take the copy of blue3.css and move it into your child theme without changing the name (to blue4.css). So having edited blue3.css in the Child Theme, you’d no longer be able to use that Blue Skin after you’ve added your new colors, though the new colors will use the Blue Skin name.

      OK? Rather than adding further comments here, I suggest you email me and then when resolved, publish the solution.

  • Dave Bardell Post author

    Just to let you know, there were significant changes to these codes in 3.1. The snippet has needed an overhaul for some time AND needs to consider PRO users too.

    The good news – I’m on it. Just started and hope to publish within the next few days.

    My sincere apologies to anyone who has tried to use it in 3.2+, though there has been a warning at the top of the snippet for some time.

    I’ll update here when it’s done.

  • John Rothra

    I tried using Method 2 by inserting the code from ElectricFeet into my child theme’s custom css. Using the customizer feature I had to select a skin, so I chose one of the blues. Since the above code uses the red, this allows me to see how it works. However, it didn’t work, even though I didn’t change the above code at all, just copied and pasted — the skin is still blue. I’m using Customizr 3.3.12.

  • kiwigirl

    This was a wonderful post thank you! I tried both methods, and Method 1 worked perfectly! (Method 2 only seemed to change some colours, and others were left the skin colour). You made this so easy! Thank you.

    • phdsigns

      @Angelo,

      Hi, the best is to download one of the skins (the red.css here gives you a good start even though it’s missing a couple of lost “souls”), otherwise, there is a good chance you will miss a some hovers, focuses and the like like it happened to me :^)
      Here is the list of the lost “souls” I have encountered:
      340202
      fa5454
      b00505
      e5e5e5 (this one is not really a lost soul, it’s a very lite grey for the topbar menu I believe)
      f93737
      ededed (same as e5e5e5)
      0, 105, 214, 0.25

      Hope it helps,
      Philippe

  • Jeff

    Firstly, I love this theme. However, I’m fairly new to CSS and struggling to get the correct coding for what I need. I’m looking to change the font color of the links within the body of all posts and pages, but not all of the other links on my site. For example, I’m using the Orange skin, but I want all of the links within the pages & posts to be black & underlined instead of orange (so that all the text within the body of every post is black). However, when I add a:link {color: #000000; text-decoration: underline;} to my custom css it also changes the links within my menu to be underlined (which looks terrible) and changes the color of my post titles (which are also links on the frontpage) to black, which I don’t want (interestingly, it only changes the color of my post titles in IE but not in chrome….?) It also changes some other things like the slider buttons, the featured pages links etc.

    Is there an easy way in CSS to specify just the links within the body of a post / page? Sorry if this is a newbie question, but, well….I;m a newbie. Thanks!

    • Dave Bardell Post author

      For general questions where you can’t find a suitable snippet, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And important, please include a link to your Site.

      Try reading this Guide too.

      • phdsigns

        Hello Dave,

        Apologies Dave… The skins have been moved under /wp-content/themes/customizr/inc/assets/css, have they not?
        Is the process mentioned above to add a new skin still stands or does this post needs an update as well?

        Best Regards and Many Thanks for your Time,
        Philippe

  • Billie

    Is it possible to override the skin color for the site tagline? I successfully changed it from red to black in full screen view, but not in tablet or smartphone screen size. Help me? Thanks for all your support!

    • Nicolas

      Hi Billie,
      Add this CSS code in Appearance > customize > custom CSS :

      Cheers

      • Billie

        Thanks for quick response. But I got same results from that code: Site tagline is black in full monitor screen size, but it appears in the red skin color in tablet or smartphone size: http://kathleencollinscounseling.com/ If you have any other suggestions, let me know. Thanks again; it’s a great theme.

    • qpop

      Hi,

      Using the new method 2 (as my child theme was broken by the latest update), a couple of the original red theme colours creep through.

      If you check out the site (www.hacfp.co.uk) you can see that the unhighlighted “Home” on the menu-bar is still red, and the pips next to the “Recent news” on the right sidebar are red too.

      In addition to this, on posts pages the HTML tag information is also red.

      Any ideas how to change this?

  • Pjotr

    Through upgrading to version 3.1.10 all of my changes according to this snippet in the child theme are lost. And NO mentioning of any changes in the readme.txt!

    • Nicolas

      Hi Pjotr,
      Can you please be more specific about what is lost?
      All settings and customizations in a child theme are never lost on update. Then can sometimes be impacted by a new version but they are still there.
      Thanks

      • Pjotr

        Sorry for not being specific, Nicolas! After upgrading to version 3.1.11 (not .10) the changes I made in inc/css/green.css in my child theme were lost and the colors of the main theme were shown again. The child theme has been configured as written in the recipe of this snippet.

        Downgrading to version .10 was solving the problem for the moment.

        • Rocco Aliberti

          This is ’cause now(in 3.1.11) by default the minified version of the skin is loaded. And THIS IS mentioned in the readme.txt

          ####################### Changelog ######################
          = 3.1.11 =
          * added : (php , css) customizer : new option in the Skin Settings, enable/disable the minified version of skin
          * added : (php) customizer : new option in the Responsive Settings, enable/disable the automatic centering of slides
          * added : (js, php) automatic centering of the slider’s slides on any devices. Thanks to Rocco.
          * improved : (css) skins have been minified to speed up load time (~ saved 80Ko)
          […]

          Look here to know what to do:
          http://wordpress.org/support/topic/update-has-broken-child-theme-color-scheme?replies=7

          Hope this helps.

          • Pjotr

            Thank you for the link, Rocco. After unchecking the use of the minified CSS stylesheets it worked again.

            In the Changelog I was just looking for “(color).css” … but now I know that any change to css / skins should be seen as an alert.

            • Marshall Hunt

              I noticed that you can just find and replace the primary color hex codes in the .min.css document and that should fix the problem as well. A little bit nicer because then you still get the benefits of that speedier page load.

  • Alasdair Walker

    I missed this step: “Now copy the 3 subdirectories (fonts, img and rtl) from /wp-content/themes/customizr/inc/css to /wp-content/themes/customizr-child/inc/css/” and so broke the social icons code.

    I posted in the support forum and the following find+replace was suggested in red.css:

    find:
    “url(‘fonts/fonts”

    replace:
    “url(‘../../../customizr/inc/css/fonts/fonts/”

    This has the added advantage of meaning that if the icon tables are updated they don’t need re-copying.

  • Dan

    Hi,

    Complete newbie when it comes to css, I’ve managed to create a child theme but can’t find

    – customizr/inc/css –

    This means nothing to me unfortunately, can you please point me in the right direction so I can try and get the skin colour to match my logo?

    Thanks in advance

    • Dave Bardell Post author

      Hi Dan, the full path you’re looking for is based on your WP install:
      /wp-content/themes/customizr/inc/css

      I’ve updated the Snippet so thanks for your comment.

      Sorry to take so long to respond.

  • Steven

    This is exactly what I was looking for. Thank you for making a clear, concise tutorial on how to change the theme colors.

  • Kelsey

    hmmmm… maybe i am looking in the wrong place, but I’m stuck on step one. When I go to the appearance–> editor and click on the only .css that is in there, it says “*The styleheets of Customizr are located in inc/css”. Where can I find the inc.css files to get the red.css and the 3 subfolders? I tried to do a work-around and copied the browser’s “view source” red.css, pasted it into a new style sheet, saved it in the child-theme root folder, and re-uploaded the child theme. but that didn’t work.

    • Dave Bardell Post author

      Kelsey,
      I’d avoid using the Appearance>Editor if I were you. There’s much better ways of working. Not sure if you’re working with Mac/Windows? Are you using FTP to move files up to your host?
      Locally (or remotely) you will have a set of folders that look something like:
      -wp-admin
      -wp-content
      -wp-includes
      and most of what we use is found in wp-content.

      The path to customizr is wp-content/themes/customizr and the files you’re looking for are below that path.

      If you need any more help, I suggest you look through the documentation, and then post any problems to the Forum

      Good Luck!

  • mo lohaus

    Thanks for the detailed instructions.
    If you additionally wanted to set the background of the custom skin (of the header, footer, slider, wrapper, navbar) to a different color (black or dark gray), how would you do that? I have pasted in your code snippet for setting site background color, and various other snippets, but elements (navbar, slider) continue to be light. Thanks for being such a great resource.

  • Jeff Ross

    Hi- I’m understanding the procedure except that I want to change the purple.css. I’m not understanding what hex value to search for in the .css to find and replace. I have a new value ready to replace, but how do I know what purple’s primary value is to begin with?

    Thank you

    • Jeff Ross

      In other words, in the original unaltered purple.css, is there a cheat sheet of the 12 hex values used so they are easily found so they can be replaced?
      I’m having some success, but still trying to get the title/tagline/menu text to change as well as the solid bar above the site title. The original “purple” value may be a shade of purple, but reads more as a pink. Thank you!

      • Dave Bardell Post author

        I had to do some donkey work to get to the red.css cheat sheet. So you have two possibilities:

        1) Use red.css as the base for change. Change the codes you find above to the new purple ones. Leave it named red.css, but it will display the new purple. That was how I intended the Snippet to be used.

        2) Donkey work, analysing purple.css. But I don’t see the need to do that just for the sake of a title?

        Good Luck, and let me know if you cracked it.

        • Jeff Ross

          I did- thanks for the tip! Altering red.css and renaming it IS much easier than “donkey” work!

  • cc5

    Hi!
    When I install child theme, I can not see “customizr-child/inc/css”, I only see a “customizr-child”. What to do? Create inc, and css folders?

  • Matt

    I’m confused. I’m not seeing “three subdirectories” in my customizr/css directory. The only subdirectory in there is “fonts”. “Img” is at the “inc/img” level. And there is no directory called “rtl.” Am I missing something?

  • Teri

    Thanks for sharing this! I tried doing this in our site but when I change even just a single color, it has an effect on the social icons where they just turn into blocks (meaning the target image is not being recognized). It affects the “fs1 icon-bubble” too. Is there a way to prevent this?

  • Kevin Brown

    I just can’t get it to recognize my changes. I am very familiar with coding and web development. However, I can’t get my child themes style to show. The other thing is, even if I use the custom css panel the changes I paste in to it will affect the website but it doesn’t stay that way. It reverts back to the default style. Thoughts?

    • Dave Bardell Post author

      Hi Kevin. Have heard similar issues in the Forum but I don’t believe the root cause has ever been Customizer.

      I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.

  • Harald

    Thank you very much for this feature I will test it now. 🙂

    Can anyone please help me to find the line of code for the background of the whole site.
    I located the side menu background and the drop-down menu background, but I can’t
    find the overall background color. (is it in hex or rgb)?

  • Hugh

    With this procedure are you suggesting that creating a folder in a child theme

    and replacing “red.css” would not work?

      • Dave Bardell Post author

        Hugh, I’ve updated the Snippet. In Step 1, I’d missed copying the 3 folders to the Child Theme so the Social Icons were corrupted. The solution is now fully compatible with a Child Theme.

        Thanks again.

  • Nadine Sabulsky

    Exactly what I was looking for! Thanks, and I think this simple workaround is easier for a non-codewriter such as myself, so please keep it around! Yay!

Comments are closed.