Делаем проект на adCMS уникальным. Часть третья - меняем цветовое оформление сборки adBetter.

Продолжаем уникализировать наш сайт на сборке adBetter. В сборке реализован механизм цветовой схемы следующим образом: все файлы стилей вынесены в отдельные таблицы стилей которые называются color1.css, color2.css и так далее. Для того чтобы создать свою цветовую форму нам нужно создать свой файл стилей, можете назвать его как угодно color5.css, mycolor.css вобщем название значения не имеет, главное не забудьте подключить его к шаблону. Давайте разберем пошагово действия которые необходимо будет сделать для подключения своего цветового оформления сайта на купонной сборке adBetter:

1. Находим на сервере папку /templates/css там размещены все файлы каскадных таблиц стилей(.css), в папке по умолчанию содержатся следующие файлы:

  • bootstrap.css
  • bootstrap.min.css
  • color1.css
  • color2.css
  • color3.css
  • color4.css
  • jquery.ias.css
  • style.css

таблицы стилей которые отвечают за цветовое оформление сайта находятся в файлах - color1.css, color2.css, color3.css и color4.css

2. Создаем свой файл стилей к примеру color5.css и копируем содержимое файла color4.css в него.

3. Подключаем файл таблицы стилей color5.css во ВСЕ шаблоны, которые находятся в папке templates/ их три:

  • index.html
  • nobar.html
  • shop.html

подключить их очень просто, если вы создали файл стиле с названием color5.css вам достаточно найти строчку

	 < link href="/templates/css/color4.css" rel="stylesheet" >

и заменить color4.css на вашу таблицу стилей, в нашем случае color5.css  и строка будет выглядеть так:

	 < link href="/templates/css/color5.css" rel="stylesheet" >

4. Далее нам понадобится сервис на котором мы сможем сгенерить код цвета, мы испльзуем  встроенный колориметр mac os или веб-сервис http://www.colorzilla.com/gradient-editor/

5. Мы создали и подключили наш файл стилей color5.css (обязательно нужно удалить предыдущий файл стилей который был подключен, color4.css или другой, это очень важно!), вооружились колориметром, нам осталось назначить свои цвета блокам сайта, для этого мы заходим в наш файл таблицы стилей - color5.css(ну или как вы его назвали) и начинаем менять цвета. Даже если вы не обладаете глубокими познаниями в css все достаточно просто, вам важно знать два тега background - это задний фон блока и color - это цвет текста в этом блоке.

Скопированный код из файла color4.css будет выглядеть так:

/* Основной фон шаблона */
	body {background: url('/templates/img/body-bg.jpg');color: #333; font-family: 'Tahoma', sans-serif;} /* Цвет ссылок на сайте */
	a {color: #36393D;}
	a:hover {color: #22c3be;}
#search .form-control::-moz-placeholder {color: #FFF;opacity: 0.8;}
#search .form-control {background-color: #1b3b4e; box-shadow: none;color: #FFF;border: none;}
#search input:focus {border-color: transparent;box-shadow: none;border: none;transition: all 0.01s ease 0.5s;}

.form-control
:focus {border-color: transparent;box-shadow: none;border: 1px solid #73939E;transition: all 0.01s ease 0.5s;}
.filter
li a {padding: 5px 20px 6px;background: #ebebeb;}
.filter li a:hover {text-decoration: none; background:#73939E;color: #FFF;} /* Фон шапки сайта*/
.header
{background: rgba(0,45,79,0.7);color: #FFF;}
.header a {color: #FFF;} /* Фон подвала сайта */
#footer
{ background: url("/templates/img/footergr.png") repeat-x scroll center bottom rgba(0,45,79,0.8);color: #FFF;border-top: 5px solid #1B3B4E;}
#footer
a {color: #fff;} /* Фон верхнего меню сайта */
.menu-top {background:#1B3B4E;box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.1);} /* Цвет ссылок верхнемго меню */
.menu-top
ul li a {color: #FFF;} /* Цвет цифр в правой части шапки сайта обозначающих количество купонов и магазинов*/
#counter-top span {color: #FFF;} /* Цвет текста в правой части сайта */
#counter-top {color: #FFF;} /* Цвет ссылки комментировать в блоке новостей на главной */
.news-comment
, .news-comment:hover {color: #e44837;} /* Цвет блока под цифрой количества купонов в меню категорий в слайдере на главной и в категориях и карточке сайта */
.badge
{background-color: #36393D;} #cat-menu ul li:hover {background: #73939E;transition: all 0.5s ease 0s;} #cat-menu li:hover span {background-color: #FFF;color: #73939E;} /* Фон блока слева с соц кнопками в карточке купона */
.social-jump
{background: transparent;}
.left-jump {background: #FFF;border-top: 1px solid #DDD;border-left: 1px solid #DDD;border-bottom: 1px solid #DDD;color: #555;} /* Фон блока слева с датой окончания действия купона в карточке купона */
.action-end {background:transparent;} /* Фон кнопки слева в карчтоке купона*/
.button-jump
, .buttons {background: transparent;} /* Фон блока слева выгоды в процентах в карточке купона*/
.jump-sale-percent {background: transparent;} /* Фон блока фильтра в категории магазинов */ #filter-box {background: rgba(255,255,255,0.7);}
.list-coupon_button
{background:#E44837;color: #FFF;border-radius: 0;}
.list-coupon_button:hover {color: #FFF;transition: all 1s ease 0s;background: #000;text-decoration: none;}
.box-slide-bottom
button {background: #22c3be;color: #FFF;border-radius: 0;border: none;}
.box-slide-bottom
div span {color: #c72439;}
.box-slide-bottom
div {color: #898989;} /* Цвет фона заголовка вкладок и заголовка новостей на главной*/
#news-box-header, .nav-tabs {background: rgba(0,45,79,0.6);color: #FFF;}
#news-box-header a, .nav-tabs a {color: #FFF;}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {background-color:#0A2E44;border: medium none;color: #FFFFFF;} /* Фон карточки купона в карточке купона*/
#coupon-card {background: rgba(255,255,255,0.7);} /* Цвет стрелки кнопки вверх */
.top_button
{color: #36393D;}
.cat-in-card h5 {background: #36393D;}
.cat-in-card ul li:hover {background: #36393D;transition: all 0.5s ease 0s;}
.cat-in-card
ul li:hover a {color: #fff;text-decoration: none;}
.cat-in-card li:hover span {background-color: #FFF;color: #36393D;}
.box-news {color: #777;} /* Оформление кнопки подписки слева */
.btn-jumper
, .btn-cat-jumper {background: rgba(0,0,0,0.4); color: #FFF; border-color: transparent; border-radius: 0;}
.btn-jumper:hover, .btn-cat-jumper:hover {background: rgba(0,0,0,1);transition: all 1s ease 0s;}
#bottom-menu h6 {color: #FFF;}
#bottom-menu ul li:first-child {border-top: none;}
#bottom-menu ul li {border-bottom: 1px solid #000;border-top: 1px solid #acabb5;}
#bottom-menu ul li a {font-size: 16px; letter-spacing: 0.1px;} /*Цвет нижней части купона в списке */
.bottom_button {background: rgba(0,0,0,0.2);} /* Цвет фона купона в списке */
.list-coupon {color: #898989;background: url("/templates/img/copbg.jpg") repeat #EEE;} /* Цвет ссылки купона в списке */
.head-coup-link
a {color: #898989;}
.head-coup-link a:hover {color: #e44837;text-decoration: none;transition: all 1s ease 0s;} /* Оформление кнопки вверх */
.top_button
{border-radius: 0; background: #f8ca00; border: none;background: #000; color: #FFF; width: 50px; height: 50px;}
.top_button
:hover {background: #e44837;transition: all 1s ease 0s;}
.bottom_button_rub
span {text-shadow: none;} /* Оформление меню в слайдере на главной */
#cat-menu
ul li:hover {background: #36393D;}
#cat-menu ul li:hover a {color: #fff;text-decoration: none;}
#cat-menu li:hover span {background-color: #FFF;color: #36393D;}
.list-coupon_img {border: 0px solid transparent;}
.action-end
a {cursor: pointer; text-decoration: none;}

Допустим нам требуется изменить главный фон страницы и цвет текста на сайте, для этого нам необходимо отредактировать строчку:
/* Основной фон шаблона */
	body {background: url('/templates/img/body-bg.jpg');color: #333; font-family: 'Tahoma', sans-serif;}
к примеру цвет фона нам нужен серый (#EEEEEE) а цвет основного текста на страницах черный (#000000), код примет следующий вид:
/* Основной фон шаблона */
	body {background: #EEEEEE;color: #000000; font-family: 'Tahoma', sans-serif;}
по тому же принципу меняются остальные цвета на сайте. Достаточно установить у нужного класса цвет фона(background) и цвет текста(color).