Theme guide itslearning - Guía para realizar el tema en Itslearning
-
Upload
itslearning-mexico -
Category
Education
-
view
50 -
download
3
Transcript of Theme guide itslearning - Guía para realizar el tema en Itslearning
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