Site Tools

 
 
 

how_to_create_a_theme

How to create a theme

eFrontPro's look and feel is based on Bootstrap 3, but can be customized by using custom themes. All installations come with a collection of pre-installed themes, available to use or customize to anyone's needs. Theme customization is solely based on the use of CSS and optionally Javascript code. Below we will share some tips on how to quickly put together a theme that is suitable for your use case.

Setting Basic colors

To change the overall background, style the body element:

body {
  background: #d9e5aa;
}

Using a background image

You can set a background image as your site's background, using the image's URL (the image must be accessible via the web).

body {
  background-image:url('https://c626fd9a3ea7d7aaf25a-13df01e1540c03f09828a4c08555f8b9.ssl.cf2.rackcdn.com/back13.jpg');
  opacity:0.9;
  background-size:cover; 
}

Increase or decrease the opacity to determine how opaque your background will appear.

Customizing Fonts

Set a font-family style to your body element, to change the font used throughout the platform:

body {
  font-family: 'Open Sans', sans-serif;  
}

Changing Blocks

Blocks are the main container element used throughout the system and you can customize any aspect you wish. Below you can find some basic examples:

/*Box Titles*/
div.block .title {
  background:#FFF;
  border: 4px solid #ccc;
  border-bottom: 0px;
  position: relative;
  top: 8px; 
}
 
/*Box Content*/
div.block .content {
  border: 4px solid #ccc;
  box-shadow: 0 1px 1px rgba(0,0,0,0); /*shadow*/
  border-radius: 8px;
}
 
/*Handle in a different way blocks within a block*/
div.block div.block .content {
  border: 0px;
}
 
/*Hide top left radious when then block has a Header*/
div.block .blockHeader ~ .content {
  border-top-left-radius: 0px;
}
 
/*Consistency with toolbars*/
div.block .toolbar {
  border: 4px solid #ccc;
  border-bottom: 0px;
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px;  
}
 
/* Hide radious on box after a toolbar*/
div.block .toolbar ~ .content {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top:0px;
}

Changing Grids

Grids are the tables listing users, courses etc. You can customize their look and feel via css using classes similar to the example below:

/*Grid table*/
table.sortedTable {
  background-color:#d9e5aa;
  top: 2px; 
  border-radius:4px;
}
/*Odd rows*/
tr.oddRowColor {
  background: #e9f5ca;
  border-bottom: 1px solid #D0D0D0;
  border-top: 1px solid #D0D0D0;
}
 
/*Even rows*/
tr.evenRowColor {
  background: #edf9da;
}
/*On hover above row color*/
tr.oddRowColor:hover,tr.evenRowColor:hover {
  background: #C7D7F3;
}
/*Grid footer*/
td.sortedTableFooter {
  background-color:#d9e5aa;
}

Customizing the navbar and breadcrumb

The navbar is the horizontal bar appearing on top of every page. The breadcrumb bar is the path row right below the navbar. Customizing these is easy, as can be seen in the examples below:

/*Navigation bar color*/
.navbar-inverse {
  background: #d7e7d5; /*Background color*/
  border:0px;
}
 
/*Breadcrubs external layer*/
.breadcrumb-x {
  background: #81CF81; /*Background color*/
  border-bottom: 2px solid #3B993B;
  border-top: 2px solid #3B993B;
}
 
/*Breadcrumb internal layer*/
.breadcrumb {
  background: #81CF81; /*Background color*/
  color:#FFF;
}
 
/*Breadcrumb separator*/
.breadcrumb > li + li:before {
  color: #000;
  content: "\003e";  
}

Changing buttons

Most of the buttons in the system bear the “primary” class, thus you can alter them as follows:

/*Main button color*/
.btn-primary {
  background-color: #3B993B;
}
 
/*Main button hover color*/
.btn-primary:hover {
  background-color: #0D5F0D;
}