Выделить Кнопки

Здравствуйте!

Как на главной странице выделить кнопку "каталог" в меню и кнопку "перейти в каталог" на баннере тем же цветом и таким же изменением при наведении курсора как у кнопки "обратный звонок" в шапке сайта?

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;}

Спасибо, все получилось