How to create your very own Color Scheme for Custom Community 2

No Comments
  1. Preparation
  2. Export your settings
  3. Create the scheme file
  4. Generate the stylesheet file
  5. Combining everything

Step #1: Preparation

Play around with the Theme Customizer (Design > Customize) till your site preview looks just like you want it.
Note: Color Schemes do support almost every setting available in the Theme Customizer, EXCEPT images.

Think up a name for your Color Scheme, note it down in an empty file for future easy access, as well as the future scheme slug - consisting only of lowercase alphanumeric characters, underscores, minus sign, neither with spaces nor special characters like umlauts and similar stuff. Basically what a call of sanitize_key would return.

For this tutorial, we assume the name "Hello World" as Color Scheme name and thus its slug would be "hello_world".

Step #2: Export your settings

Head over to "CC Settings" and then switch to the "Backup & Reset Settings" tab.
Select "PHP code" as export format, check "Customizer Settings" and hit "Start Export".


This will export your prepared Theme Settings as regular PHP code (array), which is going to be the base of the default settings for your Color Scheme.
Create an empty file with the following namimg scheme: (scheme_slug).settings.php - in our example, this would be hello_world.settings.php

And copy + paste the above created export data (ie. the PHP array) into it. Do not forget to add the PHP opening and ending tag. The latter one is optional, thou. Save it into the default EXTERNAL Color Scheme directory, ie. (your_uploads_directory)/cc2/schemes/ (usually wp-content/uploads/cc2/schemes).

To adjust it further, compare your scheme settings file and the default Color Scheme settings file (default.settings.php) and remove non-required settings in the first one.

Example: (gist)

Step #3: Create the scheme file

Use the default Color Scheme file (default.json.scheme) as a template, adjust its settings accordingly and save it as (your_scheme_slug).scheme.json. In our case, that would be hello_world.scheme.json.

Example content of our Color Scheme:

	'title':'Hello World',
	'file': 'style.less',
	'output_file': 'hello_world.css',
	'output_dir': '%cc2_schemes%',
	'scheme': {
		'_font_family':"\"Century Gothic\", \"Avant Garde\", Arial, sans-serif",
	'settings_file': 'hello_world.settings.json'

Scheme variables explained:

Variable key Description Status
slug the Color Scheme slug required
title the official title of our Color Scheme required
file the base LESS file which is being used with the Premium plugin to generate a custom stylesheet file; if you don't want to fine-tune stuff, you might want to leave at its default value (ie. style.less) required
scheme Contains the required 4 variables for the LESS generation (the underscore prefix indicates an internal variable). These are contained inside your default settings as well, but should be stored here instead. The variables are as follows:
Internal scheme name Settings / theme_mod name
_font_color font_color
_link_color link_color
_hover_color link_hover_color
_font_family font_family
output_dir the future name of the generated stylesheet file; also is being used as fallback for the LESS file if the plugin is not active; if none is given, the theme is assuming the file name as (scheme_slug).css optional
output_dir directory where the generated stylesheet as well as the fallback stylesheet file is being stored; %cc2_schemes% is a placeholder and refers to: (your_uploads_directory)/cc2/schemes/

If left out, the theme is automatically using the default external output directory.

Step #4: Generate the stylesheet file

Head over to the CC Premium settings section and click on the button "Regenerate (output_file) manually" (eg. "Regenerate style.css manually"). As the name says, it will regenerate the stylesheet of the current Color Scheme. In our case, that is going to be the base stylesheet for the static mode and also fallback if the plugin is not activated or around.

Open the details with a click on "detailed information", note down the stylesheet path and copy THAT file as (your_scheme_slug).css into the default EXTERNAL scheme directory.


Last step: Combine it all

To quote The Excrementory Grindfuckers: "Please combine each part with another... part"

Add and adjust all above described variables, and then give it a test run by opening the Theme Customizer. Now, your new Color Scheme should appear and be selectable.


Notes on storage: Of corpse, you may save your Color Scheme inside the default Color Scheme directory ((your_themes_directory)/cc2/schemes/) as well, but beware: During a theme update, it might get overwritten or deleted.