Resources

Accelerate Color Palette

by Creator 7

If you have our Accelerate theme installed you have access to a centralized Theme Color Palette that you can use to modify the colors across your entire site with a few simple choices. The palette offers choices for Base color in dark, medium and light. It also has dark and light accent color choices. These colors are used throughout the theme by way of cascading setting in the Customizer. You choose a palette color and a number of other settings will use it as their “fallback”. A setting uses a fallback color as it’s default when one is not set. This system gives you the choice between simple or complex control over every aspect of the theme.

The color palette is also used by all AMP Publisher Blocks. Each color assigned in one of our blocks has the option to link that color to one of the color palette settings. This allows you to change your site’s colors while not having to go through every page and change the block colors to match. The value of this feature cannot be overstated, as even a minor change in color can require hours of tedious work when using traditional “blocks”.

Tutorial

  • Open the WP Customizer. It can be found under the Appearance section of the WP Admin side menu.
  • Open the Colors panel in the customizer.
    • We put the Theme Color Palette into the standard WP Colors panel as it is the basis for all other settings.
    • We also put the base font colors and option in this panel, you will notice that they each have a fallback to one of the color palette settings.
    • All other theme color settings are found in the AMP Publisher Accelerate Theme panel across the many theme options available in sub-panels. Most of those color settings have a fallback to either a color palette setting or to another color setting in the theme. For example, most font color settings fallback to the Site Font Color, which falls back to the color palette’s Base Color – Dark setting.
  • You have two types of color applications: base and accent.
    • The base colors are used in most aspects of the theme like the header, footer… etc. The accent colors are used for some theme based options such as buttons and borders.
    • Dark, medium and light settings are used to give a basic level of control over choosing palette colors that will still be readable (dark text against light baackground)… but this is entirely dependent on your color choices.
    • If you choose palette colors that do not work for some settings but look good in most, you have the option of changing those color settings independently.
  • While changing the color palette settings you will see a live preview of those changes in the Customizer Preview window.

Comments are closed.