Use custom colors with a free theme

Each eCatholic free theme includes a variety of pre-defined color palettes. However, if you're using one of the free themes referenced below, you can easily select custom color values without touching any CSS code!

Here's how to use custom colors on your website.

1

Log in and go to the Design Studio

Log in to your website and click Design in the white Admin Toolbar.

NOTE: Only Admins have access to the Design Studio.
2

Select a theme that supports custom colors

Once the Design Studio opens:

  1. Click the Explore Themes button in the bottom Design Toolbar to select a theme that supports custom colors (complete list below).
    • If you are already using a theme that supports custom colors, move on to Step 3.


Themes that support custom colors

NOTE: The custom colors feature is currently available to be used with the following free themes in the Design Studio: Vita, San Juan, Cyprus, Damascus, Lucca, Sinai, Tabor, Cascia, Turin, Verona, Loyola, Lourdes, Santiago, Krakow, Sebastian, Milan, Bethany, Padua, and Guadalupe.

  • After you've selected a theme from the list above, click the green
  • Save
  • button at the bottom of the Select a Theme dialog.
3

Click the Custom Colors button to customize the theme's color palette

You will now see the Custom Colors button in the Design Toolbar (pictured below). Click it to open the Custom Colors dialog.

The Custom Colors dialog will display one or more colors that can be customized for the theme and color scheme that you've already chosen. To begin customizing colors:

  1. Click the color swatch to open the color picker.
  2. Use the color picker tools to select a color (see explanation of color picker tools).
  3. Or, type/paste a hexadecimal color value (e.g., #c43838) into the input box to use a specific color (optional).

NOTE: The color picker will only show shades that are supported for that color in the theme (to avoid illegible text, icons, and other potential design issues). For this reason, you may not be able to pick from a full range of colors.

If more than one color is available to be customized for the chosen color scheme, repeat the process for the additional color(s). Once finished, click Save.

4

Preview your custom colors, then Publish or adjust your new theme

You will then return to the Design Studio, which will render a preview of your site with the custom color values you just defined. Use the Design Studio's preview tools to click through your site's pages and view your site on screens of different sizes.

  • If you like your custom color selections - Click the green Publish button at the bottom right corner of the Design Studio if you would like any new Design Studio settings (Theme, Custom Colors, and Homepage Layout) to be live on the web for your visitors to see.
  • If you would like to adjust your selected custom colors - Click the Custom Colors button to select different colors.

Using the color picker

The color picker includes a variety of tools you can use to select the custom colors you'd like to use on your website.

  1. Color Pin - Drag up, down, left, or right to select the desired shade of color.
  2. Color Slider - Drag up or down to select the desired color.
  3. Star/Favorite Button - Click to add/remove a selected color from the Saved Colors/Favorites menu beneath the color picker.
  4. Revert Button - Revert the color picker to the last color selected (denoted by the background color of the Revert button itself).

  5. Reset Colors Button - Click the red "Reset Colors to Color Scheme Default" button to reset the color picker(s) to their original color scheme values.

    NOTE: Colors marked with an X in the Saved Colors/Favorites menu are out of bounds for that particular color scheme and cannot be used.

Still need help? Contact Us Contact Us