Creating a Custom Theme

Last Updated: Mar 14, 2014 05:36PM PDT

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.

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

Create a New Theme

  1. In Edit View, select the Show Visitor View » Customize link in the Top Menu of the Main Area.
Customize Visitor View from Edit View

If you are already in the Visitor View, move your mouse over the My Zenfolio View Switcher at the top of the visitor page. A menu will open with a list of items. Click to select Customize Visitor View.

My Zenfolio View Switcher

In the Theme Designer:

 
  1. Select Theme.
  2. In the new window that appears, click Create New Theme.
  3. Select a color palette to begin.
  4. Click OK.
Create Custom Theme Start
 

Configure a New Color Palette

After creating the new Custom Theme, you can change the color palette used in the theme. 

While in the Theme Designer, you can choose a different palette by using the Color Scheme Designer. 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. Select the Primary Color using the color wheel.
  2. Adjust the brightness and saturation.
  3. Select the Generated Scheme of colors that work best in conjunction with the primary color.
Change Color Palette

Note: You may also manually select the colors for the color palette of your site.
 

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.

Theme Designer Tabs


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 Toolbox » Selected Element click the down pointing arrow to access the drop-down menu. Select the Element that you would like to edit. The element settings will load beneath.
  2. Make desired changes to the settings of the element.
  3. Your changes will be reflected in the preview window to the right. Repeat 1 and 3 until satisfied.
  4. Click the Undo Last link in the top, right corner of the screen as needed.
  5. Once you are satisfied with the Style click the Save link near the top of the screen.
  6. Click Done to exit the Theme Designer
Edit Element in Style Tab

Note: Alternatively you can click on the Elements in the preview window to access their settings. An orange box will appear around any customizable element.

​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 their settings from the Styles tab.

 
  1. Click the tab at the top of the page of the page type you wish to configure.
  2. Under Toolbox » Selected Element click the down pointing arrow to access the drop-down menu. Select the Element that you would like to edit. The element settings will load beneath.
  3. Use the drop down menus provided (if applicable) to select desired settings.
  4. Your changes will be reflected in the preview window to the right. Repeat 2 and 3 until satisfied.
  5. Click the Undo Last link in the top, right corner of the screen as needed.
  6. Once you are satisfied with your changes, click the Save.
  7. Click Done to exit the Theme Designer
Galleries Tab Edit Element

Note: Alternatively you can click on Elements in the Preview window to access element settings. An orange box will appear around any customizable element.

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.

Theme Designer Toolbar