Jump to content

Guides

Creating a theme with the Easy Editor

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):

5643786f97c75_Themes2015-11-1112-17-44.t

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:

56438041a9de8_EasyModeEditor2015-11-1112

 

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:

5643811315dad_EasyModeEditor2015-11-1112

Clicking a swatch and choosing a new color will immediately update the live preview to show you the result.

5643832dab4d7_EasyModeEditor2015-11-1113

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.

5643850ebbf92_EasyModeEditor2015-11-1113

 

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.

56447e2b033b4_EasyModeEditor2015-11-1206

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.

564482ab4f91c_EasyModeEditor2015-11-1207

 

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


×