Refined comes bundled with ready made neat looking themes to get you started once the installation is done. Should you want a customized theme, a theme that is consistent with your branding, or simply a theme design of your own choice we will guide you through how to create this. We suggest opening up the Theme editor and playing around with out the different options (colours, shades, images, styles etc).

What's included in the tutorial?

In this tutorial we'll go through the basics of getting your very own theme up and running, using the Theme Editor. The Theme Editor is opened when you edit an existing theme, or when you create a new one. The video above gives an example of how to create a Theme and below you will find a step-by-step guide:


Click Create Theme in the Themes tab to open up the Theme Editor.

Tip! If you like one of the bundled themes, you can use it as a template by clicking the settings icon and copying it. This is a good shortcut to get up and running quickly as you start with a ready to go theme, and can simply edit a few details, such as the colors and image uploaded to match your brand or team. Watch a video tutorial to learn more about creating a theme from a copy.

Begin creating your theme by playing around the General Style tab and choose your background style, header style and navigation menu style. Each change you make will be shown in the preview area.

In the Background tab choose from three style: top, half and full.

In the Header tab choose the header style you want adjusting the height of the header, the span of the menu (width), the size of the logo and the look of the search form. The header is shown on every site, category and space.

In the navigation menu tab is adjust the look of the navigation menu in the header. There are several options for how to display this dropdown menu.


If you do not see what some of the settings affect, look for the small ball, hover it and the setting will show up in the preview-area.

The Content tab is the way you want to theme and style the content within pages. Use this tab to style of the frame that holds the content including sites and space menu.


You can change the color of the "Create" button in under "General" in the Content tab. We recommend matching the create button to the keyboard navigation highlight color.


Use the Extras tab to set the shade to light or dark in the category dropdown in the navigation menu and the pop-up box. Use it to choose between a light or dark shade for the global navigation sidebar and the footer. And finally pick your preferred highlight colour in the keyboard navigation menu.

Hit Save and Close the Editor.

You will now find your theme in the Themes tab of the Refined Administration section. This can now be applied to globally, to a site, a category, subcategory or a single space site.

  • No labels