What is a Brand?

Every Portal is associated with a brand which identifies it and segments the user accounts within it. This offers significant flexibility in communicating your own branding identity to users, or a white labelled experience for a subset of your customers. 

 

For instance, you could easily create a portal for your internal staff for their training use, and then another for external clients who are paying for their training. Either portal would be customized to look and feel different, including such things as colors and fonts, but also more advanced elements like signup handling, catalog management and display, and even navigation logic. 

 

Creating & Managing Your Brands

To navigate to the Brands section, click on the Portal Branding icon in the Control Panel

The “Brands” entry page in the Administrate TMS is a grid view displaying the various brands you have in place.

In this case, we can see four: one for external clients, two for specific external clients and nobody else, and then one for the company’s internal staff training. Note as well that the top brand “Administrate University - External Clients” has the “DEFAULT” status on it, meaning that by default, new users that do not have a branding association will be routed to this portal.

 

Adding a new one is as simple as clicking the “Create Brand” button on the right, which has the effect of just making a titled placeholder, after which you have to go in and apply your brand settings. 

 

Let’s take a look at a brand that’s already in place.

Brand Details

The “Brand Configuration” page lands on “Brand Details” which you can update at any time. 

Click the blue “Edit” button to see how.

The edit dialogue allows you to update your brand name as needed - note that this brand name is only used by your internal staff for brand differentiation and is not ever seen by your portal audience. You can identify whether the brand is the default here, and also enable or disable it as well.

 

Styling

Note that upon entry,  the top of this page provides a preview of the “Login” screen your users will interact with every time they navigate to the learning portal. Below this, you can see a variety of “Styling Details” settings, as well as headers for “Buttons”, “Typefaces”, and “Images. Let’s edit some of these to see how it works.

Styling Details

To change the look and feel of your portal, click the blue “Edit” button on the right side of the “Styling Details” header.

Base

Expand the Base section to change the color of the text used throughout the portal, the navigation background color and text, and the brand colors.

 

Text: Changes the color of the text used throughout the portal.

To modify the text color, enter a hex color code in the Main field. The new color will be applied to the text shown in the Login Screen, Course / Learning Path Cards, Description, Event Information, Cart Page, and Checkout Page.

• • Let’s make the font in the dialogue red using a hex color code.
  • Type “FF5733” into the Text - Main area.
  • The change is immediately reflected in the dialogue.

 

Navigation: Changes the Top Navigation Section background color and text of the checkout screen (if you have your course catalogue linked to your Student Portal so they can register/purchase more courses).

To start, click the down arrow to the right of “Login” at the top right and click Checkout.

 

Nothing on this screen has been impacted by this change. Let’s instead change the navigation background here from black to red.

Now, let's edit the background color of the checkout screen navigation color:

• Click into the “Background” field to the right of “Navigation.”
• Type “FF5733”.
• Note that the background in this dialogue is now also red.
• The change is immediately reflected in the dialogue.

You can also edit the color of the breadcrumb text shown in the Navigation section (seen here as "< Back to Catalog"). 

• Click into the “Contrast Text” field which is displayed to the right of Background field.
• Type “#FFFF00”.
• Note that the breadcrumb text in the Navigation section is now yellow.
• The change is immediately reflected in the dialogue.

Brand Colors: Changes the background and text colors of the Title Section in the checkout screen.

Let's edit the background color of the Title Section:

• Click into the “Primary” field to the right of “Brand Colors.”
• Type “5AC18E”.
• Note that the background color of the Title Section is now green.
• To edit the color of the progress bar and text shown in the Title Section, type the hex color code in the "Contrast Text" field.

Buttons

• Let’s make some quick changes to buttons.
• Click anywhere on the “Buttons” line.
• Click into the “Border Radius” field.
• Type “15”.
• Note how our login button is now rounded
• To change the background color of the button, enter a hex color code in the "Button" field.
• You can also change the color of the button text by typing a hex color code in the "Contrast Text" field.

 

Typefaces

As you can see, the font has been configured to use “Arial” as the primary font, and "Georgia" as the fallback. 

 

Images

All images must be stored in the DMS (Document Management System). To add an image:

• Click Add Image
• If already exists in your DMS, choose 'Existing from DMS', otherwise you can upload a new file.

• Once you've selected your new image it will appear in the Preview automatically

 

Welcome Message

Here, you can add a Welcome Message to introduce the LMS to your delegates. You can use this message to communicate information about your company, provide general information about how to complete subscribed courses, and how to get assistance.

Preview: At the top of the page, you can see a preview of the “Welcome Message” that your delegates will see in the LMS. 

In the Details section below the Preview, you can enable or disable the welcome message, add an Image to the message header, and modify the text of the message. 

Enable/Disable: Clicking the Enable button to display the Welcome Message in the LMS. 

• Note that the Welcome Message is disabled by default. Once enabled, it will be displayed the first time a delegate logs in to the LMS. 

Image: Optionally, you may choose to add an image to the Welcome Message header. All images must be stored in the DMS (Document Management System).

To add an image:

• Click Add Image
• If already exists in your DMS, choose 'Existing from DMS', otherwise you can upload a new file.
• Max dimensions - 898 px (width) x 150 px (height)
• DMS File Size Limit = 4GB

Message: Your welcome message can be entered as either plain text, or HTML. This text will appear in the Preview section and when enabled, your delegates will see the same welcome message in the LMS.

 

Communications

This is the sending address that gets associated to any emails that come from the system; specifically, password setup and reset emails. This can easily be updated whenever you need by clicking edit. Note, your sending addresses must already be setup and validated.