Why create my own?
BluePrint-Q comes with some wonderful, pre-packaged Tones. These Tones control shadow, color, spacing, font, etc. Upon initial release, BluePrint-Q supported well over 5,000 different combinations – that number is significantly higher now.
That said, you may still want to alter something – maybe it’s the thickness of a border or the size of a font. Maybe it’s something little to change or maybe it’s a whole new color scheme to match your brand palette. This tutorial covers both processes.
Adding small changes
You may find a Tone combination that is really close to what you want for your website.
You should already be using a child theme (BluePrint-Q should be the parent).
It is recommended that you simply add to your child theme’s style.css file to overwrite the styles that BluePrint-Q is defining through it’s Tones system.
Creating a new Tone
Maybe there is absolutely no Color Tone that you want to use for your site. That’s fine – BluePrint-Q gives you a way to hook your own into the system.
First, you will be responsible for creating your own CSS. You might want to make this from scratch. Although, it is recommended that you take one of the existing Tones from the bpq/tones folder to help ensure that you are targeting a more comprehensive list of elements.
Once you have your CSS file prepared, you are going to add two pieces of code to your child theme’s functions.php file.
First is a hook – in this case, we are overriding a Color Tone:
add_filter( 'filter_bpq_tone_color_list', 'name_of_your_callback_function' );
You can also change flairs and typography using these two filters:
And then the implementation of a callback function that will add your custom CSS to the list of Tones found through the Customizer:
* Adds custom color tones to the listing.
* @param type $list The list provided by BPQ.
function name_of_your_callback_function( $list )
$list['your_child_theme/your_location_of_the_css_file'] = __( 'Name of your new Tone', 'your_localization_namespace' );
Voila! Now your new Tone will appear in the usual Customizer location and you can select it for preview or for live site use.