Дизайн #1804

Дизайн #1804

1. Как изменить шапку сайта?

Верхняя часть шаблона состоит из социальных иконок, ссылок на страницы авторизации/регистрации, названия сайта, пунктов меню и формы поиска.

Чтобы изменить верхнюю часть сайта перейдите в в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта

Укажите ссылки на свои социальные сети в строках 4-11:

<a href="https://www.facebook.com/" class="soc-fc" target="_blank"></a>
<a href="https://twitter.com/" class="soc-tw" target="_blank"></a>
<a href="http://www.flickr.com/" class="soc-fl" target="_blank"></a>
<a href="https://vimeo.com/" class="soc-vi" target="_blank"></a>

Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.

Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 22 строку кода:

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>

и вместо $SITE_NAME$ пропишите:

<img src="ссылка на логотип">

где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:

1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Чтобы изменить фон шапки сайта, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего найдите там 126 строку:

.bottom-head-container{background-color:#958959;padding:0 20px;width:100%;display:flex;align-items:center}

#958959 – является цветом верхней части сайта. Его можно изменить на любой другой html-цвет.

2. Как изменить промо-блок?

Промоблок состоит из слайдера, для того, чтобы изменить его, необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.

Слайдер состоит из 3 слайдов. Вам необходимо найти строки 4-44, где для каждого слайда можно изменить:

Заголовок, описание и кнопку для перехода к материалу и изображение:

<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 href="#" class="info-btn">More</a>

где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

<img src="/.s/t/1804/main.png" alt="promo">

где /.s/t/1804/main.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

Для изменения превью следующего слайда перейдите к строкам 42-44 и укажите свои ссылки на изображения:

<a data-slide-index="0" href=""><img src="/.s/t/1804/main.png" /></a>
<a data-slide-index="1" href=""><img src="/.s/t/1804/2.jpg" /></a>
<a data-slide-index="2" href=""><img src="/.s/t/1804/3.jpg" /></a>

Изменить фон промо блока можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 115 строке кода:

.top-part.sitePage1{background:#161616 url("/.s/t/1804/slider-background.png") no-repeat 100% 0}

где /.s/t/1804/slider-background.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

2.1 Какой размер изображений должен быть в слайдере?

Размер главного фото 569х569, размер превью 120х120.

3. Как сделать, чтобы слайдер отображался не только на главной странице?

По желанию, вы можете изменять условие для вывода слайдера на различных страницах вашего сайта.

Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц  модулей в условии

<?if($PAGE_ID$='sitePage1')?> <?endif?>

или добавить условие для вывода в нужных модулях:

<?if($MODULE_ID$='forum')?> <?endif?>  

Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.

4. Как изменить фон активного пункта меню?

Изменить фон активного пункта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 137 строке кода:

.main-menu a.uMenuItemA,.main-menu a:hover{background-color:#897d4d;}

#897d4d – это текущий фон. Его можно изменить на любой другой html-цвет.

5. Как изменить цвет ссылок на сайте?

Изменить цвет ссылок можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 35-36 строке кода:

a{color:#958959;text-decoration:none}
a:hover{color:#ae8b00}

#958959 – это текущий общий цвет ссылок, далее #ae8b00 это цвет ссылок при наведении. Его можно изменить на любой другой html-цвет.

6. Как изменить цвет кнопок на сайте?

Изменить цвет кнопок можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 64-70 строках кода:

#casing input[type=button],#casing input[type=reset],#casing input[type=submit]{padding:9px 24px;font-size:17px;width:auto!important;font-family:'Tinos',serif;background-color:transparent;border:1px solid #a19564;color:#7d6e32;cursor:pointer;-webkit-transition:background-color .15s ease;transition:background-color .15s ease;}

#casing input[type=button]:hover,#casing input[type=reset]:hover,#casing input[type=submit]:hover{border:1px solid #beb179;background-color:#beb179;color:#fff}

#beb179 – это текущий цвет при наведении на кнопку, далее border:1px solid #a19564 это толщина цвет рамки вокруг кнопки. Эти цвета можно изменить на любой другой html-цвет.

7. Как изменить цвет кнопок переключателей страниц?

Изменить цвет кнопок переключателя страниц, можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 188 строке кода:

.swchItem,.swchItem1,.swchItemA1,.switchActive1,.switchBack1,.switchDigit1,.switchNext1,.pgSwch{min-width:30px;display:inline-block;line-height:30px;border:1px solid #0000;height:30px;padding:0 5px;background: red;}

чтобы цвет изменился, вам нужно добавить код background: red; где вместо red пропишите нужный вам html цвет.

Цвет рамки у переключателя страниц меняется в стилях в строке 200:

.swchItemA,.swchItemA1,.switchActive,.pgSwchA{border:1px solid #958959;color:#958959;-webkit-transition:all .3s;transition:all .3s;text-align:center}

#958959 - это текущий цвет, замените на тот который вам нужен.

8. Как изменить цвет кнопки (стрелки) для промотки страницы вверх?

Изменить цвет данной конкретной кнопки, можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 543 строке кода:

#casing #scrollup{padding:0 16px;display:none;height:50px;font-family:'Material Icons';-webkit-box-shadow:0 0 9px 2px rgba(0,0,0,0.09);box-shadow:0 0 9px 2px rgba(0,0,0,0.09);border:0;background-size:25px;bottom:20px;right:20px;cursor:pointer;position:fixed;z-index:5;background:#beb179;color:#fff}

#beb179 - это текущий цвет, замените на тот который вам нужен.

9. Как изменить фон шаблона?

Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 31 строке кода:

body.base{background-color:#4a4a4a}

#4a4a4a – фон сайта. Его можно изменить на любой другой html-цвет.

9.1 Как фон шаблона сделать фиксированным?

Чтобы фон сайта сделать фиксированным, нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 31 строке кода:

body.base{background-color:#4a4a4a}

и заменить ее на:

body.base{background: #4a4a4a url(ссылка на фото фона сайта)no-repeat 0%0%/cover fixed;}

где вместо выделенного красным прописать ссылку на ваше фото для фона сайта.

10. Как изменить цвет блоков?

Для изменений перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 245 строку:

.sidebox,.profile{margin-bottom:20px;padding:5px;background-color:#f8f7f0}

#f8f7f0 – это и есть цвет бордера. #f8f7f0 можете заменить на любой другой цвет html.

11. Как изменить контент нижней часть сайта?

Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.  

Она состоит из дополнительной информации о сайте и контактов. Для того чтобы изменить информацию о сайте перейдите к строкам 4-20 и замените информацию и ссылки на свои:

<div class="about-wrap">
<h6>About</h6>
<p>Integer euismod lobortis lectus sed suscipit. Donec commodo et velit at tristique. Cras vitae nunc porttitor nibh varius pellentesque nec in urna. Proin a neque non purus tincidunt hendrerit. Sed magna mi, dapibus ultrices ultricies ut, accumsan in ante. Suspendisse a dui vel felis fringilla porta. Mauris vulputate auctor enim vitae accumsan. Duis congue neque magna, ut auctor sem semper ac. Proin aliquet dui id dolor gravida consequat. Aliquam et vestibulum libero, et lobortis sem. Duis ut elit libero. Ut commodo bibendum hendrerit.</p>
</div>
<div class="links-wrap">
<h6>Quick links</h6>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>

Для изменения второй части - контактной информации перейдите к строкам строки 24-46 и аналогичным образом измените контактную информацию:

<div class="address-wrap">
<h6>Adress</h6>
<p>Donec imperdiet urna sem, ac interdum lorem tristique convallis.</p>
</div>
<div class="phones-wrap">
<h6>Phones</h6>
<a href="#">+1 (234) 567-8901</a>
<a href="#">+1 (234) 567-8901</a>
</div>
<div class="soc-wrap">
<h6>Follow us</h6>
<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>
</div>

12. Как добавить второй контейнер и можно ли?

Да, можно!

12.1. Перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки. 

12.2. Далее жмем кнопку "Добавить", в поле "Код (ID)" пропишите название блока "DRIGHTER" и нажмите кнопку Сохранить. После сохранения изменений у вас в левой колонке отобразится блок с названием "Второй контейнер". 

12.3. Чтобы в дальнейшем была возможность добавлять блоки в контейнер, нам нужно выполнить еще немного работы, а именно, вручную добавить один блок пробный в второй контейнер.

Для этого нам достаточно перейти Панель управления → Дизайн → Редактор → Глобальные блоки → Первый контейнер, скопируйте с него код первого блока (обычно это блок корзина).

<!-- <block1> -->
<?if($BASKET$)?>
<div class="sidebox">
<div class="sidebox-wrap">
<div class="sidetitle"><span><!-- <bt> --><!--<s5441>-->Корзина<!--</s>--><!-- </bt> --></span></div>
<div class="inner">
<!-- <bc> -->$BASKET$<!-- </bc> -->
</div>
</div>
<div class="clr"></div>
</div>
<?endif?>
<!-- </block1> -->

Далее перейдите во второй контейнер и вставьте там такой код:

<!-- <block111> -->
<div class="sidebox">
<div class="sidebox-wrap">
<div class="sidetitle"><span><!-- <bt> --><!--<s5441>-->Тест блок<!--</s>--><!-- </bt> --></span></div>
<div class="inner">
<!-- <bc> -->Тест содержание<!-- </bc> -->
</div>
</div>
<div class="clr"></div>
</div>
<!-- </block111> -->

и сохраните изменения.

Нам данный блок нужен лишь для начала, чтобы мы смогли в второй контейнер с помощью конструктора начать добавлять блоки. Если пробный блок не добавить, контейнер будет пустой, в результате с помощью конструктора первый блок никак не добавите, должен быть один пробный, после добавления своего второго, вы этот пробный сможете легко удалить.

12.4.  Далее нужно пройтись по страницам шаблонам всех активных модулей и найти код:

<div id="content"<?if($HIDE_CLEFTER$)?>class="wide-page"<?endif?>>

перед которым установить такой код:

<aside style="width: inherit; margin-right: 20px;"><div id="sidebar">$GLOBAL_DRIGHTER$</div></aside>

в результате должно получиться так:

 <aside style="width: inherit; margin-right: 20px;"><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

13. Как изменить фон нижней части сайта?

Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 285 строке кода:

footer{background-color:#161616;color:#f8f7f0}

#161616 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.

14. Какой цвет основных элементов сайта?

Основным цветом сайта является #958959.

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #958959 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.

Дизайн #1804