For most admins, creating a theme with the Easy Editor is the best option. It allows you to customize the default theme in a point-and-click environment and see your changes in real-time, and requires no coding skills whatsoever.
Creating the theme
To create the theme we'll edit, navigate to Customization -> Themes in the AdminCP. Click the Add Theme button. In the popup window, ensure the Easy Mode option is selected (it's the default), and then click Next.
On the next screen, you can configure some choices about your new theme:
-
Name (required)
As it will appear to users of your site -
Parent
You can make this theme a child of another, meaning it will automatically inherit any style/template changes from the parent theme -
Default theme
Makes this theme the default for guests and members who have not specifically chosen another theme -
Available for
Sets permissions for which groups can use this theme. Example use: a theme that only 'premium' users can access as an added benefit of paying
Click Save once you have filled in the information. Your theme will be created and you'll be returned to the theme listing.
Launching the Easy Mode editor
From the theme listing in the AdminCP, you can click the magic wand icon on any Easy Mode theme to launch the visual editor (you will need to be logged into the front-end of your community to use the visual editor):
Note: You can launch the visual editor at any time, even long after you've created the theme. However, if you convert an Easy Mode theme to a normal theme, you can't go back and use the visual editor.
Launching the visual editor will take you to your community in editing mode (that only you can see). Your community will be shown on the left, with editing tools available in a panel on the right:
The visual editor has a few key functions to help you design your theme. We'll cover each in turn.
1. Colorize
This tool lets you instantly change all of the theme colors to different shades of another color. Click the Colorize button, and you'll see four swatches:
Clicking a swatch and choosing a new color will immediately update the live preview to show you the result.
The colorize tool is great as a first step - if you know you want a red theme (for example), you can use it to get the basics done, and then fine-tune the resulting colors later using the other tools.
If you don't like the result, you can click the Revert Colorizer button to undo your changes.
2. Select tool
The Select tool allows you to point-and-click at sections of pages on your community, and the visual editor will automatically show you the color editor for the closest available parts.
3. Custom CSS
If you are familiar with CSS, the Easy Mode editor gives you the ability to add custom CSS to your theme without needing to convert it to a full manual theme. Simply click the CSS button, and a code editor will be shown for you to use. And yes, you still get the live preview!
4. Style editor
The available styles you can edit are listed in the main panel. Click one to see the color swatches and to edit the colors. Some styles allow you to edit just the background, others will also allow you to edit the font color.
Background colors can also be turned into gradients by clicking the button. To use it, you choose a direction in which the gradient should go, and then add colors to form the gradient.
5. Build
The Build tab is where you'll go once you're happy with your changes and want to save them. Click the Save Theme button to do so. This will save your changes and make them live to any users who have chosen this theme.
Report Guide