Дизайн #1801
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из надписи названия сайта, пунктов меню и строки поиска.
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 5 строку кода:
<a href="$HOME_PAGE_LINK$" class="site-n">$SITE_NAME$</a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 113 строке кода:
.header { background-color: #ec174f; color: #fff; margin: 0 auto; position: relative;}
#ec174f – фон шапки сайта. Его можно изменить на любой другой html-цвет.
2. Как изменить промо-блок?
Промоблок состоит из двух слайдеров, изменить которые Вы можете перейдя в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.
Для изменения первого слайдера перейдите к строкам 2-50.
Данный слайдер состоит из 3 слайдов, строки 4-18, 19-33, 34-48, в каждом из которых можно изменить:
Изображения. Фоновое и к описанию соответственно:
<img alt="photo" src="/.s/t/1801/main.png"> <img alt="promo" src="/.s/t/1801/promo.png">
где /.s/t/1801/main.png и /.s/t/1801/promo.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Заголовок и текст:
<h1>Lorem ipsum dolor</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aspernatur consequatur corporis doloribus eligendi eos facilis, id impedit in molestias odio odit porro quae rem sequi sit, soluta vero.</p>
Кнопка:
<a class="info-btn" href="#">More</a>
где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.
2.1 Какой должен быть размер изображений для первого слайдера?
Чтобы изображения корректно отображались в первом слайдере, они должны быть размерами 1902х508.
Для изменения второго слайдера перейдите к строкам 51-154.
Данный слайдер-карусель состоит из 10 блоков , в каждом вы можете изменить:
Изображение:
<img alt="cover" src="/.s/t/1801/1.jpg">
где /.s/t/1801/1.jpg – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
Текст и ссылка для перехода к материалу:
<a href="#">Lorem ipsum</a> <p>Lorem ipsum dolor</p>
где вместо # укажите ссылку для перехода.
Также вы можете использовать информер для этого блока, который будет выводить, например, последние материалы определенных модулей. Обязательным условием является наличие изображения у материала.
В таком случаи в коде шаблона удаляем строки 3-49 и вместо них пропишите код необходимого созданного информера, например, $MYINF_1$
При создании или редактировании информера необходимыми параметрами являются:
- Тип данных: Материалы
- Количество материалов: 10
- Количество колонок: 1
Шаблон информера будет иметь вид:
<div class="slide-c"> <div class="img-wrapp"> <div class="under-img"><img src="/_pu/5/95754642.jpg" alt="cover"></div> <div class="main-img"><img src="/_pu/5/95754642.jpg" alt="cover"></div> </div> <div class="title"> <a href="$ENTRY_URL$">$TITLE$</a> <p>$MESSAGE$</p> </div> </div>
Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: https://www.ucoz.ru/help/tools/informery
2.2 Какой должен быть размер изображений для второго слайдера?
Чтобы изображения корректно отображались в втором слайдере, они должны быть размерами 169х262.
3. Как изменить фон второго слайдера?
Перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), в стилях в строке номер 72 найдите стили:
.slider2{padding:50px 40px;background:#fff;max-height:450px;}
#fff является текущим фоном, можете изменить на тот который нужен вам, подобрать цвет фона можно на сайте https://www.color-hex.com/
4. Как сделать, чтобы промо-блок отображался не только на главной странице?
По желанию, вы можете изменять условие для вывода промо-блок на различных страницах вашего сайта.
Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц модулей в условии
<?if($URI_ID$='page1')?> <?endif?>
или добавить условие для вывода в нужных модулях:
<?if($MODULE_ID$='forum')?> <?endif?>
Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.
5. Как изменить фон центрального блока с контентом?
Перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите строку номер 176:
section[class^="module-"]{background:#fff;padding:30px}
#fff является текущим фоном, можете изменить на тот который нужен вам.
6. Как изменить цвет блоков?
Для изменений перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 213 строку:
.sidebox { margin: 30px 0; padding: 20px; background-color: #fff; }
#fff – это и есть цвет блока. #fff можете заменить на любой другой цвет html.
7. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 29 строке кода:
body.base { background: #000; }
#000 – является ссылкой на данное изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.
7.1 Как фон сайта сделать фиксированным?
Вам нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). После строку номер 29 :
body.base { background: #000; }
заменить на:
body.base { background: #000 url(ссылка на фото фона сайта)no-repeat 0%0%/cover fixed;}
8. Как изменить нижнюю часть сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 257 строке кода:
footer { background-color: #161616; color: #9e9e9e; }
#161616 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
В правом углу расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 10-17 укажите свои ссылки на аккаунты в социальных сетях:
<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>
9. Как изменить фон подменю?
Вам нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 140 строке кода:
#catmenu li:hover>ul{position:absolute;width:220px;left:initial;top:99%;right:0;z-index:130;background-color:#ec174f;display:block}
#ec174f является текущим фоном, можете изменить на тот который нужен вам.
Чтобы изменить фон подменю при наведении на пункт, нужно перейти к строке номер 127:
.main-menu a.uMenuItemA,.main-menu a:hover,.navItemMore:hover .nav_menu_toggler{background-color:#d21a4a}
#d21a4a является текущим фоном, можете изменить на тот который нужен вам.
10. Как изменить цвет кнопок на сайте?
Вам нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 57 строке кода:
button,input[type=button],input[type=reset],input[type=submit]{padding:10px 24px;width:auto!important;border:0;background-color:#dd1c4f;color:#fff;cursor:pointer;-webkit-transition:background-color .15s ease;transition:background-color .15s ease}
#dd1c4f является текущим фоном кнопок, можете изменить на тот который нужен вам.
Далее в строке номер 58 изменяем цвет кнопок при наведении на них:
button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:#f02e61}
#f02e61 является текущим фоном кнопок, можете изменить на тот который нужен вам.
11. Как изменить цвет ссылок на сайте?
Вам нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 33-34-35 строкам кода:
a{color:#ec174f;text-decoration:none}
a:hover,.cat-blocks a:hover{color:#b32449}
a:active{color:#c2185b}
- #ec174f - это общий цвет ссылок
- #b32449 - это цвет ссылок при наведении
- #c2185b - это цвет активных посещаемых ссылок
меняйте на нужные вам цвета при необходимости.
12. Как добавить второй контейнер и можно ли?
Да, можно.
12.1. Перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки.
12.2. Далее жмем кнопку "Добавить", в поле "Код (ID)" пропишите название блока "DRIGHTER" и нажмите кнопку Сохранить. После сохранения изменений у вас в левой колонке отобразится блок с названием "Второй контейнер".
12.3. Чтобы в дальнейшем была возможность добавлять блоки в контейнер, нам нужно выполнить еще немного работы, а именно, вручную добавить один блок пробный в второй контейнер. Для этого нам достаточно перейти Панель управления → Дизайн → Редактор → Глобальные блоки → Первый контейнер, скопируйте с него код первого блока (обычно это блок корзина).
<!-- <block1> --> <?if($BASKET$)?> <div class="sidebox"> <div class="sidetitle"><span><!-- <bt> --><!--<s5441>-->Корзина<!--</s>--><!-- </bt> --></span></div> <div class="inner"> <!-- <bc> -->$BASKET$<!-- </bc> --> </div> <div class="clr"></div> </div> <?endif?> <!-- </block1> -->
Далее перейдите во второй контейнер и вставьте там такой код:
<!-- <block111> --> <div class="sidebox"> <div class="sidetitle"><span><!-- <bt> --><!--<s5441>-->Тест блок<!--</s>--><!-- </bt> --></span></div> <div class="inner"> <!-- <bc> -->Тест блок<!-- </bc> --> </div> <div class="clr"></div> </div> <!-- </block111> -->
и сохраните изменения.
Нам данный блок нужен лишь для начала, чтобы мы смогли в второй контейнер с помощью конструктора начать добавлять блоки. Если пробный блок не добавить, контейнер будет пустой, в результате с помощью конструктора первый блок никак не добавите, должен быть один пробный, после добавления своего второго, вы этот пробный сможете легко удалить.
12.4. Далее нужно пройтись по страницам шаблонам всех активных модулей и найти код:
<div id="content"<?if($HIDE_CLEFTER$)?>class="wide-page"<?endif?>>
перед которым установить такой код:
<aside style="width: inherit; padding-right: 30px;"><div id="sidebar">$GLOBAL_DRIGHTER$</div></aside>
в результате должно получиться так:
<aside style="width: inherit; padding-right: 30px;"><div id="sidebar">$GLOBAL_DRIGHTER$</div></aside> <div id="content" <?if($HIDE_CLEFTER$)?>class="wide-page"<?endif?>>
сохраните изменения, практически готово.
После этого можете пользоваться вторым контейнером и добавлять в него блоки. Если у вас возникают сложности, вы свои вопросы можете задавать на https://www.ucoz.ru/qa/index.php/ask