Theme Editor

The Theme Editor lets you create and edit themes.

Go to the Refined Administration.
Go to the Themes & Styles tab.
Click the Create theme button to make a theme from scratch.
Click a theme’s Cogwheel > Edit to update it.

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 site switcher.
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. Customise images with these additional settings: Full, repeat or without repeat Position the image Filter (blur, shade, monochrome, vintage) Set an underlying colour	Header Body Footer
Text colour (Font colour)	Set the colour of all the area’s text that does not link to another page.	Header Body Footer
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 Footer
Shadow (Effects)	Drop a shadow behind the area. Once enabled, you can pick the shadow’s colour.	Header Footer
Content	Customise the area’s content with: Effects (shadow) Colour of the shadow Corners (toggle on to round the corners)	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	No Style - every horizontal section is white. Alternating - sections alternate between white and grey. Separating line - a thin grey line separates the sections
Title position	Position the title to the left, center or right.

Request/Issue

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:

Create request
Approval
Share with participants
Upload attachments
Add comment

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.