Здравствуйте!
Как на главной странице выделить кнопку "каталог" в меню и кнопку "перейти в каталог" на баннере тем же цветом и таким же изменением при наведении курсора как у кнопки "обратный звонок" в шапке сайта?
1
Выделить Кнопки
Автор sandra.005@mail.ru, 18 нояб. 2017 15:00
Сообщений в теме: 2
#1
Отправлено 18 Ноябрь 2017 - 15:00
#2
Отправлено 18 Ноябрь 2017 - 15:49
sandra.005@mail.ru (18 Ноябрь 2017 - 15:00) писал:
Здравствуйте!
Как на главной странице выделить кнопку "каталог" в меню и кнопку "перейти в каталог" на баннере тем же цветом и таким же изменением при наведении курсора как у кнопки "обратный звонок" в шапке сайта?
Как на главной странице выделить кнопку "каталог" в меню и кнопку "перейти в каталог" на баннере тем же цветом и таким же изменением при наведении курсора как у кнопки "обратный звонок" в шапке сайта?
В шаблоне html найдите код
<a href="{CATALOG_URL}" class="button big">Перейти в каталог</a>и замените на
<a href="{CATALOG_URL}" class="button big button3">Перейти в каталог</a>В шаблоне html найдите код
<!-- Меню в шапке --> <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>и замените на
<!-- Меню в шапке --> <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" class="{% IF menu.header.links.NAME = КАТАЛОГ %}button button3{% ELSE %}not-catalog{%ENDIF%} {% IF menu.header.links.SELECTED %}active{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>В main.css найдите код
#custommenu .mainnav > li > a {display: block;position: relative;color: #000;line-height: 40px;margin-right: 20px;padding: 0 3px;font-size: 16px;font-weight: normal;text-transform: uppercase;} #custommenu .mainnav > li > a:after {position: absolute;content: "";background: #620337;left: 0;top: 0;right: 0;line-height: 0;height: 4px;width: 4px;margin: auto;z-index: 9;opacity: 0;filter: alpha(opacity=0);-webkit-transition: width 0.5s ease 0s, height 0.5s ease 0s;transition: width 0.5s ease 0s, height 0.5s ease 0s;} #custommenu .mainnav > li > a:hover:after {opacity: 1;filter: alpha(opacity=100);width: 100%;}и замените на
#custommenu .mainnav > li > a.button3 {margin-right: 20px;display:block;} #custommenu .mainnav > li > a.not-catalog {display: block;position: relative;color: #000;line-height: 40px;margin-right: 20px;padding: 0 3px;font-size: 16px;font-weight: normal;text-transform: uppercase;} #custommenu .mainnav > li > a.not-catalog:after {position: absolute;content: "";background: #620337;left: 0;top: 0;right: 0;line-height: 0;height: 4px;width: 4px;margin: auto;z-index: 9;opacity: 0;filter: alpha(opacity=0);-webkit-transition: width 0.5s ease 0s, height 0.5s ease 0s;transition: width 0.5s ease 0s, height 0.5s ease 0s;} #custommenu .mainnav > li > a.not-catalog:hover:after {opacity: 1;filter: alpha(opacity=100);width: 100%;}так же найдите код
#custommenu .mainnav li a.title-lv1 {display: block;font-size: 16px;color: #22121e;margin: 8px 0 10px 0;padding: 0 0 5px 0;border-bottom: 1px solid #e2dfdf;text-transform: uppercase;} #custommenu .mainnav li a.title-lv1:hover {color: #8C2C29;} #custommenu .mainnav li a.title-lv2 {display: block;position: relative;text-transform: capitalize;padding: 7px 0 7px 15px;} #custommenu .mainnav li a.title-lv2:before {content: "\f105";position: absolute;font-family: fontawesome;font-size: 14px;left: 0px;line-height: 20px;}и замените на
#custommenu .mainnav li a.not-catalog.title-lv1 {display: block;font-size: 16px;color: #22121e;margin: 8px 0 10px 0;padding: 0 0 5px 0;border-bottom: 1px solid #e2dfdf;text-transform: uppercase;} #custommenu .mainnav li a.not-catalog.title-lv1:hover {color: #8C2C29;} #custommenu .mainnav li a.not-catalog.title-lv2 {display: block;position: relative;text-transform: capitalize;padding: 7px 0 7px 15px;} #custommenu .mainnav li a.not-catalog.title-lv2:before {content: "\f105";position: absolute;font-family: fontawesome;font-size: 14px;left: 0px;line-height: 20px;}
#3
Отправлено 18 Ноябрь 2017 - 16:06
Спасибо, все получилось
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных