code snippets css Body

Create a new Skin color

by |Published

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.

a,
.btn-link,
.navbar-link:focus,
.navbar .nav > li > a:hover,
.navbar .nav li.dropdown.open.active > .dropdown-toggle,
.carousel-control:focus,
.widget h3:before,
.navbar-wrapper .navbar h2,
h2.site-description,
.navbar .nav > li.current-menu-item > a, 
.navbar .nav > li.current-menu-ancestor > a,
.archive .archive-header .format-icon:before,
.dropdown-menu > li.current-menu-ancestor > a,
.dropdown-submenu:focus > a,
.widget.widget_rss li:before,
.social-block a:hover,
.page-links button.btn,
#footer #calendar_wrap table a,
footer#footer .colophon a.back-to-top {
     color: #e10707;
}
.nav-list > .active > a:focus,
.nav-pills > .active > a:focus {
     background-color: #e10707;
}
a.thumbnail:focus {
     border-color: #e10707;
}
.tc-header {
     border-top-color: #e10707;
}
.nav .dropdown-toggle .caret,
.navbar .nav li.dropdown > a:focus .caret,
.navbar .nav li.dropdown.open.current-menu-ancestor > .dropdown-toggle 
.caret {
     border-top-color: #e10707;
     border-bottom-color: #e10707;
}
blockquote,
.dropdown-menu > li.current-menu-ancestor > a:after {
     border-left-color: #e10707
}
a:focus,
.btn-link:focus {
     color: #970505;
}
.navbar .btn-navbar[disabled],
#wp-calendar th {
     background-color: #970505;
}
.btn-primary[disabled] {
     background-color: #970505;
     *background-color: #7e0404;
}
.nav .dropdown-toggle:focus .caret {
     border-top-color: #970505;
     border-bottom-color: #970505;
}
.btn-primary.active {
     background-color: #650303 \9;
}
.navbar .btn-navbar[disabled] {
     background-color: #7e0404;
     *background-color: #650303;
}
h3.assistive-text {
     color: #f93c3c;
}
.uneditable-input:focus {
     border-color: #f93c3c;
     -webkit-box-shadow: 0 0 8px #f93c3c;
     -moz-box-shadow:     0 0 8px #f93c3c;
     box-shadow:         0 0 8px #f93c3c;
}
.dropdown-submenu:focus > a,
.dropdown-menu > .active > a:focus {
     background-color: #d70707;
     background-image: -webkit-gradient(linear, 0 0, 0 100%, 
from(#e10707), to(#c80606));
     background-image: -webkit-linear-gradient(top, #e10707, #c80606);
     background-image: -moz-linear-gradient(top, #e10707, #c80606);
     background-image: -o-linear-gradient(top, #e10707, #c80606);
     background-image: linear-gradient(to bottom, #e10707, #c80606);
     filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe10707' , 
endColorstr='#ffc80606' , GradientType=0)
}
.btn-primary {
     background-color: #c30606;
     background-image: -moz-linear-gradient(top, #e10707, #970505);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, 
from(#e10707), to(#970505));
     background-image: -webkit-linear-gradient(top, #e10707, #970505);
     background-image: -o-linear-gradient(top, #e10707, #970505);
     background-image: linear-gradient(to bottom, #e10707, #970505);
     filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe10707' , 
endColorstr='#ff970505' , GradientType=0);
     border-color: #970505 #970505 #4d0202;
     *background-color: #970505;
}
.btn-info {
     background-color: #f93737;
     background-image: -moz-linear-gradient(top, #fa5454, #f70a0a);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, 
from(#fa5454), to(#f70a0a));
     background-image: -webkit-linear-gradient(top, #fa5454, #f70a0a);
     background-image: -o-linear-gradient(top, #fa5454, #f70a0a);
     background-image: linear-gradient(to bottom, #fa5454, #f70a0a);
     filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffa5454' , 
endColorstr='#fff70a0a' , GradientType=0);
     border-color: #f70a0a #f70a0a #b00505;
     *background-color: #f70a0a;
}
.navbar .btn-navbar {
     background-color: #ab0505;
     background-image: -moz-linear-gradient(top, #c80606, #7e0404);
     background-image: -webkit-gradient(linear, 0 0, 0 100%, 
from(#c80606), to(#7e0404));
     background-image: -webkit-linear-gradient(top, #c80606, #7e0404);
     background-image: -o-linear-gradient(top, #c80606, #7e0404);
     background-image: linear-gradient(to bottom, #c80606, #7e0404);
     filter: 
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc80606' , 
endColorstr='#ff7e0404' , GradientType=0);
     border-color: #7e0404 #7e0404 #340202;
     *background-color: #7e0404;
}
.btn-info[disabled] {
     background-color: #f70a0a;
     *background-color: #e10707;
}
.btn-info.active {
     background-color: #c80606 \9;
}
.navbar .btn-navbar.active {
     background-color: #4d0202 \9;
}
a.carousel-control:hover {
     color: #e10707;
}
.widget.widget_archive li:before,
.widget.widget_categories li:before,
.widget.widget_calendar li:before,
.widget.widget_pages li:before,
.widget.widget_links li:before,
.widget.widget_meta li:before,
.widget.widget_recent_entries li:before,
.widget.widget_recent_comments li:before,
.widget.widget_nav_menu li:before,
.widget.widget_rss li:before {
     color: #e10707;
}

AUTHOR

Dave Bardell
My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme in July 2013. Have learnt a lot from other Supporters (@ElectricFeet, @acub, @tomaja, and the maestro @d4z_c0nf, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com

You may also like

69 thoughts on “Create a new Skin color”

Comments are closed.

By continuing to use this site you consent to the use of cookies in accordance with our cookie policy.