The Design panel allows administrators to customise the look of the Intranet.

The Master Design is the first style that will be created and can exist alone, with every user always seeing the Master Design.

This area is important at the site launch to ensure your organisation's logo, colour palette and overall branding are represented.

The Intranet management team must understand how to use the Design panel to make any changes to a site's style as required over time.
 

Editing the Master Design

Only Application Administrators of the Design application can access the Design admin panel.

Head to Admin > Design > Edit Master Design.

There are 4 main tabs to explore and each has different style and configuration choices to make.

When choices are made in the first 3 tabs the preview on the right will update, changes will only be applied by clicking 'Save' at the bottom of the screen.

- Appearance

Choose the main base colours of your site as well as the logo, system font and background image.

• Colour: Use the picker or enter a colour code to set a primary and link colour
• App Icon colours: This can be multicoloured (as hardcoded in the product) or select a custom solid colour and will apply to the application list
• Fonts: Select the default system font from the list or Claromentis supports integration with Google Fonts if your usual brand selection is not already available in the system.
• Panel headers: Choose the colour and style of panel headers which appear in components placed on pages that use a title
• Background: Select a solid background colour to appear across the site, or upload a background image to appear instead (there is an option to tile smaller images) This will appear on every Intranet page,it's not possible to set different images/colours per page or Intranet area.
• Styling: Choose for card shadows to appear or not and the shape of component corners and profile picture frames.

- Interface & Navigation

Select the navigation menu that will appear when users are looking at the master design. Menus are created in Menu Builder and will appear for selection when editing themes or the master.

• Nav Bar options: Choose the background and icon colour of the navigation bar and whether the background is solid or a gradient (another colour picker will appear when selecting gradient to allow the blend to occur)
• Nav Bar logo image: Upload the company logo to appear in the top left corner of the site and act as a home button (save your logo with a transparent background before uploading for the best look)
• Hide Header items: It may not be suitable to have some icons showing, so these can be deselected here and won't appear on the front end when users are looking at the master
• Main Menu: Select the menu that should appear in the master (as well as its background and item colours)
• Menu layout - Choose if the menu should always appear (top bar) or collapsable under an icon next to the logo (side)
• Page width: Select standard or widescreen width (widescreen is better if users have larger screens e.g. desktops)
• Homepage Layout: Select the Page users will see as the homepage of the Master. 

- Tab Properties

The title and favicon that will appear in browser tabs for your site.

• Page title: Choose the text to appear in the browser tab (if you have named your Intranet this works well here) 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 e.g. People List, News article etc
• Favicon: The small image that will appear alongside the title in the browser tab (a smaller variation of the company logo is good to allow users to differentiate the Intranet tab from other sites they have open and aid their navigation)

- Advanced

Your team can write CSS to put in this area to alter how certain elements appear on your site (e.g. hide certain options, make text bigger etc.)

CSS can potentially break Intranet elements so always test first and exercise caution when using it.

• Custom CSS: Enter any CCS you have in this area and save it to apply this to the site
• Custom code: Use this area for any third-party scripts or code you wish to apply to your site e.g. Google Analytics

Example Video

This short video shows the Master Design being set up for the first time by an example company.

Notice how the administrator created the menu and homepage they wanted to use in the Master before starting to edit it, as they can update the menu items as they create more pages and edit the homepage to make edits over time.

However, if your site has already been in use, you may want to use a pre-existing menu and homepage instead of creating new ones, so you can just skip to 1.35 in the video below to see the Master design edits.

Please note: If you are looking at a particular theme when updating the Master, you will not see the master on saving, you will continue to view the theme you are set to see.

Making changes over time

Any application administrator of Design can access the panel and edit the Master Design. This means if minor style changes are needed or for more major overhauls (your Company is going through a name or branding change) application administrators of Design can manage and carry out the changes.

A Sysadmin can make new or other users application administrators of Design as required to facilitate Design changes.

The choices made in the Design panel do not have a revision history, so any changes made and saved cannot be reverted to previous settings.  Due to this administrators need to be vigilant when making and saving changes because there is no record of previous settings stored to revert to or work from, all changes to rectify this would also be manual.

Reminder: If you have created themes on the site, any linked attribute in a theme to the master will also change in the theme when it is changed in the master. To avoid any unwanted changes in themes ensure these attributes are unlinked from the master first.