Set Up the User Interface (UI) for Your University

As a University Administrator, you have the ability to configure the look and feel of your University. Do you want to add a banner image to your home page or change your university Favicon? This article will go over this and much more.  

Want to skip ahead? The below links will take you to articles on topics over other areas covered later.

• Content
• Theme
• Navigation
• Options

Accessing the User Interface

Go to Admin > Settings > University > User Interface

NOTE: If the User Interface tab does not display for you, please contact your Customer Success Manager or send an email to [e-mail].

You will now be on the Content editor tab. The Content editor is where you can add custom Homepage and Course Category Blocks.

Content Tab

The Content section of the User Interface tab is where you can configure the layout and design of the Homepage and Course Catalog landing page of your university.

Content-Homepage

This will be the section you will use to update the Homepage content with current programs or messaging that you want learners to see when they first access (anonymous view) or log in to your university. 

Content- Course Catalog

The Course Catalog section of the Block Content editor page is where you can configure the design and layout of the primary catalog page and functions just like working with the blocks for the Home page. This is the page a learner would see if they clicked the word Catalog or Training Library from the homepage top navigation bar. (You can configure how you want the name of the catalog to be displayed in your university.) 

Theme Tab 

The Theme section of the User Interface tab is where you can configure the default color palette, font, University logo, and Favicon logo. 

Theme - Theme Settings

• Upload the logo that will display in the upper left header (PNG, JPG, or GIF image, max 320x150 px)
• Upload the favicon image that will display on the window tab (.ico bitmap image, 16x16 px)
• Upload the header background image that will display across the top of the university (behind the logo) (PNG, JPG, or GIF image, 1200 px wide, minimum 100 px tall)

Theme - Color Palette

The color palette section of the Theme editor enables you to configure the default colors for many areas of your university. There is a preview box next to the color fields which show you what your university will look like with your selected colors. For each area, you can set the color in one of two ways:

• Enter the Hex color code (e.g. #000 for black)
• Click the circle icon next to the Hex code field and select your color from the color picker

Navigation Tab

The Navigation Tab allows you to configure the top-level navigation, the bottom navigation for mobile viewing and social links.

Top Navbar Links (Desktop & Tablet)

You can configure the top-level navigation for learners accessing your university via a Desktop or Tablet (Mobile navigation is configured separately).

As you add links, the Menu Preview Area will show you how the navigation menu will look for your learners.

NOTE: You can use the “click and drag” bars to the left of the menu items to rearrange the order of display on the menu or create a nested (dropdown) experience. (See the Courses menu item in the following example screenshot.)

Create Your Navigation Menu

1. Click Add Link
2. Enter the following information for the navigational menu item:

• Target: Open in New tab/Window or open in Current Tab/Window
• Link Name: Name of the menu item to be displayed to learners
• Link to: What area of the university or external URL the menu item open

Navigation-Bottom Navbar Links (Smartphones)

The first three items for mobile navigation of your university may be selected from the links available. Search and More are required. All links not selected as one of the first three will be automatically included in the More section. 

Navigation- Footer Content

You can select optional social links, such as Facebook, to be included in the footer of your university, by selecting the various links and then entering the appropriate URL for your page or account.

Option Tab

The Options section is where you can set several default options for your university, such as page width, default calendar view and course completion units display for the learner's transcript page.

NOTE: BlueVolt recommends that the Homepage max width between 1200–1900px to ensure maximum readability for most desktop users accessing your university via a laptop.