Custom color scheme – add yours in Customizr

Customizr is a beautiful, most versatile and powerful free WordPress theme that allows setting up a web site in no time. A rich options panel provides thorough customizations for every section of your site. And yet… everyone wishes his site to be unique and never to be mistaken for another.

One step closer to full customization is having a unique color scheme matching (or based on) the logo.

How to add a custom color scheme to the Customizr predefined palette

There are several tutorials on the Internet on how to do that, but all of them achieve the goal by altering an existing Customizr color scheme (or skin).

I’ll show you how to do it properly, by adding your own custom color scheme to the exiting ones. I already did it for one of my clients, adding a purple3 skin to the list of Customizr skins.

 


Here are the steps to follow:


 

Step 1. – Create a child theme (if you do not have one already)

Quick tutorial:

In the wp-content/themes folder of your site, create a new folder, with a name of your choice. For this tutorial, let’s assume it will be called customizr-child.

With notepad, notepad++ or the text processor of your choice, create a file and save it as plain text, under the name of style.css and having the following content:

/*
Theme Name: Customizr Child
Theme URI: [... your url ...]
Description: A child theme for the Customizr WordPress theme.
Author: [... your name ...]
Author URI: [... your url ...]
Template: customizr
Version: 1.0
*/
/* Enter your custom css below the line
-------------------------------------------------------------- */

The same way, create a file called functions.php and save it as plain text. Its content should be:

<?php
/**
* Enter your custom functions below this comment
*/

You may add a 880x660px picture, called screenshot.png or screenshot.jpg.

Do not forget to activate the child theme in the Appearance/ Themes panel, otherwise the customizations will not be visible 🙂

Step 2. – Create the necessary structure in the child theme folder

Keeping in mind that the child theme must reflect the parent theme directories structure, let us create in the wp-content/themes/customizr-child folder the following subdirectories: inc/assets/css.

The Customizr child theme directory structure for custom color scheme

The child theme directory structure

Step 3. – Add the necessary files in the child theme.

As a reminder, all the files in the child theme bearing the same name as files in the parent theme replace the latter. With two exceptions, though: the style.css and the functions.php files, whose content is added to the content of their homonyms in the parent theme.

So let us copy the following files from the parent theme and paste them in the child theme, where we shall modify them to suit our needs:
wp-content/themes/customizr/inc/class-fire-init.php -> wp-content/themes/customizr-child/inc/class-fire-init.php
wp-content/themes/customizr/inc/assets/css/purple2.css -> wp-content/themes/customizr-child/inc/assets/css/purple2.css
wp-content/themes/customizr/inc/assets/css/purple2.min.css -> wp-content/themes/customizr-child/inc/assets/css/purple2.min.css

And now we shall no more touch to the parent theme files, all the subsequent actions will be done uniquely in the child theme.

Step 4. – Add the skin name and colors to the options panel array

In the child theme, edit the file class-fire-init.php as follows:

//Default skins array

Locate the line that reads “//Default skins array” (it should be the line 82 or about so). In the array below that, insert a line corresponding to the custom color you want to add.

In my example, I added a skin called “purple3”:
'purple3.css' => __( 'Dark purple' , 'customizr' ),

Customizr - Insert custom color scheme name in default skins array

Default skins array

//Main skin color array : array( link color, link hover color )

Locate the line that reads “//Main skin color array : array( link color, link hover color )” right below this (it should be the line 104 or about so). In the array below, insert a line for your custom color scheme. Note the description of the array: the first color is the link color, the second one is for the link hover. In my example, it looks like this:

'purple3.css' => array( '#4d006c', '#0E0010' ),

Customizr - Inserting custom color scheme in the main skin color array

Main skin color array

Save the class-fire-init.php file, we are done here.

If now you go to the administration console of your WordPress site, on the Appearance/Customize/Global Settings/Skin you will see your custom skin included in the available skins panel – but it is NOT effective yet.

The custom color schemes listed in the Customizr skin panel

The custom color schemes listed in the Customizr skin panel

So, let’s pass to the last step:

Step 5. – Define the custom color scheme.

In step 3 we copied the inc/assets/css/purple2.css and purple2.min.css files from the parent theme to the child theme (it may be any of the skin files, I chose purple2 at random). Now we’ll customize and rename them, so that the original Customizr color schemes remain unaltered.

We have to create both a normal and a minified css skins to ensure proper styling in every situation, because Customizr allows us to select either version in the options panel.

First we identify the colors of the original skin file and put them down on a list. For every one of them, we note the corresponding color in our custom color scheme. When the list is ready, perform a Search & Replace ALL for every colors pair, in the purple2.css and in the purple2.min.css as well.

When finished, save both files and rename them to match the custom skin name you entered in Step 4. In my example, I renamed purple2.css to purple3.css and purple2.min.css to purple3.min.css.

That is all.

Now you have the original Customizr color schemes and your custom skin as well.

Note: the article that put me on the right track was this one.

13 Comments

  1. Pingback: Changing the number of featured pages in CustomizrCI Media

  2. Avatar
    Nadjib BENKHELLAT
    06 May 2015 at 8:25 AM · Reply

    Great work.,. Keep IT up!

  3. Avatar
    16 Oct 2016 at 2:06 PM · Reply

    Apрreciate this рost. Let me try it oᥙt.

  4. Avatar
    25 Oct 2016 at 9:10 AM · Reply

    In Customizr 3.4 and there is no file wp-content/themes/customizr/inc/class-fire-init.php, the code you mention is now in wp-content/themes/customizr/inc/czr-init.php. So I made the additions in this file. But the new Skin isn’t visible in the list. Has something else changed?

    • Manuela Kherouf
      25 Oct 2016 at 12:35 PM · Reply

      Hey Tom, it’s been a while since I last checked the Customizr theme updates, so I am not aware of the latest changes. I’ll have a look at them and post an answer to your question later today.

      Later Edit:
      There definitely were deep changes in the Customizr theme. Applying the steps in this article to the child theme does NOT add your custom palette, but applying them on the appropriate files in the parent theme does. Given time (which I don’t have right now), one could manage to locate and fix the glitch, but that is not the point. The real problem is that even if a solution were found, it were not a reliable one. The theme author admitted himself that this is not a standard theme, and its evolution over time showed unpredictable changes. No one can tell what’s next, and whether a customization implemented by a user at version [n.1] will still work at version [n.2].

      That leaves the user with 3 choices: use the free Customizr theme as-is, buy the Pro version with the associated plugins allowing some more customization or move one to another WP theme.

      • Avatar
        12 Mar 2017 at 3:36 PM · Reply

        Hi, I added a new css-file to czr-init.php with a color-setting, but hovering over links when being in Custmizer-mode doesn’t give me the colors entered in this new css-file.
        Anyone knows how I get this working?

  5. Avatar
    12 Mar 2017 at 3:08 PM · Reply

    Hi, I followed the instructions but unfortunately without success. Added a new css and put in class_fire_init.php, but that didn’t give me the new one. Then thought of using green2.css with different color-code-values but still the default green2.css shows up. I’m using Customizr 3.5.8.
    Any clues?

    • Manuela Kherouf
      12 Mar 2017 at 3:34 PM · Reply

      Hi Dick, please see my reply to Tom’s comment above – there were some profound changes in the Customizr theme, which made all my previous customizations ineffective. The first time this occurred I updated my posts to follow the previous theme update; this is the second time when theme changes break my customizations. From my point of view, trying to locate those changes and to adapt the customizations is not worth while, since there is no guarantee that they will remain functional at the next theme version.

      • Avatar
        15 Mar 2017 at 9:48 AM · Reply

        Manuela, Yep, I noted that a bit later. Trying to find another way to get a nicer green colour which matches the green in the logo of our figureskating club.

  6. Avatar
    Isabel
    07 Nov 2017 at 3:53 PM · Reply

    thx for the info

  7. Avatar
    Williams
    27 Nov 2017 at 4:24 PM · Reply

    Thanks for the info.

  8. Avatar
    Neta
    31 Jan 2018 at 12:15 AM · Reply

    Thanks for the info!

Leave a Comment

Sitemap

open