Убрать Шторку, Добавить Кнопку И Изменить Цвет!
#1
Отправлено 24 Сентябрь 2015 - 14:34
1) Как сделать что бы при наведении на карточку товара не всплывала шторка и три кнопки?
2) Возможно ли добавить в это место кнопку, ведущую не на страницу каталога, а на отдельную страницу сайта? Если можно то как менять ее цвет?
3) Как изменить цвет остальных кнопок, как серый так и оранжевый(при наведении)?
Заранее спасибо за помощь!
#2
Отправлено 24 Сентябрь 2015 - 20:39
Вячеслав07 (24 Сентябрь 2015 - 14:34) писал:
1) Как сделать что бы при наведении на карточку товара не всплывала шторка и три кнопки?
2) Возможно ли добавить в это место кнопку, ведущую не на страницу каталога, а на отдельную страницу сайта? Если можно то как менять ее цвет?
3) Как изменить цвет остальных кнопок, как серый так и оранжевый(при наведении)?
Заранее спасибо за помощь!
1. В main.css замените
.products-grid .item-inner .bg-hover-grid {position: absolute;top: 0;right: -100%;width: 100%;height: 100%;opacity: 0.9;filter: alpha(opacity = 90);z-index: 1;background-color: rgba(247,146,66, 1);}на
.products-grid .item-inner .bg-hover-grid {position: absolute;top: 0;right: -100%;width: 100%;height: 100%;opacity: 0.9;filter: alpha(opacity = 90);z-index: 1;background-color: rgba(247,146,66, 1);display: none;}затем
.products-grid .item-inner .product-addto-wrap {position: absolute;z-index: 1;top: 40%;left: -100%;}замените на
.products-grid .item-inner .product-addto-wrap {position: absolute;z-index: 1;top: 40%;left: -100%;display: none;}2. В разделе Сайт - Меню добавьте новый пункт меню, и укажите произвольную ссылку.
3. В main.css замените цвета кнопки при наведении
#nav li a:hover {color: #fff;background: #f79242;}и в обычном состоянии
#nav li a {display: block; font-size: 15px;line-height: 100%;background: #f2f2f2;padding: 15px 20px 15px;margin: 0px;margin-right: 1px;margin-bottom:1px;-webkit-border-radius: 0px;-moz-border-radius: 0px;-o-border-radius: 0px;border-radius: 0px;}в параметрах color и background.
#3
Отправлено 24 Сентябрь 2015 - 21:17
Alekseys (24 Сентябрь 2015 - 20:39) писал:
1. В main.css замените
.products-grid .item-inner .bg-hover-grid {position: absolute;top: 0;right: -100%;width: 100%;height: 100%;opacity: 0.9;filter: alpha(opacity = 90);z-index: 1;background-color: rgba(247,146,66, 1);}на
.products-grid .item-inner .bg-hover-grid {position: absolute;top: 0;right: -100%;width: 100%;height: 100%;opacity: 0.9;filter: alpha(opacity = 90);z-index: 1;background-color: rgba(247,146,66, 1);display: none;}затем
.products-grid .item-inner .product-addto-wrap {position: absolute;z-index: 1;top: 40%;left: -100%;}замените на
.products-grid .item-inner .product-addto-wrap {position: absolute;z-index: 1;top: 40%;left: -100%;display: none;}2. В разделе Сайт - Меню добавьте новый пункт меню, и укажите произвольную ссылку.
3. В main.css замените цвета кнопки при наведении
#nav li a:hover {color: #fff;background: #f79242;}и в обычном состоянии
#nav li a {display: block; font-size: 15px;line-height: 100%;background: #f2f2f2;padding: 15px 20px 15px;margin: 0px;margin-right: 1px;margin-bottom:1px;-webkit-border-radius: 0px;-moz-border-radius: 0px;-o-border-radius: 0px;border-radius: 0px;}в параметрах color и background.
Спасибо, все получилось! Но по второму вопросу Вы не правильно поняли! Нужно создать кнопку на строке рядом с категориями каталога, как указано на скрине! Если данное невозможно реализовать, то подскажите как можно отдельно изменить цвет каждой кнопки в главном меню.
#4
Отправлено 25 Сентябрь 2015 - 04:16
Далее зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}"> <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% 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%} {%ENDIF%} </ul> </div> </div> <!-- /END Каталог с подкатегориями -->
замените на:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}"> <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% 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%} {%ENDIF%} {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями -->
#5
Отправлено 25 Сентябрь 2015 - 11:23
Vaccina (25 Сентябрь 2015 - 04:16) писал:
Далее зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}"> <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% 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%} {%ENDIF%} </ul> </div> </div> <!-- /END Каталог с подкатегориями -->
замените на:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}"> <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% 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%} {%ENDIF%} {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями -->
1) Меню добавилось, но криво. Нужно что бы оно было заменой "меню категорий каталога" и выглядело такими же кнопками.
2) И нужно что бы в мобильной версии при нажатии на кнопку "каталог", так же вместо категорий открывалось это меню.
#6
Отправлено 26 Сентябрь 2015 - 03:13
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}"> <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% 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%} {%ENDIF%} {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями --> <!-- Адаптивный каталог с подкатегориями --> <div id="resmenu_sidebar"> <ul class="nav-menu clearfix"> {% 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"></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> <!-- /END Адаптивный каталог с подкатегориями -->
замените на:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями --> <!-- Адаптивный каталог с подкатегориями --> <div id="resmenu_sidebar"> <ul class="nav-menu clearfix"> {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class=" subhead "><a href="{menu.nearby.links.URL}" class="{% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <!-- /END Адаптивный каталог с подкатегориями -->
#7
Отправлено 26 Сентябрь 2015 - 13:47
Vaccina (26 Сентябрь 2015 - 03:13) писал:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}"> <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% 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%} {%ENDIF%} {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями --> <!-- Адаптивный каталог с подкатегориями --> <div id="resmenu_sidebar"> <ul class="nav-menu clearfix"> {% 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"></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> <!-- /END Адаптивный каталог с подкатегориями -->
замените на:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями --> <!-- Адаптивный каталог с подкатегориями --> <div id="resmenu_sidebar"> <ul class="nav-menu clearfix"> {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class=" subhead "><a href="{menu.nearby.links.URL}" class="{% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <!-- /END Адаптивный каталог с подкатегориями -->
Спасибо, все получилось!
#9
Отправлено 02 Октябрь 2015 - 13:00
Vaccina (26 Сентябрь 2015 - 03:13) писал:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li class="category-level-{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}"> <a href="{catalog_full.URL}" class="lvl-{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}selected{% 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%} {%ENDIF%} {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями --> <!-- Адаптивный каталог с подкатегориями --> <div id="resmenu_sidebar"> <ul class="nav-menu clearfix"> {% 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"></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> <!-- /END Адаптивный каталог с подкатегориями -->
замените на:
<!-- Каталог с подкатегориями --> <div class="yt-menu"> <div class="yt-menu-nav"> <ul id="nav" class="clearfix"> {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class="category-level-0"><a href="{menu.nearby.links.URL}" class="lvl-0 {% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- /END Каталог с подкатегориями --> <!-- Адаптивный каталог с подкатегориями --> <div id="resmenu_sidebar"> <ul class="nav-menu clearfix"> {% FOR menu %} {% FOR nearby %} {% FOR links %} <li class=" subhead "><a href="{menu.nearby.links.URL}" class="{% IF menu.nearby.links.SELECTED %}selected{%ENDIF%}" {% IF menu.nearby.links.TITLE %}title="{menu.nearby.links.TITLE}"{% ENDIF %}>{menu.nearby.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <!-- /END Адаптивный каталог с подкатегориями -->
И снова здравствуйте! Подскажите как теперь сделать выпадающее меню при наведении, как на скрине?
В нем должны быть категории меню!
Прикрепленные изображения
#10
Отправлено 03 Октябрь 2015 - 00:09
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных