How to Customize The Color Scheme and Font

by Matt Giovanisci | Last Updated: November 15, 2019
Color Scheme

Carbonate comes with a default color scheme. It’s the exact color scheme you see on this site because this site uses the Carbonate theme. So meta.

I made it really easy to change the colors of this theme in the style.css file. All you have to do is open the theme editor in WordPress to see this screen:

I used color variables in CSS to design this theme. I set up a default list of the standard colors of the rainbow. All you have to do is change the hex code on the color of your choice.

For example, if you want all the black colors on this site to be pure black, you would change the black variable to this:

–black: #000000;

I tried to make this easy.

If you want to customize this theme further, just add a black class to any HTML code.

For instance, if you want certain text to be orange, you could do this:

<p class=”orange”>This is gonna be orange colored text</p>

To use these base colors to customize more CSS code, you would use the var class in css.

For example, if you wanted all your input fields on your site to have a pink background with white text, you could add this class to the style.css file:

input{background-color: var(–pink); color: var(–white);}

You’ll need to have a base understanding of CSS and HTML to use this theme. Remember, there’s no support offered to customize this theme so code at your own risk!

How to Change the Default Font

The default font that ships with Carbonate is Open Sans. This is a websafe font. And I suggest sticking with a websafe font so I don’t have to load any outside scripts, including Google Fonts.

For a list of websafe fonts, go here.

To change the default font, go to the main stylesheet in the theme editor in WordPress and navigate to the BODY class. You’ll see that the font is set to “open sans.” You can change this to any websafe font you want, like Arial or Times New Roman.

If you want to change the H1, H2, H3 to all be different, just add the font-family attribute to the appropriate heading. For example:

h1, .h1{font-size 3.5rem; font-family: Arial;}