Дизайн #1806
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из названия сайта и пунктов меню.
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 5 строку кода:
<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
2. Как изменить промо-блок?
Для редактирования промо-страницы нужно перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.
Данная страница состоит из 3 так называемых блоков, изменение которых рассмотрим далее.
Обратите внимание, на то, что каждое изменяемое изображение вам необходимо предварительно загрузить в Файловый менеджер сайта.
1)
В первом блоке можно изменить фоновое изображение и текст в строках 1-12:
<img src="/.s/t/1806/main.jpg" alt="photo">
вместо /.s/t/1806/main.jpg укажите свою ссылку на свое изображение.
<div class="text-block"> <p>Accusamus aliquam</p> <h1>Lorem ipsum dolor</h1> </div>
2.1 Какой размер изображений должен быть в первом блоке?
Размер изображения должен быть 1851х928.
2)
Второй блок содержит заголовок и краткое описание, изменить их можно в строках 14-18:
<h3 class="title">About us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vel sem posuere imperdiet. Fusce varius nunc lectus, eget auctor metus maximus ac. Nullam lobortis enim eget quam iaculis, in malesuada diam convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam nulla sem, scelerisque in bibendum ac, sollicitudin ac diam. Maecenas in pharetra lectus, ut ultrices lacus. Pellentesque in sem nunc. Vestibulum gravida nunc bibendum leo aliquam, ac dignissim orci vehicula. Aenean posuere euismod tellus, ut tempus orci cursus at. Nullam magna neque, feugiat ut ipsum eget, convallis posuere quam.</p>
2.2 Какой размер изображений должен быть в втором блоке?
- Размер изображения которое слева должен быть 366х498, фото что справа 742х498.
- Огромное фото немного ниже 1120х746.
- Ряд фото ниже после большого 530х383 и 674х423.
- И последнее огромное фото 1117х510.
3)
Данный блок содержит в себе галерею изображения, для его изменения перейдите к строкам 20-65:
<figure> <img src="/.s/t/1806/1.jpg" alt="img"> <figcaption><a href="#"><span>Lorem ipsum</span></a></figcaption> </figure>
где вместо /.s/t/1806/1.jpg укажите ссылку на свое изображение, Lorem ipsum – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.
3. Как изменить цвет полоски подчеркивания активного пункта меню?
Чтобы изменить цвет полоски активного пункта меню сайта, нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 144 строке кода:
.main-menu #catmenu a.uMenuItemA{border-bottom:4px solid #e4d9c6;}
#e4d9c6 – цвет полоски. Его можно изменить на любой другой html-цвет.
4. Как изменить цвет ссылок в меню сайта?
Чтобы изменить цвет ссылок в меню сайта, нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 125 строке кода:
.main-menu a,.main-menu span{display:inline-block;vertical-align:middle;word-break:break-word;font-size:12px;color:#45423e;-webkit-transition:all .2s;transition:all .2s;}
#45423e – цвет ссылок. Его можно изменить на любой другой html-цвет.
5. Как изменить цвет ссылок на сайте?
Изменить цвет ссылок можно в Панели управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 34-35-36 строке кода:
a{color:#5f5656}
a:hover,.cat-blocks a:hover,.module-shop a.shop-item-title:hover{color:#dc9c6e}
a:active{color:#dc9c6e}
#5f5656 – это текущий общий цвет ссылок, далее #dc9c6e это цвет активных посещаемых ссылок и #dc9c6e - это цвет ссылок при наведении. Все эти цвета можно изменить на любой другой html-цвет.
6. Как изменить цвет кнопок на сайте?
Изменить цвет кнопок можно в Панели управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 69-70 строке кода:
button,input[type=button],input[type=reset],input[type=submit]{padding:10px 24px;width:auto!important;border:0;background-color:#dc9c6e;color:#fff;cursor:pointer;-webkit-transition:background-color .15s ease;transition:background-color .15s ease}
button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:#e4d9c6}
#dc9c6e – это текущий цвет кнопки, далее #e4d9c6 это цвет при наведении на кнопку. Эти цвета можно изменить на любой другой html-цвет.
7. Как изменить цвет активной даты в календаре?
Изменить цвет кнопок в календаре, нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 222 строке кода:
.calMdayA,.calMdayIsA{padding:5px 7px;color:#fff;background-color:#e4d9c6;-webkit-transition:background-color .15s ease;transition:background-color .15s ease}
#e4d9c6 – это текущий цвет, который можно изменить на любой другой html-цвет.
8. Как изменить цвет кнопок переключателей страниц?
Изменить цвет кнопок переключателя страниц, можно в Панели управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 174 строке кода:
.swchItemA,.swchItemA1,.switchActive,.pgSwchA{color:#fff;background-color:#e4d9c6;-webkit-transition:all .3s;transition:all .3s;text-align:center;}
#e4d9c6 – это текущий цвет, который можно изменить на любой другой html-цвет.
9. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 30 строке кода:
body.base{background:#fff}
#fff – фон сайта. Его можно изменить на любой другой html-цвет.
9.1 Как фон шаблона сделать фиксированным?
Чтобы фон сайта сделать фиксированным, нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 30 строке кода:
body.base{background:#fff}
и заменить ее на:
body.base{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; 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
12. Как изменить контент нижней часть сайта?
Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.
Она состоит из дополнительной информации о сайте и контактов. Для того чтобы изменить информацию о сайте перейдите к строкам 3-21 и замените информацию и ссылки на свои:
<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.</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>
Для изменения второй части - контактной информации перейдите к строкам строки 22-44 и аналогичным образом измените контактную информацию:
<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>
13. Как изменить фон нижней части сайта?
Нижняя часть сайта не имеют изображений или каких-то других особенностей. Цвет зависит от фона сайта.
14. Какой цвет основных элементов сайта?
Цветом основных элементов сайта является #e4d9c6.
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #e4d9c6 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.