Theme Editor
- Madzy Soetman
A theme determines the look of your site.
You manage your themes in the Refined Administration > Themes.
The Theme Editor is the tool that you use to create and edit themes.
Theme Editor anatomy
To the left of the editor, the preview area shows the look of your theme. It automatically updates when you make a change in the theme’s settings, so you can play around with your design before publishing it. To see how the theme looks in different parts of your site, use the drop down list at the top to switch between views: Site home, Space, Navigation menu, sidebar, keyboard navigation and popups.
To the right of the editor you edit 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
Click one of the three icons to decide how much background is shown behind the header and body: only at the top, partial or full. Then customise the settings for the header, body and footer.
Setting | Description |
|---|---|
General | Set a single colour, gradient or image as background. Customise images with these additional settings:
Toggle corners on to make the sharp corners of the general area round instead. Add an effect to the background, which you can give a color that matches your site’s color scheme. |
Content area | Toggle corners on to make the sharp corners of the content area round instead. The default width is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem. Set the colour of the Create button (the round button with a ‘plus’ in the top right of your site’s pages). |
Footer | Choose a light (gray) or dark (black) theme for the site’s footer. |
Header
Use the icons to set up the header’s style: 1 row, 2 rows or banner.
Setting | Description |
|---|---|
Height | Set the height of the category menu. |
Width | The default width is 1200px (75 rem). You can set a new width by percentage (of browser window width), pixels, or rem. |
Border | Set a border around the area. Once enabled, you can pick the border’s colour. |
Shadow (Effects) | Drop a shadow behind the area. Once enabled, you can pick the shadow’s colour. |
Background | Set a single colour, gradient or image as background. Customise images with these additional settings:
|
Logo | Set the logo size to small, medium or large. |
Footer theme | Choose a light (gray) or dark (black) background for the site’s header. |
Navigation menu
Use the icons to set up the style of the menu items in the navigation menu. Then set up the text site, the theme of the menu’s dropdown lists, and the colours in the menu.
Site homes
Pick the icon that matches the style you want for your Site Homes.
Spaces
Pick the icons that match the styles you want your menu and content to have.
Popups
Choose a light or dark theme for your site’s popups.
Sidebar
Set up the colour of your sitebar’s background and font.
Keyboard navigation
Choose the highlight colour for the keyboard navigation.
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.