Изменение Внешнего Вида Главной Страницы
#1
Отправлено 11 Январь 2017 - 11:51
Прошу помочь с данными действиями:
1.Необходимо переместить блок ("Бесплатная доставка" "Прием заказов" и т.д.) под баннер.
2. Логотип разметить в верхнем левом углу, а телефон в верхнем правом углу.
3. Убрать значок "ЛК", и корзину переместить под номер телефона в верхний правый угол.
4. Как изменять цвет фона и текста в меню.
Надеюсь смог объяснить что необходимо сделать)
#2
Отправлено 12 Январь 2017 - 11:18
#3
Отправлено 15 Январь 2017 - 12:38
#4
Отправлено 18 Январь 2017 - 12:39
dmitriy750 (11 Январь 2017 - 11:51) писал:
Прошу помочь с данными действиями:
1.Необходимо переместить блок ("Бесплатная доставка" "Прием заказов" и т.д.) под баннер.
2. Логотип разметить в верхнем левом углу, а телефон в верхнем правом углу.
3. Убрать значок "ЛК", и корзину переместить под номер телефона в верхний правый угол.
4. Как изменять цвет фона и текста в меню.
Надеюсь смог объяснить что необходимо сделать)
Здравствуйте. Для начала переместим баннеры. Для этого в шаблоне HTML Вам нужно вырезать код:
<div class="container"> <div class="row"> <ul class="info-list"> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-truck"></i> </div> <div class="info-content"> <h6>Бесплатная доставка</h6> <p class="text-italic">Доставка по городу Бесплатна!</p> </div> </a> </li> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-gift"></i> </div> <div class="info-content"> <h6>Прием заказов 24/7</h6> <p class="text-italic">Оформите заказ прямо сейчас!</p> </div> </a> </li> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-money"></i> </div> <div class="info-content"> <h6>100% гарантия возврата</h6> <p class="text-italic">Возврат товара в течение 30 дней!</p> </div> </a> </li> </ul> </div> </div>
и поставить его перед:
<!-- Хлебные крошки --> {% IFNOT index_page %} <div class="breadcrumbs"> <div class="container">
#5
Отправлено 18 Январь 2017 - 14:03
#7
Отправлено 18 Январь 2017 - 15:06
#8
Отправлено 18 Январь 2017 - 15:15
#9
Отправлено 18 Январь 2017 - 16:04
Сместить логотип ближе к левому краю
Номер телефона сделать вровень с корзиной ( убрать надпись
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
#10
Отправлено 18 Январь 2017 - 16:14
dmitriy750 (18 Январь 2017 - 16:04) писал:
Сместить логотип ближе к левому краю
Номер телефона сделать вровень с корзиной ( убрать надпись
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
Здравствуйте.
В данном случае вам необходимо произвести следующие изменения:
В шаблоне main.css найдите, пожалуйста, данный код:
#header .logo { text-align: center; }
И замените его во этим вот кодом:
#header .logo { text-align: left; margin-left: -4%; }
После чего в том же шаблоне найдите, пожалуйста, вот этот код:
.block-phone { display: inline-block; float: none; width: 200px; line-height: 40px; margin-left: 30px; text-transform: uppercase; }
И замените его вот этим кодом:
.block-phone { display: inline-block; float: none; width: 200px; line-height: 40px; margin-left: 75px; text-transform: uppercase; }
Далее найдите, пожалуйста, данный код:
.block-cart { display: table-cell; position: relative; float: right; vertical-align: top; padding: 0 10px; text-align: left; }
И замените его этим вот кодом:
.block-cart { display: table-cell; position: relative; float: right; vertical-align: top; padding: 0 10px; text-align: left; margin-right: -10px; }
#11
Отправлено 18 Январь 2017 - 20:31
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
По этому списку можно еще подсказать по пунктам:
1.убрать надпись
2.Сделать в шапке белый фон
3.И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
#12
Отправлено 18 Январь 2017 - 20:50
dmitriy750 (18 Январь 2017 - 20:31) писал:
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
По этому списку можно еще подсказать по пунктам:
1.убрать надпись
2.Сделать в шапке белый фон
3.И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
Здравствуйте.
В данном случае попробуйте, пожалуйста, произвести следующие изменения:
В шаблоне main.css найдите, пожалуйста, данный код, чтобы применить белый цвет к шапке вашего сайта:
#header { position: relative; background-color: #2e2f33; }
И замените его во этим вот кодом:
#header { position: relative; background-color: #ffffff; }
#13
Отправлено 18 Январь 2017 - 21:11
#14
Отправлено 19 Январь 2017 - 03:41
Обнаружила у вас синтаксическую ошибку, зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<a href="http://{NET_DOMAIN}/page/Доставка" title=Gucci"><strong>Gucci</strong></a>
замените на:
<a href="http://{NET_DOMAIN}/page/Доставка" title="Gucci"><strong>Gucci</strong></a>
По вашему вопросу, в шаблоне HTML найдите:
<div class="header-info" style="{% IF USER_INTERACTION_HEADER_INFO_DISPLAY = open %}display: none;{% ELSE %}display: block;{% ENDIF %}"> <div class="container"> <div class="row"> <ul class="info-list"> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-truck"></i> </div> <div class="info-content"> <h6>Бесплатная доставка</h6> <p class="text-italic">Доставка по городу Бесплатна!</p> </div> </a> </li> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-gift"></i> </div> <div class="info-content"> <h6>Прием заказов 24/7</h6> <p class="text-italic">Оформите заказ прямо сейчас!</p> </div> </a> </li> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-money"></i> </div> <div class="info-content"> <h6>100% гарантия возврата</h6> <p class="text-italic">Возврат товара в течение 30 дней!</p> </div> </a> </li> </ul> </div> </div> </div>
замените на:
{% IF index_page %} <div class="header-info" style="{% IF USER_INTERACTION_HEADER_INFO_DISPLAY = open %}display: none;{% ELSE %}display: block;{% ENDIF %}"> <div class="container"> <div class="row"> <ul class="info-list"> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-truck"></i> </div> <div class="info-content"> <h6>Бесплатная доставка</h6> <p class="text-italic">Доставка по городу Бесплатна!</p> </div> </a> </li> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-gift"></i> </div> <div class="info-content"> <h6>Прием заказов 24/7</h6> <p class="text-italic">Оформите заказ прямо сейчас!</p> </div> </a> </li> <li class="info-item"> <a href="http://{NET_DOMAIN}/page/Доставка"> <div class="info-icon"> <i class="fa fa-money"></i> </div> <div class="info-content"> <h6>100% гарантия возврата</h6> <p class="text-italic">Возврат товара в течение 30 дней!</p> </div> </a> </li> </ul> </div> </div> </div> {% ENDIF %}
#15
Отправлено 19 Январь 2017 - 10:00
#16
Отправлено 07 Май 2017 - 01:01
Просьба внести похожие изменения либо сообщить как это сделать самому:
1. в верхнем левом углу разместить логотип, дальше поиск по магазину, телефон, корзину;
2. верхнюю шапку, содержащую меню "Главная", "Доставка", "Корзина", "Каталог", "Контакты", "Войти в ЛК", удалить совсем;
3. в шапке, содержащей "Фрукты", "Техника", "Одежда", "Подарки" сделать фон белым, а шрифт черным;
4. логотип магазина оставить только в верхней шапке, из нижней просьба удалить.
#17
Отправлено 07 Май 2017 - 18:37
dmitry86 (07 Май 2017 - 01:01) писал:
Просьба внести похожие изменения либо сообщить как это сделать самому:
1. в верхнем левом углу разместить логотип, дальше поиск по магазину, телефон, корзину;
2. верхнюю шапку, содержащую меню "Главная", "Доставка", "Корзина", "Каталог", "Контакты", "Войти в ЛК", удалить совсем;
3. в шапке, содержащей "Фрукты", "Техника", "Одежда", "Подарки" сделать фон белым, а шрифт черным;
4. логотип магазина оставить только в верхней шапке, из нижней просьба удалить.
Изменения Вам произвел, проверьте, пожалуйста.
Так же создал бэкапы до и после.
#18
Отправлено 08 Май 2017 - 12:47
Danil (07 Май 2017 - 18:37) писал:
Изменения Вам произвел, проверьте, пожалуйста.
Так же создал бэкапы до и после.
Отлично! Спасибо!
Можно только логотип сдвинуть влево на уровень раздела "фрукты" ?!
Подскажите еще как сделать следующее:
1. Чтобы "Бесплатная доставка", "Прием заказов", "100% гарантия возврата" при наведении на них не меняли цвет;
2. изменить шрифт текста меню и названия товаров.
#19
Отправлено 08 Май 2017 - 13:25
1.Найдите:
.info-list .info-item a:hover {color: #fff;}замените на:
.info-list .info-item a:hover {color: #aaa;}
2. Для изменения шрифта меню в main.css найдите:
#custommenu .mainnav > li > a {display: block;color: #000;line-height: 40px;padding: 0 22px 0 0;margin-right: 22px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 18px;font-weight: normal;text-transform: uppercase;}и задайте свой font-family:
Для изменения шрифта в названии каталога в main.css найдите:
.products-grid .item .item-inner .item-info .product-name {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0;padding: 10px 0 5px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 20px;}и задайте свой font-family:
Для изменения шрифта в названии в Карточке товара зайдите в main.css и найдите:
h1, h2, h3, h4, h5, h6 {text-rendering: optimizelegibility;font-family: "agency", 'PT Sans Narrow', sans-serif;text-transform: uppercase;line-height:110%;margin:0;padding:0;font-weight:normal;}и задайте свой font-family
Далее в конец кода main.css вставьте:
@media all and (min-width: 767px) { #header .logo {text-align: center;margin-left:-50%;} }
#20
Отправлено 09 Май 2017 - 22:14
metry (08 Май 2017 - 13:25) писал:
1.Найдите:
.info-list .info-item a:hover {color: #fff;}замените на:
.info-list .info-item a:hover {color: #aaa;}
2. Для изменения шрифта меню в main.css найдите:
#custommenu .mainnav > li > a {display: block;color: #000;line-height: 40px;padding: 0 22px 0 0;margin-right: 22px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 18px;font-weight: normal;text-transform: uppercase;}и задайте свой font-family:
Для изменения шрифта в названии каталога в main.css найдите:
.products-grid .item .item-inner .item-info .product-name {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0;padding: 10px 0 5px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 20px;}и задайте свой font-family:
Для изменения шрифта в названии в Карточке товара зайдите в main.css и найдите:
h1, h2, h3, h4, h5, h6 {text-rendering: optimizelegibility;font-family: "agency", 'PT Sans Narrow', sans-serif;text-transform: uppercase;line-height:110%;margin:0;padding:0;font-weight:normal;}и задайте свой font-family
Далее в конец кода main.css вставьте:
@media all and (min-width: 767px) { #header .logo {text-align: center;margin-left:-50%;} }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных