The branding options in Administration let you simply and quickly change the design of your site.

What you can configure

• Colours
• Fonts
• Logo
• Favicon
• Mobile branding
• Widgets
• Footer

Configuring fonts

Your font is typically defined in your organisation’s brand guidelines

Font face

Add font face

1. Name the new font family you want to import, e.g. ‘Open Sans Bold’
2. Choose a font style or leave as ‘Normal’
3. Choose a font weight or leave as ‘Normal’
4. You can then choose from 4 file types to add the font file
5. Select ‘Add File’ to view files on your local drive and upload
6. Select the font file, e.g. ‘OpenSans-Bold.ttf’
7. Select ‘Submit’
8. The file name should display next to the ‘Choose File’ button
9. Scroll down to the ‘Add another item’ to repeat and add another font file
10. Once you have added the font files, select ‘Submit’

Remove font face

1. Select the ‘Remove font’ checkbox below the listed font files
2. At the bottom of the page, select ‘Remove’

Export font face

1. Select the ‘Export font face’ at the bottom of the page

 

 Import font face

1. Select the ‘Font face import’ tab
2. Import font face by uploading a JSON file from a previous export
3. Select ‘Add File’ to view files on your local drive and upload
4. Select the font face file to add, e.g. ‘‘intranet_font_face_values.json’’
5. Select ‘Upload’
6. The file name will display next to the ‘Add File’
7. Select the ‘Submit’ button
8. View ‘Font face settings’ tab

 

Linking font files to text elements

Once the font face files are added, go to ‘Font family’ in Administration and link the new font styles to your text elements.

Font family

Now choose a text style for your site and link it to your font faces:

1. Add a CSS selector to column one, e.g.

p	paragraph
body	body
h1	Heading one
h3, h4	Heading three and four
.breadcrumb	<div class=”breadcrumb”>

2. Other selectors for less common text elements can be identified by using inspect element.

3. Add the name of your font family in the second column, e.g. if you uploaded the font face ‘OpenSans-Bold.ttf’ and gave it the CSS font family name ‘Open Sans Bold’, then add this name ‘Open Sans Bold’ to the second column

4. This will link or apply the font face style ‘Open Sans Bold’ to the CSS selector

5. Select ‘Submit’

 

 

 

Export font family

1. Select the ‘Export styles’

Import font family

1. Select ‘Font family import’ tab

2. Import font family settings by uploading a JSON file from a previous export

3. Select ‘Add File’ to view files on your local drive

5. Select the font file to add, e.g. ‘intranet_font_family_values.json’

6. Select ‘Upload’

7. You should see the file name displaying next to the ‘Add File’

8. Select ‘Submit’

9. View ‘Font family settings’ tab to check font family has been added

 

Remove font family

You can remove a font family from a selector by:

1. Deleting the selector field in column one and font family in column two

2. Select ‘Submit’

 

Font sizes

Change default font sizes for headings

1. Choose heading option from menu, e.g. H1 font-size, H2 font-size, etc.

2. In the dropdown menu, select the point size to replace the default

2. Select ‘Submit’

Font size for specific CSS selectors

1. Add CSS selector, e.g. ‘.pane-latest-comments .pane-title’

2. Choose a point size from the dropdown menu

3. Select ‘Add another item’ to add another CSS selector

4. Select ‘Submit’ 

 

 

 

Export font size settings

1. Select the ‘Export styles’

Import font size settings

1. Select the ‘Font sizes import’ tab.

2. Import font size settings by uploading a JSON file from a previous export

3. Select the ‘Add File’

4. A window will open to view files on your local drive

5. Select the font file you would like to add, e.g. ‘intranet_font_values.json’

6. Select ‘Upload’

7. The file name will display next to ‘Add File’

8. Select the ‘Submit’ button

9. Select ‘Font sizes’ to review

Example of font sizes import (no upload) 

 

Remove  font size

1. Delete the CSS selector field

2. Select ‘Submit’ 

 

Logo and favicon

Add your site’s logo and favicon.

Intranet site logo

Please note Logos will display with a height of 40px

Suggested orientation for your intranet site logo should be landscape to fit within the main nav bar region.

 

 

Adding a new site logo

1. Select the ‘Browse’ button

2. See ‘Uploading an image file’ (Link to ‘Uploading an image file’ guide)

 

 

Removing a new site logo

1. Select the ‘Remove’ button

 

Intranet site favicon

 

Adding a favicon

1. Select the ‘Choose File’ button

2. A dialog modal window will open to view files on your local drive

3. Select the image file you would like to add.

4. Select ‘Submit’

5. You should see the file name displaying next to the ‘Choose File’ button.

6. Select the ‘Upload’ button

7. Select the ‘Save button

 

Removing the favicon image

1. Select the ‘Remove’ button

 

 

Colours

 

Adjust the colours for the site

 

URL reference:  admin/branding/colours

This would typically be the colours defined in your organisations visual brand guidelines or web style guide.

 

Preview colour schemes

 

1. You can preview colour changes made to components before saving or updating colour schemes.

2. You can preview existing colour sets using the ‘Colour set’ select menu (combo box)

 

 

Apply colour schemes

 

Method 1

1. Colour values for the components listed below can be updated by using the colour wheel or simply adding a hex value for example #4bb88b

2. Once the colours have been added you can select the ‘Save changes to colour scheme’ button

On this screen you can update the following components:

• Navigation bar
  This includes the first and second level of the navigation of the menu
• Footer section
  Text and background colour
• Body section
  Heading and paragraph text colours
• Table colour
  Border colour and row background colours
• Link colour
  Text link colour
• Standard button
  Border and background colours for Normal, Hover and Pressed state
• Primary button
  Border and background colours for Normal, Hover and Pressed state
• Alert button
  Border and background colours for Normal, Hover and Pressed state
• Vertical tabs
  Accent and icon colour for vertical tab buttons
• Toolbar
  Background colour and text colour for toolbar
• Screen background colour
  Background colour for intranet screens
• Mobile
  Background colour for header section on mobile and tablet devices

 

 

Method 2

1. Select an option from the ‘Colour set’ select menu (combo box)

2. Select the ‘Save changes to colour scheme’ button

 

 

Save or export colour schemes

 

Save update your intranet

1. Add a new name the ‘Scheme name’ free text field

2. Scroll down select the ‘Save changes to colour scheme’ button

 

 

Export colour schemes

1. Choose the colour scheme you want to export

2. Scroll down and select ‘Export styles’ button

 

‘Save changes to colour scheme’ and ‘Export styles’ buttons

 

Delete a colour scheme

 

1. You can remove a custom colour scheme by selecting the ‘Colour set’ select menu (combo box)

2. Select the ‘Delete current set’ button

3. The ‘Colour set’ will now be displayed as ‘Custom’

 

 

Import colour schemes

 

1. View the ‘Colour settings import’ tab

2. Import colour schemes by uploading a JSON file from a previously exported colour scheme created using the export functionality described above

3. Select the ‘Choose File’ button

4. A dialogue modal window will open to view files on your local drive

5. Select the font file you would like to add. For example ‘intranet_colour_saved_palettes_intranet_base

6. Select ‘Upload’

7. You should see the file name displaying next to the ‘Choose File’ button

8. Select the ‘Submit’ button

9. View ‘Colour settings’ tab

The colour settings are now updated for your intranet

 

 

 

 

Widget branding

 

URL reference:  admin/branding/widget-branding

 

Widget branding applies style updates to:

Widget title border (This is the border that displays about a widget style)

• You can update the colour and width of a border when it displays above or below widget title

Widget title font (This is the title that displays about a widget style)

• You can update the colour and weight of widget title

 

 

 

 

 

Save or export widget branding styles for your intranet

 

 

 

 

 

Import widget branding styles

 

• View the ‘Widget styles import’ tab.
• Import widget branding styles by uploading a json file created from a previously exported style using the export functionality described above.
• Select the ‘Choose File’ button
• A dialog modal window will open to view files on your local drive
• Select the font file you would like to add. For example ‘intranet_widget_styles_values.json’
• Select ‘Upload’
• You should see the file name displaying next to the ‘Choose File’ button.
• Select ‘Submit’ button
• View ‘Widget branding’ tab

The widget branding styles are now updated for your intranet

 

 

 

 

 

Mobile

 

Add/Edit mobile-specific branding

URL reference:  admin/branding/mobile

You can add or update the image files for:

• Mobile-specific logo
  Suggested orientation for your intranet site mobile-specific logo should be landscape to fit within the top bar region of your mobile device.

 

 

 

• Background image for user profiles
  Suggested size for this image is 310px by 174px

 

 

 

 

Adding an image

 

1. Select the ‘Choose File’ button

2. A dialog modal window will open to view files on your local drive

3. Select the image file you would like to add.

4. Select ‘Submit’

5. You should see the file name displaying next to the ‘Choose File’ button.

6. Select the ‘Upload’ button

7. Select the ‘Save button

 

 

 

Removing the image

1. Select the ‘Remove’ button

 

 

Footer

 

Change what appears in the footer

 

URL reference:  admin/branding/footer

Using a simple edit box and WYSIWYG editor you can create or update the content such as text, links, images (Link to ‘Uploading an image file’ guide), tables that appears in your intranet footer region

 

 

Sign in page

URL reference: invotra/admin/branding/cognito

There are extensive branding options for the Cognito interface, i.e. the sign in page. 

The sign in page allows branding managers or webmasters to style each element and choose a logo which will be shown to unauthenticated users who haven’t authenticated seamlessly through SSO.

Options include:

• Logo
• Banner
• Container background
• Identity provider descriptions
• Identity provider buttons
• Text description
• Field labels
• Input fields
• Submit button
• Social button
• Password check
• Error messages
• Legal text

 

Sign in screen editable regions