Intranet Branding

Introduction

 

Using the branding options located under Administration you can simply change the look and feel of your intranet, specifically the typography, component colours and logo. This gives you the ability to quickly update your intranet to reflect the visual brand identity or web style guide for your organisation

 

Configuring your intranet branding

 

Components that can be added or updated

 

  • Fonts
  • Intranet site logos
  • Colours
  • Navigation components
  • Text elements
  • Tables
  • Buttons
  • Vertical tab menus
  • Screen background colour
  • Mobile icons
  • Widget branding
  • Intranet Footer

 

Font face

 

Specify the font face used on the site. This would typically be the font face defined in your organisations visual brand guidelines or web style guide.

URL reference: admin/branding/font-face

 

Adding a font

 

  1. Name the new font family you want to import and use on your intranet.
    Example ‘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 type options to add the font file.
    EOT: Embedded Open Type
    TTF: True Type File (This is the most common format used)
    WOFF: Web-only font format
    SVG font file
  5. Select the ‘Choose File’ button
  6. A dialog modal window will open to view files on your local drive
  7. Select the font file you would like to add. For example ‘OpenSans-Bold.ttf’
  8. Select ‘Submit’
  9. You should see the file name displaying next to the ‘Choose File’ button.
  10. You can scroll down to the ‘Add another item’ to repeat this process if you wish to add another font file
  11. When you have added the font files you want to use you can scroll down and select the ‘Submit’ button

The fonts are now added to your intranet

 

Remove a font file

 

You can remove a font file by:

  1. Selecting the ‘Remove font’ check box located below the listed font files
  2. Remove all font file settings but selecting the ‘Remove all settings’ button

 

Export font face settings

 

  1. Select the ‘Export font face’ text button to export the font face settings

Example screen with empty fields or font files

 

Example screen with completed CSS Font Family field

 

Example screen with added TTF font file

 

Import font face settings

 

  1. Select the ‘Font face import’ tab.
  2. Import font face setting by uploading a JSON file created from a previously exported settings 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_font_face_values.json’’
  6. Select ‘Upload’
  7. You should see the file name displaying next to the ‘Choose File’ button.
  8. Select the ‘Submit’ button
  9. View ‘Font face settings’ tab

The fonts are now added to your intranet

 

Example of font face import (no upload)

 

Example of font face import and uploaded json file

 

Linking the new font files to your intranet text elements

 

Once you have added the new font files to your intranet you need to go to the  ‘Font’ screen to link the new font styles to your intranet text elements.

 

Font (Font family)

 

Specify the font family used for text elements.

URL reference:  admin/branding/font

On this screen, you can choose specific text style for your intranet and link it to your own uploaded font faces.

  1. Add a CSS selector to column one. Some examples are:
p paragraph
body body
h1 Heading one
h3, h4 Heading three and four
.breadcrumb <div class=”breadcrumb”>

 

1. Other selectors for less common text elements can be identified by using Inspect element.

2. Add the name of your font family in column two. For example if you uploaded the font face ‘OpenSans-Bold.ttf’ and gave it the CSS font family name of ‘Open Sans Bold’ then you can add this name ‘Open Sans Bold’ to the ‘Font family’ text field.

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

4. Once you have linked font family and selectors you can apply these changes by selecting the ‘Submit’ button

The font family are now added to your intranet

 

Example css selectors and family fields (Empty)

 

Example css selectors and family fields (Complete)

 

Export font-family settings

 

1. Select the ‘Export styles’ text button to export the font family settings

 

Import font face settings

 

1. Select the ‘Font family import’ tab.

2. Import font family setting  by uploading a json file created from a previously exported settings using the export functionality described above.

3. Select the ‘Choose File’ button

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

5. Select the font file you would like to add. For example ‘intranet_font_family_values.json’

6. Select ‘Upload’

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

8. Select ‘Submit’ button

9. View ‘Font family settings’ tab

The font family are now added to your intranet

 

Example added json file before uploading

 

Example uploaded JSON file

 

 

Remove a 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 the ‘Submit’ button

 

Font sizes

 

Set the font sizes for specific text elements.

URL reference:  admin/branding/font-sizes

On this screen you can change:

 

Font size for heading sizes from the default

 

1. Choose option from select menu (combo box)

2. Select ‘Submit’ button

 

Example heading sizes set to default

 

Font size for specific css selectors

 

1. Add selector into column one. For example ‘.pane-latest-comments .pane-title’

2. Choose an option from the select menu (combo box) in column two

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

4. Select the ‘Submit’ button

The font sizes are now updated for your intranet

 

Example of css selector field (empty) and font size (default)

 

 

Example of css selector field (completed) and font size (set to 24px)

 

 

Export font size settings

 

1. Select the ‘Export styles’ text button to export the font size settings

 

Import font size settings

 

1. Select the ‘Font sizes import’ tab.

2. Import font-family setting by uploading a JSON file created from a previously exported settings 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_font_values.json’

6. Select ‘Upload’

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

8. Select the ‘Submit’ button

9. View ‘Font sizes’ tab

The font sizes are now updated for your intranet

 

Example of font sizes import (no upload)

Example of font sizes import (no upload)

 

Example of font sizes import (uploaded json file)

 

Remove a font size

 

You can remove a font size from a selector by:

1. Deleting the selector field in column one.

2. Select the ‘Submit’ button

 

Example of css selector field (empty) and font size (default)

 

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.

 

Intranet site logo displayed on main navigation bar

 

Adding a new site logo

1. Select the ‘Browse’ button

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

 

Example of screen with buttons for adding image files

 

Removing a new site logo

1. Select the ‘Remove’ button

 

Example of ‘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

 

Example of uploaded favicon file

 

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)

 

Preview of many of the components that can be updated on this screen

 

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

 

Example of colour values for the Navigation bar

 

Method 2

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

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

 

Example of colour schemes from the colour set options

 

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

 

Example of naming and adding a new colour scheme to the colour set

 

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

‘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’

 

‘Delete current set’ button

 

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

 

Example of colour settings import (no upload)

 

Example of colour settings import (uploaded json file)

 

 

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

 

Example of widget style with no widget branding

 

 

Example of widget style with widget branding

 

 

Save or export widget branding styles for your intranet

 

Example of screen with input fields

 

 

Example of screen with input fields completed

 

 

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

 

Example of widget styles import (no upload)

 

 

Example of widget styles import (uploaded json file)

 

 

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.

 

Example of logo for top bar

 

 

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

 

Example of logo for top bar

 

 

Example of background image in profile background for mobile

 

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

 

Mobile screen buttons

 

 

Removing the image

  1. Select the ‘Remove’ button

 

Mobile screen uploaded image files 

 

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

 

Footer screen input fields

 

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

Sign in screen editable regions

0 Comments

Leave a Reply