Design your Brand Portal

A brand portal provides increased flexibility when designing your portal according to your visual identity. You can incorporate colours, fonts, and typography. You can also design the header and footer of the page. In this way, you create a cohesive appearance that reflects your brand identity.

Under the Portal tab in the Mediaflow sidebar, you will find an overview of all your portals. To access the portal's admin mode, click the pen to Edit the respective portal.

Under the Design tab, you will find all the settings for your portal's appearance. While editing you can freely navigate your portal and see how it is affected by the different design settings. Changes to the design are instantly visible in the interface, and you don’t have to save them to preview them.

Good idea to start with the design settings

As the various options in the blocks are based on your design settings, it’s a good idea to begin by making these settings when you set up your portal.

General

Colours

You can add colour codes for the colours you wish to use for various elements in the portal. This may include your primary brand colour, background colours for the block designs, and text colours. Under Alternative Colours, you can specify any number of colours that exist in your brand. The colours will then be available in all places where colour changes are possible with the exception of text colours.

Light and Dark Colours

You need to define both a light and dark colour for headings, text, and backgrounds. This way, you can easily vary the design in the blocks.

Grid and Blocks

Specify the allowed size for the pages width, text width and block padding in your portal. These are affected when the page is scaled up or down on different devices.

Fonts

Choose which fonts you would like to use in the portal. You can select from one or a combination of the following options:

1. Predefined system fonts

2. Directly link to Google Fonts

3. Link to custom fonts available on a server, such as your website, by linking to a CSS file.

Custom Fonts

To add custom fonts, click on Add New Font > Font Source > Custom Font. Then select the relevant styles and name your font. Under Font URL, provide a link to a CSS file with a font-face list, for example, from your website. This file should contain links to the styles you have chosen. Once you have added a new font, it will appear in the list of available fonts.

Below is an example of a CSS file with links to font styles. Please note that font-style and font-weight must match your selections of styles under Styles.

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('https://www.example.com/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://static.mediaflowpro.com/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
}
/* source-sans-pro-italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local(''), url('https://www.example.com/fonts/source-sans-pro-v14-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('https://static.mediaflowpro.com/fonts/source-sans-pro-v14-latin-italic.woff') format('woff');
}

Example of how to set up a custom font:

Typography

Under this tab you specify the style for headings and text to ensure a consistent and visually appealing reading experience in your portal.

Utilise the Portal Design Page
The example page Portal Design, helps you gain an overview of how your design settings affect the pages in your portal. Visit the page while making changes, as it updates automatically to show you how the page looks.

 

Buttons and Links

Customise the appearance of buttons and links in your portal by specifying fonts and colours for the various buttons.

Header

Make settings for the appearance of the portal's header. You can upload your logo and design the navigation at the top of the page.

Sidebar

Make settings for the colours and navigation of the sidebar. This will be visible on the pages where you have chosen to display sidebar navigation.

Footer

Use this tab to design your portal's footer. You can change the colour of the footer's background, text, border and links.

Forms

You can change the settings for text and colour of buttons in embedded forms within the portal. These forms will appear if you have chosen to enable usage reporting in your portal or if you allow visitors to retrieve embed codes for videos.

Files

Here, you make design settings for the Files block which allows you to display files from your Mediaflow account and enable downloads. You can choose between a light or dark background. You can also specify whether files with transparency should have a checkered background or not.