When you use Refined, the look and feel of your site comes from different configurations and settings, all in combination with each other.
This is an overview of what components make up the look and feel for your Refined setup.
Below you can see the same Refined site, with the same content, but displayed with two different themes.
Example theme
Example theme
See an overview of your themes
In this tutorial we'll go through the basics of getting your very own theme up and running, using the Theme Editor. A Theme is created and managed in the Theme Editor and applied to the Site itself as a global theme, or to a Refined Page as a theme for an area of a site. The Theme Editor is opened when you edit an existing theme, or when you create a new one.
Go to the Refined Administration.
Go to the Themes & Styling tab.
Create and edit a theme
In the Themes & Styling tab, click Create theme to start a theme from scratch. You can also create a new theme based on an existing theme, by copying it and editing the copy. To edit a theme, click on the theme’s Cogwheel > Edit.
You are now in the Theme Editor, where you can customise the site’s main appearance.
Apply themes
In the Site Builder, you can decide which parts of Jira and Jira Service Management will be themed. A theme set to a site will apply to all the items in that site (Categories, Jira projects, and JSM portals) unless the item has a setting that overrides this.
Themes are easy to create using the Theme Editor (that got a nice update in 3.0) with a preview, then saved an applied to Sites, Categories, Jira projects and JSD portals.
For any site you want to set a specific theme to, go the Site Builder and click a site block’s Cogwheel to edit it. When a site’s theme is changed, it can be reverted to the default theme by clicking "Use default theme" in the top.
The theming setup
With Refined, you can choose to turn on theming globally switching on the global theming toggle. When global theming is enabled, all customer portals will be themed, and the theme that is applied is the one set on the Help Center.
You can mix and match which customer portals are themed using Refined, and which customer portals are kept as default JSM.
Themes are always applied top down, according to their context unless you manually set a different theme to a customer portal. This means that a customer portal will have the theme of its parent, whether that be a site or a category, but you can override this by manually setting the theme to a customer portal.
Export/import a theme
You can export a theme and import it into another Refined instance (or your current Refined instance).
To export a theme, go to the theme overview and click the theme’s Cogwheel > Export.
To import a theme, go to the theme overview and click the Import Theme button.
Logos
You set logos per site, this means that when you have several sites each of them can have its own logo.
Advanced settings: css and html
Using css and html to further customise your site is an option with Refined, although we do not support any issue caused by these types of customisations.
Learn more about advanced customisations
Fill background
Use the "Fill Background" setting on a theme to give your portal a modern and sharp look. It fills out content to the full width of the browser window.
Go to Refined Administration > Theme & Styling tab.
Choose a theme to edit.
Click Customer Portal in the feature menu.
Activate the Fill Background setting and save your theme.