Branding your site

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

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

  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

Example of font face import (no upload)

 

Example of font face import and uploaded json file

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’

 

Example css selectors and family fields (Empty)

 

Example css selectors and family fields (Complete)

 

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

Example added json file before uploading

 

Example uploaded JSON file

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’

Example heading sizes set to default

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’ 

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’

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)

Example of font sizes import (no upload) 

Example of font sizes import (uploaded json file)

 

Remove  font size

1. Delete the CSS selector field

2. Select ‘Submit’ 

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