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
- Name the new font family you want to import, e.g. ‘Open Sans Bold’
- Choose a font style or leave as ‘Normal’
- Choose a font weight or leave as ‘Normal’
- You can then choose from 4 file types to add the font file
- Select ‘Add File’ to view files on your local drive and upload
- Select the font file, e.g. ‘OpenSans-Bold.ttf’
- Select ‘Submit’
- The file name should display next to the ‘Choose File’ button
- Scroll down to the ‘Add another item’ to repeat and add another font file
- Once you have added the font files, select ‘Submit’
Remove font face
- Select the ‘Remove font’ checkbox below the listed font files
- At the bottom of the page, select ‘Remove’
Export font face
- Select the ‘Export font face’ at the bottom of the page
Â
 Import font face
- Select the ‘Font face import’ tab
- Import font face by uploading a JSON file from a previous export
- Select ‘Add File’ to view files on your local drive and upload
- Select the font face file to add, e.g. ‘‘intranet_font_face_values.json’’
- Select ‘Upload’
- The file name will display next to the ‘Add File’
- Select the ‘Submit’ button
- 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
- 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
0 Comments