Overview
In Zoomforth, a theme defines the styles of the logos, colors, fonts, spacing, and more that appear on your site. Themes allow your company to maintain a cohesive brand aesthetic across all of your sites.
A theme is like an outfit you put into the site, and though it doesn't change the structure and layout, it highly impacts the branding and aesthetics of the site.
In Zoomforth, a theme defines the styles of the logos, colors, fonts, spacing, and more that appear on your site. Themes allow your company to maintain a cohesive brand aesthetic across all of your sites.
Zoomforth provides a number of professionally designed themes with each account that can be applied to your sites. Designers have the ability to modify or create their own custom themes through our theme builder.
One theme can be applied to many sites. When a theme is updated it will immediately change the appearance of all the sites associated with it.
Themes are created using CSS stylesheets. To create and modify a theme you will need to understand CSS. You do not need to know CSS to change which theme is applied to which site.
Navigating to themes
Here are two ways for you to navigate to your themes.
From the Site Editor
You can access the theme for a site without going into the Themes dashboard, thus eliminating the need to navigate further or to make a search! The theme associated with a site can be conveniently accessed right within the site editor.
In your site editor, click on the Styling button above the Navigation section in the left panel.
The theme associated with the site will shortly load in the Theme section of the Styling panel. Click it once it's loaded and the panel will expand a bit more.
Click Edit next to theme as you hover the pointer over it, in the Themes Selector.
You can also search for other themes that you may want to edit or check from the Themes Selector from this menu.
From the themes dashboard
Go to the Themes dashboard.
Search for the theme that you want to access.
Click Edit beside the theme.
Understanding the Theme Editor
The theme editor is broken up into different sections giving you varying levels of control.
Section 1: Variable Input Fields
Most aspects of your theme can be changed here, including the fonts that can be used in sites in the Font Selector
Each field lets you change common elements in the sites using CSS
If your CSS is not entered correctly, you will encounter errors
Section 2: Theme users
This area contains all the places your theme is currently being used
If you change your theme, all of these sites will be affected
Section 3: Custom CSS
This area allows users to write custom CSS
Use this sparingly and only if there are no appropriate fields in Area 1
Updating Styles from Input Fields
For the most part, there are input fields for the common elements in themes, making adjusting fonts and sizes quick. These fields can be used to make easy adjustments and will be validated as you update them, ensuring that your CSS will work properly. A common workflow is:
Make changes to the values in your fields.
Wait for a second and check the box in the top left of the theme editor window.
If there are errors, you will see a red box with the number of errors in your theme. Clicking this box will show where the errors are after all of the styles have been compiled into a stylesheet. If you are having trouble finding the issue still, you can view the Compiled CSS and check the line number where the problem occurs.
If there were no errors or you fixed the errors you will see a green box which says “No Errors” and the Review Changes box will be blue.
Click on the Review Changes button to see a list of changes that were made.
If the changes look good, click the Publish button to save the styles. They will now be applied to all sites that are using your theme.
Working with themes
Working on themes may require the Account Admin, Content Admin, or Account Owner role/permission. To work on themes, open the left sidebar and click on Themes. You will see a list of themes for your account and several options for working with them.
Creating new themes
Creating a new theme allows you to start from scratch and set all of your themes styles manually. It gives you complete control of the colors and settings from the very start. In order to create a new theme:
Click the +Create New Theme button on the top of the Themes dashboard.
Set a title and description of the theme.
Click Create to save and enter the theme editor.
Once you are done creating the theme you will find it in the Themes dashboard. If you would like us to create a custom theme for you please contact support@zoomforth.com for more details on the process of creating themes.
Duplicate a theme
There are many workflows you can follow when working with your themes. One approach is to use one of your existing themes as a base for your custom theme. When you edit a theme from the Themes dashboard, you'll see the published sites using that theme on the right pane.
All of the sites on the right side of the theme editor, will be affected if that theme gets edited! If you need to change the theme and apply the change/s to specific site/s, it is best to clone the theme first, apply it to the intended site/s, and then start editing it.
Find the theme from the Themes dashboard.
Hover over the theme you want to clone/duplicate.
Click Duplicate.
Give the duplicate theme a unique name and you can also add an optional description.
Click Create button.
Note: You need to reload your site editor, to see your new clone theme from the theme selector.
Publishing a theme
One theme may be used by one or more published or drafted (unpublished) sites, including templates. Changes to the theme are automatically saved, but only get applied once the theme has been published, or republished, for all or some of the sites, published site or not, using the same theme.
Any changes in the theme activate the Publish button of the theme editor. Once a theme is published, the Publish button becomes inactive.
Go to the editing interface of the target theme from the site editor, or by accessing the editing interface from the Themes dashboard;
If the Publish button is inactive (there are no unpublished changes), update the target variables of the theme or style preset;
Wait for the previewer to refresh and display the updates on the right of the editing panel;
Review the changes shown in the previewer;
Click Publish button;
Select which sites the changes will only be applied.
If the Publish button is already active, it means that there are saved but unpublished changes or updates in the theme. You can verify from the previewer if the changes or updates are OK before publishing the theme.
Applying or switching a site to the new theme
From the left editing panel of the Site Editor, click Styling, and the current theme to bring up the theme selector.
Clicking on a different theme from the selector will also give a preview of the changes that will be applied to your site. You can also use the search bar if you know the name of the Theme.
After clicking on the Theme, you'll get the pop-up below for the style presets. You have the option to map the style presets of the previous theme to the new one you just selected. You can also select the option below to Apply the theme without mapping if you don't need to transfer/map any old style presets. Click on Done at the upper left once you're finished with the window below.
Setting a default theme
If you are working on a particular brand for your sites and want to ensure that all new sites use the same theme then you should set your theme as the default.
Find the theme you want to use as the default.
Select the theme and on the right side click the More button
Click Set as default for new sites in the menu.
You should now see a Blue Star icon on your theme tile which means that it is the default. Now, whenever you create a new site it will use this theme.
Remember that existing sites that already have a theme set will need to be changed manually if you want to use this theme for them too.
Hiding old or unused themes
For themes that are no longer used or that should not be used, Zoomforth offers the ability to hide them. Hiding a theme still allows you to edit and copy it but will not allow you to set it as a default or select it for your sites. In some workflows, it may also make sense to “hide” a theme until it is ready to be used in sites.
Either way, you can easily hide a theme by:
Find the theme you want to hide.
Select the theme and on the right side click the More button
Click Hide from site editor in the menu.
You will notice hidden themes will have the Red Eye icon and Hidden tag on it.
Delete a theme
A theme can be deleted if it's not used on any published site by an account or content admin.
Themes Library shows the list of the published sites where the theme is being used. Please note that unpublished sites using the theme will not show up on the list.
From the Themes dashboard, you'll be able to see the number of sites that are using the theme. You can also click on the sites to view them.
You won't be able to delete the theme if there's at least one site that is currently using it. You can also view the sites that are currently using the Theme inside the Theme Editor.
If there is at least one site using the theme, and you still wish to delete it, you have to go to the editor of the site and select a different theme for it. Please refer to this article for more information on How to Change your Theme.
If you had to assign a different theme for a site as described in the previous step, then refresh the Themes Library to clear the list of published site/s.Delete button should now be available after clicking More in Themes Library.
You can learn how to customize your theme here!