Изменение Верхнего Меню И Меню "категории"
#1
Отправлено 28 Апрель 2017 - 15:03
1.нужно изменить стилистику меню "категории", сделать блок меню темным, шрифт белым, активный пункт меню не розовым а с чуть более светлым фоном, подпункты активного меню еще более светлыми, так же подскажите пожалуйста как можно добавить маленькие иконки к пунктам меню. Прикрепляю скин, где попыталась примерно описать что мне нужно
2. перенести лого и контакты как показано на примере №2 который прикрепляю
3 убрать верхний блог со всех страниц кроме главной прикрепляю рис пример №3
4. сделать знак корзины крупнее
5. подскажите как можно вставлять слева под категориями различные горячие предложения или баннеры (вообщем блок для вывода информации) -рисунок "пример №4"
Заранее благодарю!
#2
Отправлено 28 Апрель 2017 - 15:47
Tanksav (28 Апрель 2017 - 15:03) писал:
1.нужно изменить стилистику меню "категории", сделать блок меню темным, шрифт белым, активный пункт меню не розовым а с чуть более светлым фоном, подпункты активного меню еще более светлыми, так же подскажите пожалуйста как можно добавить маленькие иконки к пунктам меню. Прикрепляю скин, где попыталась примерно описать что мне нужно
2. перенести лого и контакты как показано на примере №2 который прикрепляю
3 убрать верхний блог со всех страниц кроме главной прикрепляю рис пример №3
4. сделать знак корзины крупнее
5. подскажите как можно вставлять слева под категориями различные горячие предложения или баннеры (вообщем блок для вывода информации) -рисунок "пример №4"
Заранее благодарю!
Здравствуйте.
Как вижу второй вопрос у Вас сделан.
3) В шаблоне HTML замените:
<!-- Информационный блок --> <div class="btn-close fa fa-minus" title="Закрыть"></div> <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/dostavka"> <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}/feedback"> <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/garantiya-vozvrat-i-obmen"> <div class="info-icon"> <i class="fa fa-money"></i> </div> <div class="info-content"> <h6>100% гарантия возврата</h6> <p class="text-italic">Возврат товара в течение 14 дней!</p> </div> </a> </li> </ul> </div> </div> </div>
на
{%IF index_page%} <!-- Информационный блок --> <div class="btn-close fa fa-minus" title="Закрыть"></div> <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/dostavka"> <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}/feedback"> <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/garantiya-vozvrat-i-obmen"> <div class="info-icon"> <i class="fa fa-money"></i> </div> <div class="info-content"> <h6>100% гарантия возврата</h6> <p class="text-italic">Возврат товара в течение 14 дней!</p> </div> </a> </li> </ul> </div> </div> </div> {%ENDIF%}
4) В шаблоне main.css Вам нужно найти код:
.block-cart .cart-title i { font-size: 20px; margin-left: 5px; }
и заменить в нем значение font-size на нужное
#3
Отправлено 02 Май 2017 - 07:36
MikDark (28 Апрель 2017 - 15:47) писал:
Как вижу второй вопрос у Вас сделан.
3) В шаблоне HTML замените:
<!-- Информационный блок --> <div class="btn-close fa fa-minus" title="Закрыть"></div> <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/dostavka"> <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}/feedback"> <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/garantiya-vozvrat-i-obmen"> <div class="info-icon"> <i class="fa fa-money"></i> </div> <div class="info-content"> <h6>100% гарантия возврата</h6> <p class="text-italic">Возврат товара в течение 14 дней!</p> </div> </a> </li> </ul> </div> </div> </div>
на
{%IF index_page%} <!-- Информационный блок --> <div class="btn-close fa fa-minus" title="Закрыть"></div> <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/dostavka"> <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}/feedback"> <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/garantiya-vozvrat-i-obmen"> <div class="info-icon"> <i class="fa fa-money"></i> </div> <div class="info-content"> <h6>100% гарантия возврата</h6> <p class="text-italic">Возврат товара в течение 14 дней!</p> </div> </a> </li> </ul> </div> </div> </div> {%ENDIF%}
4) В шаблоне main.css Вам нужно найти код:
.block-cart .cart-title i { font-size: 20px; margin-left: 5px; }
и заменить в нем значение font-size на нужное
#5
Отправлено 02 Май 2017 - 14:04
Tanksav (02 Май 2017 - 13:24) писал:
На Вашем сайте к каждой категории добавлены картинки(См. скриншот), но они ни где не используются, т.к. везде отображаются товары.
Можно заменить эти картинки на иконки и выводить их в боковом каталоге, как показано на Вашем скриншоте из сообщения 4. Вас устроит такой вариант?
#6
Отправлено 02 Май 2017 - 14:27
Danil (02 Май 2017 - 14:04) писал:
На Вашем сайте к каждой категории добавлены картинки(См. скриншот), но они ни где не используются, т.к. везде отображаются товары.
Можно заменить эти картинки на иконки и выводить их в боковом каталоге, как показано на Вашем скриншоте из сообщения 4. Вас устроит такой вариант?
Screenshot_17.png
#7
Отправлено 03 Май 2017 - 02:40
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Каталог --> {% IFNOT catalog_full_empty %} <div class="block catalog"> <h3 class="title"><a href="{CATALOG_URL}">Каталог</a></h3> <div class="content"> <ul> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </ul> </div> </div> {% ENDIF %} <!-- /END Каталог -->
замените на:
<!-- Каталог --> {% IFNOT catalog_full_empty %} <div class="block catalog"> <h3 class="title"><a href="{CATALOG_URL}">Каталог</a></h3> <div class="content"> <ul> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %} {% IF catalog_full.NAME = Название категории1 %}<img src="ссылка на иконку" alt="" /> {% ELSEIF catalog_full.NAME = Название категории2 %}<img src="ссылка на иконку" alt="" /> {% ELSEIF catalog_full.NAME = Название категории3 %}<img src="ссылка на иконку" alt="" /> {% ELSEIF catalog_full.NAME = Название категории4 %}<img src="ссылка на иконку" alt="" /> {% ENDIF %} {catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </ul> </div> </div> {% ENDIF %} <!-- /END Каталог -->
В данном блоке измените название категорий на необходимое и ссылки на иконки, так же по аналогии вы можете продолжить список условий по вставке иконок в зависимости от названия категорий.
Далее зайдите в шаблон main.css - найдите:
.block .content ul li .open-sub:before { content: "\f055"; display: block; vertical-align: middle; width: 16px; height: 16px; line-height: 16px; color: #8b8a8a; text-align: center; }
после него пропишите:
.block.catalog .content { background: #1E1E21; } .block.catalog .content a, .block.catalog .content ul li .open-sub:before { color: #ffffff; text-shadow: none; } .block.catalog .content a img { max-width: 40px; margin-right: 5px; }
#8
Отправлено 03 Май 2017 - 10:31
Vaccina (03 Май 2017 - 02:40) писал:
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Каталог --> {% IFNOT catalog_full_empty %} <div class="block catalog"> <h3 class="title"><a href="{CATALOG_URL}">Каталог</a></h3> <div class="content"> <ul> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </ul> </div> </div> {% ENDIF %} <!-- /END Каталог -->
замените на:
<!-- Каталог --> {% IFNOT catalog_full_empty %} <div class="block catalog"> <h3 class="title"><a href="{CATALOG_URL}">Каталог</a></h3> <div class="content"> <ul> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %} {% IF catalog_full.NAME = Название категории1 %}<img src="ссылка на иконку" alt="" /> {% ELSEIF catalog_full.NAME = Название категории2 %}<img src="ссылка на иконку" alt="" /> {% ELSEIF catalog_full.NAME = Название категории3 %}<img src="ссылка на иконку" alt="" /> {% ELSEIF catalog_full.NAME = Название категории4 %}<img src="ссылка на иконку" alt="" /> {% ENDIF %} {catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {% ENDFOR %} </ul> </div> </div> {% ENDIF %} <!-- /END Каталог -->
В данном блоке измените название категорий на необходимое и ссылки на иконки, так же по аналогии вы можете продолжить список условий по вставке иконок в зависимости от названия категорий.
Далее зайдите в шаблон main.css - найдите:
.block .content ul li .open-sub:before { content: "\f055"; display: block; vertical-align: middle; width: 16px; height: 16px; line-height: 16px; color: #8b8a8a; text-align: center; }
после него пропишите:
.block.catalog .content { background: #1E1E21; } .block.catalog .content a, .block.catalog .content ul li .open-sub:before { color: #ffffff; text-shadow: none; } .block.catalog .content a img { max-width: 40px; margin-right: 5px; }
#11
Отправлено 11 Май 2017 - 07:10
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.block .content ul li a.active { color: #c7081b; }
замените на:
.block .content ul li.parent.subhead { margin: 0 -15px; padding: 0 15px; } .block .content ul li.parent.subhead.active > a, .block .content ul li.parent.subhead.active { background: #fff; color: #000; font-weight: bold; } .block .content ul li.parent.subhead.active ul a { font-weight: normal; } .block .content ul li.parent.subhead.active > ul { background: #999; margin: 0 -15px; padding: 0 15px; } .block .content ul li a.active { color: #c7081b; }
#12
Отправлено 11 Май 2017 - 08:52
Vaccina (11 Май 2017 - 07:10) писал:
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.block .content ul li a.active { color: #c7081b; }
замените на:
.block .content ul li.parent.subhead { margin: 0 -15px; padding: 0 15px; } .block .content ul li.parent.subhead.active > a, .block .content ul li.parent.subhead.active { background: #fff; color: #000; font-weight: bold; } .block .content ul li.parent.subhead.active ul a { font-weight: normal; } .block .content ul li.parent.subhead.active > ul { background: #999; margin: 0 -15px; padding: 0 15px; } .block .content ul li a.active { color: #c7081b; }
#13
Отправлено 12 Май 2017 - 07:02
Прошу прощения, не заметила прошлого сообщения.
Tanksav (10 Май 2017 - 16:05) писал:
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <div class="block-phone"> <i class="fa fa-phone"></i> <span class="label">: </span> <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> </div> {% ENDIF %}
после него пропишите:
{% IF SETTINGS_STORE_PHONE_NUMBER2 %} <div class="block-phone"> <i class="fa fa-whatsapp"></i> <span class="label">: </span> <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> </div> {% ENDIF %}
В main.css - найдите:
.block-phone { display: inline-block; float: none; width: 200px; line-height: 40px; margin-left: 30px; text-transform: uppercase; }
замените на:
.block-phone { display: inline-block; float: right; width: 200px; line-height: 40px; margin-left: 30px; text-transform: uppercase; }
Далее в шаблоне HTML найдите:
<!-- Корзина --> <div class="col-lg-3 col-sm-4 col-sms-6 col-smb-6 col-right"> <div class="block-cart {% IFNOT CART_COUNT_TOTAL = 0 %}have-items{% ENDIF %} {% IF MOD_LNAME = cart %}cart-page{% ENDIF %}"> <div class="cart-title">
замените на:
<!-- Корзина --> <div class="col-lg-3 col-sm-4 col-sms-6 col-smb-6 col-right"> <div style="float:left;">Адрес<br/>Время работы</div> <div class="block-cart {% IFNOT CART_COUNT_TOTAL = 0 %}have-items{% ENDIF %} {% IF MOD_LNAME = cart %}cart-page{% ENDIF %}"> <div class="cart-title">
и замените текст на необходимый.
#14
Отправлено 12 Май 2017 - 10:43
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных