Дизайн #1802

Дизайн #1802

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

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

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

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

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

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

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

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

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

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

Для указания своих ссылок к социальным сетям  перейдите к строкам 34-41:

<a href="https://vk.com" target="_blank" class="fa fa-vk"></a></span>
<a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a></span>
<a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a></span>
<a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a></span>
<a href="https://plus.google.com" target="_blank" class="fa fa-google-plus"></a></span>
<a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span>
</div>

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

header { background-color: #fff; }

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

2. Как изменить промо-страницу?

Для редактирования промо-страницы нужно перейдите  в Панель управления → Дизайн → Редактор → PROMO.

Данная страница состоит из 7 так называемых блоков, изменение которых рассмотрим далее.

Обратите внимание, на то, что каждое изменяемое изображение вам необходимо предварительно загрузить в Файловый менеджер сайта. Также некоторые из блоков состоят з информеров, для корректной работы которых необходимо подключить соответствующий модуль. Более детально о том что такое информер вы можете ознакомится в инструкции.

1)

В первом блоке можно изменить изображение, текст и кнопку для перехода к материалу в строках 3-14:

<img src="/.s/t/1802/promo.jpg" alt="img">

вместо /.s/t/1802/promo.jpg - укажите свою ссылку на свое изображение.

<div class="cap-ttl">Lorem Ipsum</div>
<div class="cap-ds description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut
euismod sem. Proin ultricies, justo in scelerisque vehicula, nisl lorem euismod quam, nulla lectus sed felis.
</div>

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

Размер изображения должен быть 1256х635.

2)

Изменить название данного блока можно в строке 17:

<h3 class="block-title">My Services</h3>

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

<div class="text">
<i><img src="/.s/t/1802/svg/sign-1.svg" alt="img"></i>
<h4><a href="#">Lorem ipsum</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies,
nisl lorem euismod quam, lectus sed felis.</p>
</div>

3)

В данном блоке изображение изменяется в строке 47:

<img src="/.s/t/1802/about.jpg" alt="img">

Вместо “/.s/t/1802/about.jpg" укажите свою ссылку на свое изображение.

Заголовок и текст изменяется в строках 50-54:

<h3>About us</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo
n scelerisque vehicula, nisl lorem euismod quam, eu varius nulla lectus sed felis. Integer feugiat
lectus est, ut fermentum eros auctor at. Ut dictum et nisl sit amet aliquam. Donec porta libero sit amet
elit aliquet fringilla.</p>
</div>

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

.about-me { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-around; background-color: #f1f1f1; }

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

2.2 Какой размер изображения должен быть в 3-м блоке?

Размер изображения должен быть 631х415.

4)

Данный блок содержит слайдер с 6-тью информационными карточками.  

Заголовок измените в строке 59:

<h3 class="block-title">Our doctors</h3>

Для каждого информационного блока строки 59-102, можно изменить изображение и заголовок с описанием:

<img src="/.s/t/1802/services_01.jpg" alt="example">
<div class="info">
<p class="name">Lorem ipsum</p>
<p>Lorem ipsum dolor</p>

Вместо “/.s/t/1802/services_01.jpg" укажите свою ссылку на свое изображение.

2.3 Какой размер изображения должен быть в 4-м блоке?

Размер изображения должен быть 365х340.

5)

Заголовок измените в строке 122:

<h3 class="block-title">Devices</h3>

Данный блок содержит информационный слайдер.

По аналогии с предыдущими слайдерами Вы можете изменить изображение слайдера и его текст:

<li class="devices-example">
<div class="devices-img"><img src="/.s/t/1802/devices_01.jpg" alt="example"></div>
<div class="devices-text">
<h5>Lorem ipsum dolor</h5>
<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. </p>
<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. </p>
<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. </p>
</div>
</li>

Превью к слайдам измените в строках 183-186 указав свои ссылки на изображения.

<a data-slide-index="0" href="" class="active"><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="1" href=""><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="2" href=""><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="3" href=""><img src="/.s/t/1802/previews.jpg"></a>

2.4 Какой размер изображения должен быть в 5-м блоке?

Размер изображения главного (большого фото) должен быть 1500х1000. Размер превью (меньших фото немного ниже) 157х106.

6)

Данных два блока является информерами модуля “Новости” и последних комментариев на сайте соответственно. Для их корректной работы вам необходимо в Панели Управления подключить модуль “Новости” и разрешить оставлять комментарии, после чего здесь будут транслироваться последние добавленные материалы и комментарии.

Если вы желаете изменить "Вид информера" перейдите в раздел "Инструменты" - "Информеры", где выберите необходимый информер и измените его.

Также вы можете удалить данный блок если не желаете использовать этот модуль. Найдите строки 199-221, 222-239 и удалите их.

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

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

body { background: #f4ffe9; margin: 0; font-size: 15px; color: #444; line-height: 1.5; font-family: "Roboto Condensed", sans-serif; }

#f4ffe9 – является цветом фона. Вместо него можно указать свой цвет или ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

3.1 Как фон сайта сделать фиксированным?

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

body { background: #f4ffe9; margin: 0; font-size: 15px; color: #444; line-height: 1.5; font-family: "Roboto Condensed", sans-serif; }

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

body { background: #f4ffe9 url(ссылка на фото фона сайта)no-repeat 0%0%/cover fixed;margin: 0; font-size: 15px; color: #444; line-height: 1.5; font-family: "Roboto Condensed", sans-serif; }

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

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

aside {  width: 370px;  font-size: 14px;  border-left: 1px solid #e5ebf0;}

и добавить  в список сss cвойство:

background-color: #000;

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

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

Нижняя часть сайта не имеет каких либо особенностей. В правом углу расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 9-16 укажите свои ссылки на аккаунты в социальных сетях:

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

6. Как изменить фон активных пунктов меню?

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

#catmenu li:hover,#catmenu .uMenuRoot li a.uMenuItemA{background-color:#26bf66}

#26bf66 - это текущий цвет который вы можете изменить на тот который считаете нужным.

6.1 Как изменить фон неактивных пунктов меню?

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

#catmenu li a{padding:15px 30px;font-size:16px;display:inline-block;}

которую нужно заменить на:

#catmenu li a{padding:15px 30px;font-size:16px;display:inline-block;background: #12b2e2;}

после чего код цвета #12b2e2 замените на тот, который вам нужен.

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

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

#casing input[type='submit'],#casing input[type='reset'],input[type='button'],#casing button{cursor:pointer;width:auto!important;padding:7px 25px;font-size:16px;font-family:"Roboto Condensed";border-radius:8px;-webkit-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-appearance:none;border:2px solid #26bf66;color:#fff;background:#26bf66;}
#casing input[type='submit']:hover,#casing input[type='reset']:hover,#casing input[type='button']:hover,#casing button:hover{cursor:pointer;border:2px solid #33d577;background:#33d577}
#casing input[type='submit']:active,#casing input[type='reset']:active,#casing input[type='button']:active,#casing button:active{border:2px solid #23b05e;background:#23b05e}
  • #26bf66#33d577 и #23b05e являются текущим цветом кнопок который вы можете заменить на нужный вам (1 строка это просто фон кнопок, вторая строка это цвет кнопок при наведении и третья строка цвет активных кнопок).
  • То что выделено синим цветом, это толщина рамки вокруг кнопок и цвет рамки который так же можете заменить на какой хотите.

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

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

.switchActive,.swchItemA,.swchItemA1 span{display:inline-block;background:#26bf66;min-width:36px;min-height:36px;line-height:35px;font-weight:700;vertical-align:middle;text-align:center;padding:0 14px;color:#fff;font-family:Montserrat;border-radius:6px;font-size:18px;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.swchItem1:hover span,.swchItem:hover{background-color:#26bf66;color:#fff;border-radius:6px}
.switchActive{padding:4px 7px;font-weight:400;background:#26bf66;color:#fff}

#26bf66 - это текущий цвет кнопок переключателя, замените на нужный вам если в этом есть необходимость.

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

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

a{color:#097546;font-family:"Roboto Condensed",sans-serif;text-decoration:none;font-size:14px}
a:hover{color:#26bf66}
  • #097546 - это общий цвет ссылок
  • #26bf66 - это цвет ссылок при наведении

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

Да, можно. 

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

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

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

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

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

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

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

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

<aside> <div id="sidebar" style="border-right: 1px solid #e5ebf0;"> $GLOBAL_DRIGHTER$ </div> </aside>

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

 <aside> <div id="sidebar" style="border-right: 1px solid #e5ebf0;"> $GLOBAL_DRIGHTER$ </div> </aside> 
 <div id="content"<?if($HIDE_CLEFTER$)?>class="wide-page"<?endif?>>

сохраните изменения, практически готово.

После этого можете пользоваться вторым контейнером и добавлять в него блоки. Если у вас возникают сложности, свои вопросы вы можете задавать на https://www.ucoz.ru/qa/index.php/ask

 

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

Основным цветом элементов сайта является #26bf66

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

Дизайн #1802