This task is for users with the following roles: OC Site Designer.
To create a theme for your site or edit an existing one, you need to go to the Theme Builder of your admin. The Theme Builder has various tabs you can use to customize your theme. This article will go through:
How to create a theme
You can create or edit a theme through the Theme Builder:
- From the main menu, go to More > Themes Management.
- Select Create Theme and fill out the tabs to start fresh, or to edit an existing theme, select it from the list and choose Update. This will create a new version of the theme, which you can save, publish or delete.
- Use the Preview dropdown menu to see how the theme looks on your site. The preview will open in a new browser window, so you can check out how it works on the whole site. We recommend selecting the correct site from the Site picker dropdown menu, before going to Themes Management.
- Copy a theme, if you want to base a new theme on an existing one.
- When you're ready, select Publish. The theme can now be applied to a site. If a theme is already applied to a site, the latest version of the theme will be live.
You can Export a .zip file of a theme if you want to share it with anyone, or select Import theme to upload an existing .zip file.
If you want to remove a theme, you can Roll Back the theme to make it unpublished or Delete a theme or a version. Remember, if you remove a theme version while a site is using it, the theme will revert to the previous version and some site functionalities may break. If there is no previous version, the site will display your content but without a theme.
Our Theme Builder supports the latest version of jQuery (3.6.3). If your theme utilizes version 3.6.0, the new version will be applied automatically. If you are using version 1.12.4, we recommend upgrading to avoid potential security risks. To update, go to More > Themes Management > your theme > Overview, and select jQuery 3.6.3 from the jQuery version dropdown menu and check to Include jQuery migrate script. If you need assistance with this, please submit a support case.
The Theme Builder tabs
There are seven tabs that you can use to create your theme:
| Overview |
Use this tab to give your theme basic details, such as a Theme name and an internal Description. By default, the Generate default styles for this theme box will be checked. This will include the default OpenCities styles on your theme. You can change these defaults in the Styles tab if you need to, or leave this unchecked, and only fundamental styles included in the product will be applied, plus any custom styles you’ve added via the CSS / JS tab. All new themes will automatically use the latest version of jQuery (3.6.3). |
| Layout |
The Layout tab lets you customize the elements displayed on your homepage; you can add or remove components and move them around to suit your site. You can also customize the site header, which will appear on every page on your site. A theme can have multiple layouts, but only one can be active at a time. Learn more about the Layout tab. |
| Files | You can upload files to be used in the theme into your Files tab, such as an icon sprite sheet or JavaScript from a third-party plugin. Once you've added a file, it will be listed in the file selection dropdown menus in the Styles and CSS / JS tabs. |
| Image sizes |
Use this tab to set the dimensions of images used throughout your site. Learn more about changing the image sizes in your theme, or check out our best practice tips for images. |
| Styles | This is where most of the work for your theme will be done. The Styles tab is very extensive and there are multiple options for setting styles. |
| CSS / JS |
Use this tab to add your own CSS rules if the Styles tab doesn't allow you to achieve the exact theme styling you're looking for. Learn more about adding CSS or JavaScript to a theme. |
| History |
View previous versions of your theme in this tab. Select a theme from the list and then use the Preview Theme dropdown menu to preview it, or use the cogwheel icon to Roll Back or Delete the version. You can also see any comments for each published or deleted version of a theme. |
How to apply a theme
Once you've created and published a theme, you can apply it to a site through Site Management. To apply a theme, you will need both the OC Site Designer and OC System Administrator roles.
- From the main menu, go to More > Site Management.
- Select the site to which you want to apply the theme.
- Go to the Themes tab and hover over the theme you want to apply.
- Select Preview if you want to see the theme on that site before applying for it. The site will preview in a new browser tab. Keep in mind that your theme may look different if you Preview it on a site it's not meant for, for example, if the theme allows for top tasks but the site doesn't have any.
- Select Apply to make the theme live on that site, then select Apply again to confirm.