Theme design guide

2013

Theme Form

Theme properties that the

user can change:

Theme variables

Values

Header background color (hex):

Logo (height 47px, max-width 680px):

transparent PNG only

Header background image (1280x120px):

png only

** Main navigation background color (hex):

** H1 color (hex):

**Default content block color (hex):

** Default H2 color (hex):

!
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

Refrence

Logo !

Header background image

(height 47px,max-width 680px)

Header background color

Main navigation bgcolor

Small header enabled

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

Refrence

Default H2 color

Default Content Block color

6
7

H1 color

Top banner

Logo

Remember!

height = 47 pixels - width = max 680px

to keep clearing space for the top right menu to

Top banner

avoid overlapping between logo and menu

height = 120 pixels

logo
{

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

min height 42px

Top banner
width = 1280 pixels

Content
Block

title

lor,
o
c
ult
a
f
e
D

by
d
e
defin

me
o
t
s
cu

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.

Design tip

logo

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.

sidebar

main content

2013