Controlling the Colors and Fonts used in your Site using Custom Themes

Themes control the visual elements of your site.  Through the theme, you can control elements such as the colors used on the page, the page's background image, the colors used in the header and footer, the opacity of various elements on the page, the fonts, font sizes and font colors of text displayed on the page.

A selection of pre-made themes are provided but you can create your own custom themes for use on your site.

This video covers how to create a new custom theme and how to edit elements in the custom theme.


Please see also, how to apply additional fonts to a custom theme and how to change the background image.

Create a New Custom Theme or Edit an Existing Custom Theme

Log in to your account and go to Customize Website View by hovering your mouse pointer over Website, then click on Customize Website.

The page will refresh with a new customization menu at the top, confirming that you are in the Customize Website View.

1. Go to Themes.
2. EDIT EXISTING THEME: Click Edit on the custom theme that needs to be edited. The Theme Designer will load. Please note that pre-made Zenfolio themes are not editable.  For these themes, the Edit button is not displayed and you will need to create a new theme.
   CREATE NEW THEME: Click More, then Create New, to create a brand new Custom Theme.

This will open the custom theme in the Theme Designer for customizing.

 

Configure a New Color Palette

While in the Theme Designer, you can choose a different color palette by using the Color Scheme Designer. This is the fastest way to create an overall color scheme for the custom theme.

Once you have chosen a primary color to begin with as a background, other colors most pleasing together will be selected for your text, header and footer, accent and frames, as well as links and buttons. Different schemes will generate a different grouping of colors, based on color theory.

1. Go to the Style tab.
2. Click the Color Palette from the panel on the left-hand side.
3. Select the Primary Color using the color wheel.
4. Adjust the brightness and saturation.
5. Select the Generated Scheme of colors that work best in conjunction with the primary color.
6. You can also manually specify the colors used in the custom theme's color palette.

Theme Designer Tabs

In the Theme Designer, you will find five tabs that can help you more easily find the element that you would like to edit.

Click on the tab which contains the element that you would like to edit.

For elements that are displayed across multiple types of pages, such as the header and footer, these elements can be edited in the Style tab.

Configure Common Style Elements

There are many elements which can be found on every page of your website. By configuring these elements, you create the overall appearance of your theme.

The elements in the Styles tab allows you to select and edit these common elements that are displayed on various pages on your site.

In the Style tab you can change the standard font, add a background image, and apply a mat. By editing more elements such as Page Text and Large Photo, you can change more details like size, shadowing, opacity, spacing, borders and more.  These changes that you make are reflected on all pages that display the affected element.

1. Under the Toolbox, use the Selected Element drop down menu to select the element you would like to edit. The element settings will load beneath. This example uses the Page Background element.
2. Click on the element in the Toolbox to edit the element.
3. Make desired changes to the settings of the element. In this example, the background color is changed to green.
4. Your changes will be reflected in the preview window to the right. Repeat 1 and 3 until satisfied.
5. Once you are satisfied with the new style, click the Save link near the top of the screen.
6. Alternatively, you can click Undo Last to undo the changes.
7. Click Done to exit the Theme Designer.

Alternatively you can click on the Elements in the preview window to access their settings. A yellow and black outline will appear around any customizable element.

After selecting the element, the available editing tools will load in the Toolbox.

​

Configure Individual Elements

Many elements are specific to a particular page type. The four types of pages that require individual customization are Homepage, Galleries, Blog, and E-mails. Any elements on these page types that are not directly customizable inherit the settings from the Styles tab.

1. Select the tab you want to edit a specific element on.
2. Under the Toolbox, use the Selected Element drop down menu to select the element you would like to edit. The element settings will load beneath. In this example, we will edit the background color of the Button element.
3. Click on the element in the Toolbox to edit the element.
4. Make desired changes to the settings of the element. In this example, the button background color is changed to green.
5. Your changes will be reflected in the preview window to the right. Repeat 1 and 3 until satisfied.
6. Once you are satisfied with the new style, click the Save link near the top of the screen.
7. Click Done to exit the Theme Designer.

Alternatively you can click on the Elements in the preview window to access their settings. A yellow and black outline will appear around any customizable element.

After selecting the element, the available editing tools will load in the Toolbox.

Saving a Theme

When working on a theme, you should periodically save changes so you will not lose updates. While SAVE will overwrite the latest saved version of your theme, SAVE AS... will allow you to save your changed under a new title. When you are finished click DONE to exit out of Theme Designer. This will also end your option to UNDO LAST.