Theme design guide

2013

Theme properties that the user can change: !Like any well designed web application, itslearning focuses on the user experience and usability is an importent aspect of this. We know that many of our customers would like to customize the UI to reflect their graphical profile and branding. !!There are three main areas in the itslearning UI: the header, the left sidebar and the main content area. To ensure the best user experience, the sidebar and the main content* area cannot be customized by the customer. !!In the header area our customers can change background colors, menus, logos and header images, to brand itslearning as they like.!!* except the default Content Block color!

** Cannot be #fff

Theme Form

Theme variables Values

1 Header background color (hex): #

2 Logo (height 47px, max-width 680px): transparent PNG only

3 Header background image (1280x120px): png only

4 ** Main navigation background color (hex): #

5 ** H1 color (hex): #

6 **Default content block color (hex): #

7 ** Default H2 color (hex): #

12 3

4

Refrence

Header background color Header background imageLogo !

(height 47px,max-width 680px)

Main navigation bgcolor

Small header enabled

With the small header enabled, the user logo will be replaced by a square itslearning logo.

6

5

7

Refrence

H1 color

Default H2 color Default Content Block color

logo

Logo

height = 47 pixels - width = max 680px

Remember!

to keep clearing space for the top right menu to avoid overlapping between logo and menu

Remember!

Graphics in the header should be placed above this line (height = 42px), to avoid conflict with the tabs.

min height 42px

Top banner

height = 120 pixels

Top banner

width = 1280 pixels

Top banner

{ 👤✉🔔

Color alternatives There are ten top-border colors to chose from in the Content Blocks. !Nine are predfined, the customer can set one default color to match their design.

Content Block

title Default color

, defined b

y customer

sidebar main content

A tip regarding background color for the header: !itslearning uses a layout that looks best when the header uses a color that provides a nice and balanced contrast to the body area. Since this is a light grey color, white or very light tones should be avoided as a solid background color for the header. !!Remember that the main navigation should also have a nice and balanced contrast to the header and the main content area. This will help your users to easily navigate the application.

logo

Design tip

$

👤✉🔔

2013