Дизайн #1805

Дизайн #1805

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

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

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

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

<span class="phone"><span>+1 (234) 234-2345</span></span>
<span class="email"><span>company.name@mail.com</span></span> 
<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>

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

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

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

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

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

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

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

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

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

.header{color:#fff;margin:0 auto;position:relative;background-color:#ff3d00}

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

Также при смене фона шапки рекомендуется сменить цвет скосов меню, чтобы сохранить эффект скоса блока, где находиться меню. Вам потребуется перейти к 229 и 231 строке кода:

#catmenu ul.uMenuRoot > li:nth-child(1) a:before { z-index: 1; position: absolute; top: 0; left: 0px; content: ''; width: 0; height: 0; display: block; border-right: 15px solid #fff0; border-top: 61px solid #ff3d00; }
#uNMenuDiv1:after { z-index: 1; position: absolute; top: 0px; left: 100%; content: ''; width: 0; height: 0; display: block; border-right: 15px solid #ff3d00; border-top: 62px solid #fff; }

где ff3d00 цвет внешнего скоса, а #fff внутреннего.

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

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

Для изменения слайдера перейдите к строкам 3-54.

Чтобы изменить вид кнопок перелистывания слайдера перейдите в строку 3-4:

<button id="btn-l"><i class="material-icons">arrow_back</i></button>
<button id="btn-r"><i class="material-icons">arrow_forward</i></button>

где вместо arrow_forward и arrow_back укажите нужный Вам текст или символ.

Для изменения слайдов в слайдере найдите следующие участки кода 6-52. Для каждого можно изменить, если необходимо, вид отображения, изображение, текст и кнопку для перехода к материалу:

вид отображения изображения слева от описания:

<div class="uItemSlidePart uItemSlidePart-left">

вид отображения изображения справа от описания:

<div class="uItemSlidePart uItemSlidePart-right">
<div class="uSlideItemContent ImageSlide" data-image="/.s/t/1805/s1.jpg"></div>

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

<h2 class="uItemSlide__heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<a class="btn-promo1" href="/"><span>More</span></a>

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

Для изменения информативных блоков перейдите к строкам 57-69. Для каждого блока можно изменить ссылку для перехода к материалу, изображение и текст:

 <div class="tile" data-url="/" data-scale="1.1" data-image="/.s/t/1805/bs1.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div> 

где:

data-url="/" - ссылка для перехода к материалу. Вместо "/" вы нужно указать нужную Вам ссылку.

data-scale="1.1" - значение на сколько будет увеличиваться изображение фона блока при наведении курсора, стандартно “1.1”.

data-image="/.s/t/14659/bs1.jpg" - ссылка на фоновое изображение блока, вместо "/.s/t/14659/bs1.jpg" Вы можете указать ссылку на свое изображение.

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

Размер главного изображения 1125х750, размер изображений которые ниже главного 996х664.

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

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

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

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

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

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

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

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

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

.main-menu a.uMenuItemA{background:#f2f2f2;}

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

4.1 Как изменить общий фон пунктов меню?

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

.main-menu .uMenuRoot>li{background-color:#fff;}

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

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

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

a{color:#ff3d00;text-decoration:none}
a:active{color:#ff9e7f}

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

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

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

button,input[type=button],input[type=reset],input[type=submit]{padding:5px 20px 6px 20px;width:auto!important;border:0;color:#fff;text-transform:uppercase;font-family:"Roboto Condensed";font-size:.875rem;font-weight:700;letter-spacing:.42px;cursor:pointer;-webkit-transition:background-color .15s ease;transition:background-color .15s ease;background-color:#ff3d00;border:3px solid transparent}
#scrollup:hover,button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:not(.searchSbmFl):hover{color:#444;background-color:#fff;border:3px solid #ff3d00;transition:background-color .15s ease}

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

7. Как изменить цвет активной даты в календаре?

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

.calMdayA,.calMdayIsA{background-color:#ff3d00;color:#fff;border:3px solid transparent;-webkit-transition:background-color .15s ease;transition:background-color .15s ease}
.calMdayA:hover,.calMdayIsA:hover{padding:2px 4px;background-color:#fff;color:#000;border:3px solid #ff3d00}

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

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

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

.pgSwch,.swchItem,.swchItem1,.swchItemA1,.switchActive1,.switchBack1,.switchDigit1,.switchNext1{min-width:25px;display:inline-block;background-color:#fff;line-height:25px;padding:0 5px;border:3px solid #ff3d00;font-size:.875rem;height:31px;text-align:center;font-weight:500;margin-bottom:5px}
.pgSwchA,.swchItemA,.swchItemA1,.switchActive{border:3px solid #ff3d00;color:#fff;background-color:#ff3d00;-webkit-transition:all .3s;transition:all .3s;text-align:center}

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

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

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

body{color:#717171;font-family:"Roboto Condensed";font-size:.938rem;font-weight:400;line-height:1.71;background-color:#fff}

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

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

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

body{color:#717171;font-family:"Roboto Condensed";font-size:.938rem;font-weight:400;line-height:1.71;background-color:#fff}

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

body{color:#717171;font-family:"Roboto Condensed";font-size:.938rem;font-weight:400;line-height:1.71;background:#fff url(ссылка на фото фона сайта)no-repeat 0%0%/cover fixed;}

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

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

Блоки не имеют изображений или каких-то других особенностей. Цвет блоков зависит от фона сайта.

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

Да, можно!

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

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

11.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> -->

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

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

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

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

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

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

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

 <aside style="width: inherit; border-right: 3px solid #e3e8f1;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

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

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

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

<div class="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="quick">
<h3>Quick links</h3>
<ul class="quick-links">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</ul>
</div>

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

<div class="adress">
<h3>Adress</h3>
<p>Donec imperdiet urna sem, ac interdum lorem tristique convallis.</p>
</div>
<div class="contacts">
<h3>Phones</h3>
<span class="phone"><span>+1 (234) 234-2345</span></span>
<span class="phone"><span>+1 (234) 234-2345</span></span>
</div>
<div class="soc-block">
<h3>Follow us</h3>
<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>

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

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

.footer{width:100%;background:#000;margin-top:150px;color:#fff}

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

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

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

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

Дизайн #1805