The design panel is a feature within the admin section of the site.
Here the design of your intranet can be customised with your organisation's logos, fonts and colour palettes, ensuring it is on-brand as well as easily recognisable to users.
The article will provide an overview of the options and functionalities.
1. Where to find the design panel
To access the admin panel of the Design application, you will first need to be made an application administrator of Design.
Navigate to Admin > Design to access the design panel.
The landing page of the application lists the Master design and any themes that have been created.
💡Tip: Different themes are useful when you want to give different audiences a different look and feel, for example, Internal employees versus External partners.
2. Editing the Master Design
The Master theme is a good place to start as it enables you to set key features that should remain consistent even in any themes created.
For example, you may want to keep the logo and banner colour consistent through all themes.
This also means if a content change is required e.g. you have a new company logo, this can be quickly updated against all themes that have this attribute linked to the master, by simply uploading the new image in the master.
You can tell if an attribute is linked to the master via the broken (not linked) or full (linked) chain icon in themes which is covered in more detail below.
When you create new themes, you can choose to link and lock specific features to the Master Design.
Once you select Edit Master Design, you will be directed to a new page with 4 key tabs. We will work through the features of each of these tabs below.
Appearance
In the Appearance tab, there are multiple design options you can apply to your intranet.
- Upload a logo
An example of a file type here is .png. The best practice is to have a transparent logo background as it will allow the colour of the header bar behind it to display.
- Choose the theme colours
If you have specific colour codes you can enter them or choose from the options.
💡Tip: You will notice a small preview on the bottom right - This helps indicate what each of the changes you have made will look like in reality. You can enlarge this view by selecting the middle arrow icon.
- Change the font & panel headers
You can change the font to something more suitable to your organisation.
Claromentis supports integration with Google Fonts if your usual brand selection is not already available in system.
- Change the background
An image for the background can be uploaded. This will appear on every Intranet page (it's not possible to set different images/colours per page or Intranet area)
- Configure the styling
The styling section allows you to give boxes shadows to stand out more or change the shape of boxes and profile images.
Tab properties
In the Tab properties, you can manage how your site will display when it's listed at the top of your browser amongst other tabs.
- Add a title and logo (called a Favicon)
The title & logo of your site are used in the tab of your browser.
Leave the default %s in place to have the system provide an appropriate title based on what is currently showing in the tab to the user.
Otherwise, any custom title given here will always appear regardless of the Intranet page being shown.
Using a clear name and logo enables users to easily identify the intranet tab.
- Check tab preview
A tab preview can be used as a guide to how your selections will look.
Using a clear name and logo enables users to easily identify the intranet tab.
Interface & Navigation
In the Interface & Navigation section, you can determine the layout of the homepage.
- Select the homepage layout
This refers to Pages created on the site which will likely have different components displayed to serve separate purposes.
You may have already designed certain pages - in which case they will be listed here to choose from.
Otherwise, the default homepage given on install will be called 'Main'.
- Select the menu
You may have determined the structure of the menu in the Menu Builder application. You can see there is a shortcut to this on the right. You can also choose whether the menu should be on the top bar or left-hand side of the page.
- Choose the Interface layout
Select the standard width or full width. This denotes how much of a border the page you are working on has.
💡Tip: It's recommended you test both out to see what your preference would be.
- Configure the Header
There are 6 preset options which you can select or remove. You may wish to hide some of these features from your users if they aren't appropriate for your Intranet aims.
Advanced
The Advanced area enables you to add custom CSS rules to your site if you have the resources in-house to make changes as it can be a useful tool for making more amends.
3. Creating themes
You can create various themes for different audiences.
For example, you may wish to create a theme for an Extranet area that is tailored to the users within it, with different branding colours set and a new homepage layout that displays other components than seen in the master design or other themes.
It is also possible to have some fun with the Intranet and create unique themes for holidays, events or seasons for users to choose between or be forced to see upon logging in, it is completely up to you!
Edit Properties
1. Select + New Theme to create a Theme.
2. Enter the details:
- Name: Title of theme
- Description: A brief description of the theme
- Home Page layout: The page layout of the theme. For example, you may want the Sales team to have a specific home page that’s more relevant to them. All pre-designed pages you have made should be listed.
- Available for: The intended audience. The 'Available for' determines the themes available under 'My Settings' which users can switch between as desired. You can also force a theme on Groups or individuals - Will we run through this further down this article.
Please note: Users need approval for both the Theme and Homepage. Make sure they have permissions for both. The homepage permissions can be checked via Admin > Pages > Sites.
3. To save the new theme, select Submit.
You will be taken to the design page.
Edit Style
The theme design page is similar to the Master Design page with the addition of the ‘Link’ feature.
All attributes will be linked to the Master Design theme by default.
When deviating from what is set in the custom design, the link will break, denoting that this is no longer linked to the master.
This means if that attribute is updated in the master it will have no effect on this theme.
Choose to link or unlock properties in a theme depending on your use case and whether you need them to remain consistent with the master or more unique.
If you wish to customise the theme, you can simply select and/or upload the design.
Please note: If you upload an image and lock the link when saving changes, the logo will revert to the old one.
You can link or unlink colours, fonts, or styling using the link icon to customise the new theme compared to the Master Theme.
This relates to the other page sections we went through earlier which include:
- Tab Properties
- Interface and Navigation
- Advanced
Theme settings
There are two features that can be configured.
- Visual Interface: The interface is only relevant if you have had custom work created. All pre-designed layouts will be listed.
- Forced for: The intended audience. The 'Forced for' determines the one theme that users will see regardless of other theme permissions - Users are not given the option to choose from the range of themes under ‘My Settings’. This feature is useful when you would like specific teams, extranet users or individuals to have one theme they cannot switch or alter.
Please note: If users are forced to see more than one theme, the one listed higher in the order will be applied.
We advise only forcing users to one theme (if you need to do this) and if instead, they should be able to see a range, to make them all 'available for' users instead, so they can switch between them.
Once the Theme has been created, you can view it via Admin > Design.
You can view the Homepage layout and check who has permissions for a theme and whom it is forced for:
