eFront's look and feel are based on Bootstrap 3 but can be customized WITH custom themes. All installations come with a collection of pre-installed themes, available to use or customize to your 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 to 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

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;
}