This task is for users with the OC Site Designer role.
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:
- Go to More > Themes Management from the main menu.
- 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 drop-down 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 drop-down 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. 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. Without a previous version, the site will display your content without a theme.
Our Theme Builder now supports jQuery (3.7.1). If your theme utilizes a prior version, you can now update to 3.7.1. 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, select the correct version from the jQuery version drop-down 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.7.1). |
| 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 site page. A theme can have multiple layouts, but only one can be active. 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 drop-down 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 theme styling you want. 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 drop-down 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. You will need both the OC Site Designer and OC System Administrator roles to apply a theme.
- 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. Remember 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.