Создание темы оформления

eFrontPro оформлен при помощи Bootstrap 3, который доступен для свободного пользования. Вы можете изменять оформление вручную и при помощи тем оформления, которые уже установлены по умолчанию. Тема оформления - набор стилей CSS и иногда скриптов JavaScript.

 

Настройка фона

Для изменения фона страниц вы можете изменять стиль body:

body {background: #d9e5aa;}

Добавление фонового изображения

Для добавления картинки вместо фонового изображения добавьте ссылку на это изображение (картинка должна быть доступна через интернет):

body {background-image:url('ссылка'); opacity:0.9;  background-size:cover;}

Настройка шрифтов

Настройка шрифтов осуществляется путём изменения параметра:

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

Изменение стилей блоков

Ниже представлены примеры изменения стилей для блоков, из которых состоят страницы eFrontPro:

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

Изменение разметки страниц

Ниже представлен пример изменения стилей таблиц:

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

 

Изменение панели навигации

Горизонтальная панель навигации отображается всегда сверху и позволяет получить доступ к некоторым функциям eFrontPro:

/*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";  
}

Изменение кнопок

Большинству кнопок присвоен класс "primary":

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

 

Возможно, вам будут интересны и эти статьи: