Дизайн #1725
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из контактной информации, ссылок на страницы авторизации/регистрации, логотипа и названия сайта, пунктов меню и строки поиска.
Чтобы изменить контактную информацию перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта.
И в строках с по измените: контактный email
<a href="#" class="email">email@email.com</a> (строка 31)
и вместо email@email.com - напишите свой email.
номера телефонов:
<a href="tel:+1234567890">+1(234)5678900</a> (строка 33) <a href="tel:+1234567890">+1(234)5678900</a> (строка 35)
и вместо +1234567890 - напишите свои номера.
Для указания ссылок к социальным сетям перейдите к строкам 21-30:
<div class="soc-block"> <span><a href="https://vk.com" target="_blank" class="fa fa-vk"></a></span> <span><a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a></span> <span><a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a></span> <span><a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a></span> <span><a href="https://plus.google.com" target="_blank" class="fa fa-google-plus"></a></span> <span><a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span> </div>
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Чтобы изменить логотип нужно перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта. Вам требуется 7 строчка кода:
<a class="logo-img" href="$HOME_PAGE_LINK$"><img src="/.s/t/1725/logo.png" alt="logo"></a>
Вместо /.s/t/1725/logo.png укажите свою ссылку на свое изображение.
Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 66 строке кода:
header {background-color: #121212;min-height: 120px}
#121212– фон шапки сайта. Его можно изменить на любой другой html-цвет.
2. Как изменить промо-блок?
Промо-блок состоит из двух частей, изменить которые Вы можете перейдя в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.
Для изменения первой части - слайдера, перейдите к строкам 2-41.
Данный слайдер состоит из 3 слайдов, строки 4-15, 16-27, 28-39 в каждом из которых можно изменить:
Изображение:
<img src="/.s/t/1725/main.png" alt="photo">
/.s/t/1725/main.png - является ссылкой на данное изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Текст:
<div class="title">1 Lorem Ipsum</div> <div class="desription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo in scelerisque vehicula, nisl lorem euismod quam, nulla lectus sed felis.</div>
Кнопку:
<div class="btn"><a href="#">More</a></div>
где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода. Для изменения второй части - информативных блоков, перейдите к строкам 56-100.
Для каждого блока, строки 58-65, 69-76, 80-87, 91-98 можно изменить:
Изображение:
<div class="img-wrap"><img src="/.s/t/1725/ship.svg" alt="img"></div>
/.s/t/1725/ship.svg - является ссылкой на данное изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Текст
<div class="information-ttl">Mauris commodo</div> <div class="information-ds">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur dolor est fugiat impedit libero maxime necessitatibus ratione vitae. </div>
И ссылка для перехода к материалу:
<div class="information-btn"><a href="#">Read more</a></div>
где Read more – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.
Также вы можете использовать информер для этого блока, который будет выводить, например, последние материалы определенных модулей. Обязательным условием является наличие изображения у материала.
Тогда в коде шаблона удаляем строки 57-99 и вместо них пропишите код необходимого созданного информера $MYINF_1$
При создании или редактировании информера необходимыми параметрами являются:
- Тип данных: Материалы
- Количество материалов: 4
- Количество колонок: 1
А шаблон информера будет иметь вид:
<div class="info-block"> <div class="info-center-block"> <div class="img-wrap"><img src="$IMG_URL1$" alt="img"></div> <div class="information-ttl">$TITLE$</div> <div class="information-ds">$MESSAGE$</div> <div class="information-btn"><a href="$ENTRY_URL$">Read more</a></div> </div> </div>
Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: /tools/informery
3. Как сделать, чтобы промо-блок отображался не только на главной странице?
По желанию, вы можете изменять условие для вывода промо-блок на различных страницах вашего сайта.
Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц модулей в условии
<?if($PAGE_ID$='sitePage1')?> <?endif?>
или добавить условие для вывода в нужных модулях:
<?if($MODULE_ID$='forum')?> <?endif?>
Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.
4. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 55 строке кода:
body.base { background-color: #f3f3f3;}
#fff – фон сайта. Его можно изменить на любой другой html-цвет.
5. Как изменить цвет блоков?
Блоки не имеют изображений или каких-то других особенностей. Цвет блоков зависит от фона сайта.
Для изменения фона сайдбара перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 110 строке кода:
.sidebar {float: right;background: #fff;width: 25%;}
#fff – фон сайдбара. Его можно изменить на любой другой html-цвет.
6. Как изменить нижнюю часть сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 348 и 356 строке кода:
.top-footer-part {background-color: #fbc81f;padding: 20px 0}
.bottom-footer-part {padding: 10px 0 70px;background-color: #121212}
#fbc81f и #121212 – фон нижней части сайта. Их можно изменить на любой другой html-цвет.
Также в нижней части расположены контактная информация и иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 12-19 укажите свои ссылки на аккаунты в социальных сетях:
<div class="soc-block"> <span><a href="https://vk.com" target="_blank" class="fa fa-vk"></a></span> <span><a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a></span> <span><a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a></span> <span><a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a></span> <span><a href="https://plus.google.com" target="_blank" class="fa fa-google-plus"></a></span> <span><a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span> </div>
7. Какой цвет основных элементов сайта?
Цветом цветом основных элементов сайта является #fbc81f.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #fbc81f на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.