...
Create a unique look and feel
...
for your
...
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
...
Refined site.
| Table of Contents | ||||
|---|---|---|---|---|
|
Themes
A theme determines the look of your site. Choose a pre-set theme, or apply your corporate branding by building your own custom theme.
You can apply different themes to each of your sites. This way, a knowledge base and an intranet can have different looks. You can also create themes for special occasions, like a holiday theme that you temporarily add to your intranet.
Manage themes
Go to the Refined Administration.
Go to the Themes & Styles tab.
Under the Themes & styles heading you find an overview of your themes. A green label shows which themes are currently Active (applied to a site).
Click on a theme’s Cogwheel to:
Edit: change the theme in the Theme Editor.
Rename: give the theme a new name.
Export: download the theme. You can then import (upload) it to another Refined instance.
Copy: duplicate the theme.
Delete: discard the theme. This can’t be undone.
Below the list of themes are two buttons:
Click the Create theme buttonto make a new theme in the Theme Editor.
Click the Import theme button to upload a theme which you previously exported.
| Info |
|---|
To create a new theme based on an existing theme, |
...
copy it and |
...
edit the copy. |
...
You are now in the Theme Editor, where you can customise the site’s main appearance.
Apply themes
...
Apply a global theme
The global theme applies to all sites, unless specified otherwise in a site’s settings.
Go to the Refined Administration.
Go to the Site Builder tab.
Click the Global JSM site’s cogwheel > Edit.
Scroll down to the Theme heading and click Change theme.
Apply a site-specific theme
The site theme applies to all the items in that site (Categories, Jira projects, and JSM portals)
...
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.
...
, unless specified otherwise in an item’s settings.
Go to the Refined Administration.
Go to the Site Builder tab.
Click a site’s Cogwheel > Edit.
Scroll down to the Theme heading and click Change theme.
Apply an item-specific theme
Apply a theme to a specific item: a category, Jira project, or JSM portal.
Go to the Refined Administration.
Go to the Site Builder tab.
Click the item’s Cogwheel > Edit.
Scroll down to the Theme heading and click Change theme.
| Info |
|---|
You can also choose to use Refined only on specific portals. |
Export/import a theme
...
It’s possible to export a theme and import it into another 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
...
and icons
Personalise your sites by adding logos and icons.
Advanced settings: CSS and HTML
Use CSS and HTML to further customise your site
...
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.
...
.
| Note |
|---|
This is only recommended for professional front-end developers. We do not offer support for issues caused by custom HTML and CSS. |