Дизайн #1715
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из надписи названия сайта и пунктов меню.
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 4-5 строку кода:
<div id="site-logo"><span class="site-l"><span class="site-n"><a href="$HOME_PAGE_LINK$">$SITE_NAME$</a></span></span></div>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 24 строке кода:
#header{background:#fff; padding:13px 0; border-bottom:1px solid #eee}
#fff – фон шапки сайта. Его можно изменить на любой другой html-цвет.
2. Как изменить промо-блок в верхней части сайта?
Промо-блок сайта состоит из 4 информативных блоков, для их изменения перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO. Для каждого из блоков вы можете изменять информацию на свою или же выводить в них информеры. В первом случае найдите следующие из участков кода 4-18, 19-33, 34-48, 49-63, и в каждом замените:
Изображение:
<div class="img-wrapper"><img src="/.s/t/1715/promo1.jpg" alt=""></div>
где /.s/t/1715/promo1.jpg – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Далее заголовок:
<div class="title"> <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. </h4> </div>
Дату:
<div class="promo-date">18/09/2017</div>
Текст:
<div class="promo-message"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum </div>
Кнопку:
<div class="link-holder"><a href="#">Read more</a></div>
где Read more – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.
Во втором случае для каждого блока вы можете использовать информеры которые будут выводить, например, последние материалы определенных модулей. Обязательным условием является наличие у материала изображения.
Тогда в коде шаблона удаляем строки 4-63 и вместо них пропишите код необходимого созданного информера $MYINF_1$
При создании или редактировании информера необходимыми параметрами являются:
- Тип данных: Материалы
- Количество материалов: 4
- Количество колонок: 1
А шаблон информера будет иметь вид:
<div class="promo-i"> <div class="img-wrapper"><img src="$IMG_URL1$" alt=""></div> <div class="news-descr"> <div class="title"><h4>$TITLE$</h4></div> <div class="promo-date">$DATE$</div> <div class="promo-message">$MESSAGE$</div> <div class="link-holder"><a href="$ENTRY_URL$">Read more</a></div> </div> </div>
Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: /tools/informery
3. Как сделать, чтобы промо-блок отображался не только на главной странице?
По желанию, вы можете изменять условие для вывода промо-блок на различных страницах вашего сайта.
Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц модулей в условии
<?if($URI_ID$='page1')?> <?endif?>
или добавить условие для вывода в нужных модулях:
<?if($MODULE_ID$='forum')?> <?endif?>
Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.
4. Как изменить фон шаблона?
Чтобы изменить фон сайта, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найти там 2 строку:
body{background:#f4f4f4; margin:0; padding:0; color:#6c6c6c; min-height:100vh; display:flex; flex-direction:column}
#f4f4f4 – это и есть цвет блока. #f4f4f4 можете заменить на любой другой цвет html.
5. Как изменить цвет блоков?
Для изменения цвета вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 133 строке кода:
.sidebox{margin:0 0 15px; border:1px solid #eee; padding:20px 30px 30px; background:#fff; font-size:13px}
#fff; – это и есть цвет блока. #fff можете заменить на любой другой цвет html.
6. Как изменить контент нижней часть сайта?
Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.
Она состоит из 3-х блоков дополнительной информации. Первый содержит надпись названия сайта $SITE_NAME$, которую вы указывали в общих настройках вашего сайта.
Краткое описание сайта - строки 8-11:
<div class="about-content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed voluptua. At vero eos et accusam et justo duo dlores et ea rebum magna text ar koto din. </div>
Контактную информацию - строки 13-18:
<h4>contact Info</h4> <p>123/4 NK Street, DC, USA</p> <p>Phone: +123 456 78900</p> <p>insert@your.email</p> </div>
Во втором блоке расположен слайдер, который состоит из 3 слайдов - строки 21-40, 41-60, 61-80, в каждом участке кода можно изменить Текст:
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut, autem delectus dignissimos ea eum, ex exercitationem expedita iure laborum laudantium modi non numquam pariatur rerum sapiente soluta tempore vel.Lorem ipsum dolor sit amet,consectetur adipisicing elit. Amet aut, autem delectus dignissimos ea eum, ex exercitationem expedita iure laborum laudantium modi non numquam pariatur rerum sapiente soluta tempore vel.</p>
Аватар:
<img src="/.s/t/1715/author.png" alt="">
Имя:
<h4>Sophia</h4> <h4>CEO, ReadyTheme</h4>
Третий блок содержит виджет Instagram, код которого Вам необходимо взять со своего аккаунта в Instagram, с инструкцией ознакомьтесь здесь https://www.instagram.com/developer/embedding/ После того как Вы получили код замените строки 84-101 на свои
Также в нижней части расположены иконки социальных сетей, для их изменения перейдите к строкам 110-116 и укажите свои ссылки на аккаунты в социальных сетях:
<div class="soc-box"> <span><a href="https://twitter.com/" class="soc-tw" target="_blank"></a></span> <span><a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a></span> <span><a href="https://vimeo.com/" class="soc-vi" target="_blank"></a></span> <span><a href="http://instagram.com/" class="soc-ig" target="_blank"></a></span> <span><a href="http://vk.com/" class="soc-vk" target="_blank"></a></span> </div>
7. Как изменить фон нижней части сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 179 строке кода:
#footer{padding:25px 0; background:#1a1b1d}
#1a1b1d – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
8. Какой цвет основных элементов сайта?
Цветом цветом основных элементов сайта является #ff9900.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #ff9900 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.