A guide to the Theme Editor.
The Theme Editor Features
The Theme Editor is a simple tool to create your themes.
Preview area
The Theme Editor has a large and responsive preview area where any setting you make is reflected instantly.
Settings area
The right hand side of the editor is where you expand sections to make the settings you want.
Context switcher
In the top left of the page you can switch between Portal and Request / Issue to see what the theme will look like in different areas.
History area
In the History tab you can restore an old version of a themeThe Theme Editor lets you create and edit themes.
Go to the Refined Administration.
Go to the Themes & Styles tab.
Click the Create theme buttonto make a theme from scratch.
Click a theme’s Cogwheel > Edit to update it.
| Info |
|---|
To create a new theme based on an existing theme, copy it and edit the copy. |
...
Theme Editor anatomy
To the left of the editor you see the preview which shows the look of your theme. It automatically updates when you make a change in the theme’s settings, which lets you play around with your design before publishing it. To see how the theme looks in different areas of your site, use the dropdown list at the top to switch between Portal view and Request/Issue view.
To the right of the editor you build your theme in the Settings tab. Click the History tab to view and restore previous versions. A version is generated every time you hit the save button.
Settings
...
Main appearance
The main appearance of your site is divided into three areas, for which you can customise the settings:
The header is located at the very top. It contains the category menu and the
...
Main appearance
Use the main setting to choose the look for your theme. For the first option to the left, there is only header and footer available as sections.
Header
The header is the very top section of the theme where you use a color, an image or a gradient to set your look.
| Ui text box | ||
|---|---|---|
| ||
Theme tip Use a transparent setting to a color or gradient to get more options. |
Body
The body is the main part of the theme, located between the header and the footer.
| Ui text box | ||
|---|---|---|
| ||
Theme tip For images you can choose how the image is displayed: full, repeat or no repeat, as well as apply filters and position the image. |
Content
For the content you can choose to have shadow effects and corner settings.
Footer
The footer is the lower part of your theme, you use the settings here to choose text color, link color and background, as well as a border option.
Portal
The portal settings apply to the area of the content, the white (or grey) area in the middle of the page. Settings can also be made for the background
- Fill background - this setting makes the content area span right to left and top to bottom completely
- Width - the percentage or pixel amount of how wide the content area is.
The body is the block located in the middle of your pages. It contains portals, requests and issues.
The footer is located at the bottom of the site. To edit the content of the footer, use the Layout Editor.
Setting | Description | Available for |
|---|---|---|
Main appearance | Choose how much background is shown behind the header and body: only at the top, partial or full. | |
Background | Set a single colour, gradient or image as background. Colour picker and image info links | Header |
Text colour | Set the colour of all the area’s text that does not link to another page. | Header |
Link colour | Set the colour of all the area’s text that links to another page. | Footer |
Border | Set a border around the area. Once enabled, you can pick the border’s colour. | Header |
Shadow (Effects) | Drop a shadow behind the area. Once enabled, you can pick the shadow’s colour. | Header |
Content | Customise the area’s content with:
| Body |
Portal
The portal settings apply to the portal content in your site’s body area. See the Main appearance section above for more body settings.
Setting | Description |
|---|---|
Width | The default width of your portals is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem. |
Fill background | Makes the content fill out the full width of the browser window. This has the same effect as setting the Width setting to 100%. When the background is filled, you are not able to set the width manually. |
Row |
...
style |
...
|
...
|
...
|
...
|
...
| |
Title position | Position the title to the left, center or right. |
Request/Issue
Width setting for how the requests and issues are displayed.
| Ui text box | ||
|---|---|---|
| ||
If you want your theme to look the same for different projects, but you want one setting to differ (for instance a width setting): create a copy of your theme and change that one thing in the copy. Then apply the theme to the other project via the Site Builder. |
Extras
Settings for colors and navigation for the theme.
Primary Button Color
This dictates the color of most "primary" buttons in the portal UI.
...
The Request/Issue settings apply to the portal content in your site’s body area. See the Main appearance section above for more body settings.
Setting | Description |
|---|---|
Width | The default width of your portals is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem. |
Extras
Setting | Description |
|---|---|
Primary button colour | This dictates the colour of most buttons in the portal UI, including:
|
Keyboard navigation | Learn about keyboard shortcuts. |
Colour picker
There are multiple ways to pick a colour in the colour selection popup:
Select the shade and hue at the top of the popup.
Enter an rgb, rgba, or hex code.
Click the eyedropper icon to select a colour from anywhere on the page.
Pick one of the recently used colours.
Use the vertical slider located in the middle of the popup to control the colour’s opacity.
Image options
Customise images with these additional settings:
Full, repeat or without repeat
Position the image
Filter (blur, shade, monochrome, vintage)
Set an underlying colour