Перейти к содержимому


Внести Изменения В Дизайн


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 Aviva

Aviva

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 11 Январь 2018 - 03:17

Аккаунт SL-424023. Мне нужно немного изменить дизайн:
1. Переделка шапки: опустить меню поверх слайдера, изменить цвет кнопок меню на синий(который используется в шаблоне), а цвет букв на белый. в пустом пространстве выше меню разместить телефон.
2. Нужно переделать слайдер, чтобы картинок можно было установить больше 2, и чтобы они менялись сами. Сейчас они перелистываются только вручную.
3. удалить блок синего цвета с четырьмя кружочками : бесплатная доставка и т.д. находится выше новостей.
4. Заменить изображение подложку под новостями.
5. Закоментировать группу значков соцсетей в подвале сайта.

#2 metry

metry

    Активный участник

  • Модераторы
  • 591 сообщений

Отправлено 11 Январь 2018 - 18:03

Добрый день. Для внесения изменений  зайдите в Редактор шаблонов-->HTML и найдите:
		  <div class="col-md-3 col-xs-12">
			<div id="logo">
			  <a href="{INDEX_PAGE_URL}" title="{SETTINGS_STORE_NAME}"><img src="{ASSETS_IMAGES_PATH}logo.png?design=sport" alt="{SETTINGS_STORE_NAME}"></a>
			</div>
		  </div>

после него вставьте:

			<div class="col-md-9 col-xs-12">
			  <ul class="head_mob">
			 
			  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></span></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="fax"><em class="fa fa-fax"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></span></li>{% ENDIF %}
			</ul>
		   
			</div>

далее зайдите в Редактор шаблонов-->main.css и найдите:


#custommenu ul.menunav li.active > a, #custommenu ul.menunav li:hover > a {color: #fff;background: #09afe7;position: relative;}

замените на:

#custommenu ul.menunav li > a, #custommenu ul.menunav li> a {color: #fff;background: #09afe7;position: relative;}
#custommenu ul.menunav li.active > a, #custommenu ul.menunav li:hover > a {color: #09afe7;background: #fff;position: relative;}

далее найдите:

#custommenu ul.menunav li > a {display: block;padding: 10px 15px;color: #696c79;line-height: 30px;text-transform: uppercase;font-size: 16px;font-weight: 700;position: relative;border-bottom: 2px solid transparent;}

замените на:

#custommenu ul.menunav li > a {display: block;padding: 10px 15px;color: #fff;line-height: 30px;text-transform: uppercase;font-size: 16px;font-weight: 700;position: relative;border-bottom: 2px solid transparent;}

далее в конец кода main.css вставьте:

.head_mob {margin-top:58px;}
.head_mob li{display:inline-block; width:33%; font-size:16px;color:#6975a2;}
.head_mob li .ft-content{margin-left:10px;font-weight:bold;}


Далее зайдите в раздел Настройки-->Основные и в поле "Телефоны на сайте:" задайте контактные данные.



2. Зайдите в Редактор шаблонов-->HTML и найдите:
			 <div id="slider" class="owl-carousel owl-theme">
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" />
			 </div>
			 </div>

замените на:

			 <div id="slider" class="owl-carousel owl-theme">
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" /></a>
			 </div>
				 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sport" /></a>
			 </div>
				 <div class="item">
				 <a href="#" u="image"><img src="{ASSETS_IMAGES_PATH}slide4.jpg?design=sport" /></a>
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide1.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.jpg?design=sport" />
			 </div>
			 <div class="item">
				 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.jpg?design=sport" />
			 </div>
			 </div>

Далее в Редакторе шаблонов чрез кнопку "Добавить файлы" добавьте картинки новые картинки. Они должны иметь названия slide3 и slide4 с расширением .jpg;
Рекомендуемый размер загружаемых картинок: 1920x704px

3. Зайдите в Редактор шаблонов-->main.css и найдите:
#block-info {background: #09afe7;padding: 30px 0 0 0;text-align: center;}

замените на:

#block-info {background: #09afe7;padding: 30px 0 0 0;text-align: center;display:none;}

4. В Редакторе шаблонов в левом блоке в разделе Изображений найдите изображение "bkg_brand.jpg" . Откройте его и через кнопку "Заменить" замените на свое. Рекомендуемый размер загружаемого изображения: 1920x480px

5. Зайдите в Редактор шаблонов-->HTML и найдите:

			 <ul class="link-follow">
			 <li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a></li>
			 <li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a></li>
			 <li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a></li>
			 <li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a></li>
			 <li><a class="youtube fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>youtube</span></a></li>
			 </ul>

замените на:

			 <!--ul class="link-follow">
			 <li><a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a></li>
			 <li><a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a></li>
			 <li><a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a></li>
			 <li><a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a></li>
			 <li><a class="youtube fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>youtube</span></a></li>
			 </ul-->


#3 Aviva

Aviva

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 15 Январь 2018 - 00:19

Спасибо. Почти все получилось.
Но слайдер не работает по прежнему. Только ручное перелистывание.
Еще, можно телефон в шапке сделать справа и увеличить шрифт? А по центру шапки текст:

Магазин работает с 10 до 20 часов по московскому времени.
Минимальная сумма заказа 1000 рублей.
За заказ от 5 000 рублей доставка бесплатная

Выравнивание текста по центру.

#4 Aviva

Aviva

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 24 Январь 2018 - 15:20

Ау...

#5 Stasya

Stasya

    Активный участник

  • Модераторы
  • 4 007 сообщений

Отправлено 30 Январь 2018 - 13:30

Просмотр сообщенияAviva (15 Январь 2018 - 00:19) писал:

Спасибо. Почти все получилось.
Но слайдер не работает по прежнему. Только ручное перелистывание.
Еще, можно телефон в шапке сделать справа и увеличить шрифт? А по центру шапки текст:

Магазин работает с 10 до 20 часов по московскому времени.
Минимальная сумма заказа 1000 рублей.
За заказ от 5 000 рублей доставка бесплатная

Выравнивание текста по центру.
Здравствуйте. В  файле main.js найдите код
jQuery(function($) {
var carouselU = $('#slider');
carouselU.owlCarousel({
	 pagination: false,
	 navigation : true,
	 itemsScaleUp : true,
	 slideSpeed : 800,
	 autoPlay: true,
	 autoHeight: true,
	 paginationSpeed : 400,
	 singleItem:true,
	 items: 1
});
});
и замените его на
jQuery(function($) {
var carouselU = $('#slider');
carouselU.owlCarousel({
	 pagination: false,
	 navigation : true,
	 itemsScaleUp : true,
	 slideSpeed : 800,
	 autoplay: true,
	 autoHeight: true,
	 paginationSpeed : 400,
	 singleItem:true,
	 items: 1
});
});
Далее В шаблоне HTML найдите код
		  <div class="col-md-9 col-xs-12">
						  <ul class="head_mob">
						 
						  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span></li>{% ENDIF %}
						  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></span></li>{% ENDIF %}
						  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="fax"><em class="fa fa-fax"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></span></li>{% ENDIF %}
						</ul>
				   
						</div>
и замените его на
<div class="col-md-9 col-xs-12">
			<div class="header-text">
			<p style="text-align:center">Магазин работает с 10 до 20 часов по московскому времени.<br>
				Минимальная сумма заказа 1000 рублей.<br>
				За заказ от 5 000 рублей доставка бесплатная</p>
				</div>
			<ul class="head_mob" style="text-align:right;width:100%">
			   {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="phone"><em class="fa fa-phone"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></span></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="fax"><em class="fa fa-fax"></em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></span></li>{% ENDIF %}
			</ul>
			<div class="clear"> </div>
		  </div>
В файле main.css найдите код
.head_mob {margin-top:58px;}
и замените его на  
.head_mob {width:100;text-align:right;}
.header-text p{text-align:center}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных