How to Change Your Colors

Period Pro allows you to change the colors of your site. To change the color of an element on your site:

  1. Visit the Customizer (Appearance → Customize)
  2. Click on the Colors section
  3. Select the section you would like to edit
  4. Locate the element you want to edit, and click on the color picker
  5. Use the color picker to select a color
  6. When you're happy with your colors, click the Save & Publish button to save your changes

The colors on your site have now been updated

Using the Color Picker

The color picker has a lot of functionality built into its interface. Let's go over the various tools in the color picker now:

Default Colors

The color picker includes a few default colors at the bottom:

Click on one to select it as your new color. This can be helpful to use as a starting point for your custom color

Color region

You can use the color region to adjust the hue and brightness of your color. Moving the selector left and right will adjust the hue, and moving it up and down will change the brightness.

To move the selector, you can click and drag it, or you can click on it and use the arrow keys on your keyboard to fine-tune its position

Saturation Slider

On the right-side of the color picker is the saturation slider. Click and drag the slider up to increase the saturation of the color, and drag down to reduce the saturation.

Hexadecimal color code input

A hexadecimal color code is the fancy term for color codes like this: #43b3c4. That's the blue we use at Compete Themes. This is white: #ffffff and this is black: #000000

You don't need to use this option at all if you don't want to. However, it is extremely useful if you have a color somewhere else online and you want to use the exact same color.

Just enter in the color code you want to use, and the color will automatically update.

Additional Resources

  • Period WordPress Theme

    Download a copy of the latest version of Period.

  • Support forum

    Ask questions and find existing solutions in the support forum.

  • Changelog

    Review recent and past updates to Period.

  • Period on Github

    Review Period's commit history and project files on Github.

  • WordPress Resources

    Check our recommended resources to find great plugins and solutions for your site.

  • Codeable.io

    We can help you with minor changes on your site, but if you need a highly customized version of Period, we recommend finding help through Codeable.