Выделить Цветом Отдельные Пункты В Меню И Разделы Сайта
#1
Отправлено 20 Январь 2013 - 15:52
#2
Отправлено 21 Январь 2013 - 06:26
В файле HTML.
Найти код:
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}Заменить:
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %} style="color:black;background-color:blue;" {%ELSEIF catalog_full.NAME=продукты2 %}style="color:white;background-color:black;" {%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}C помощью кода мы проверяем.
Текущее имя каталога равно "продукты", если да то задаем для данного пункта цвета.
Естественно, в этом коде нужно указать название каталога и задать определенные цвета.
#3
Отправлено 21 Январь 2013 - 08:09
#4
Отправлено 21 Январь 2013 - 10:19
В файле "HTML" условие измениться на :
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %} style="color:black;background-color:blue;" {%ELSEIF catalog_full.NAME=продукты2 %}class="p1"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}В файле "main.csstemplate".
Добавить:
.p1 {/*постоянные цвета для данного пункта*/ color:white;/*цвет текста*/ background-color: #F48916;/*цвет фона*/ } p1:hover {/*цвет пункта меню при наведение*/ color:white;/*цвет текста*/ background-color: blue; }
Соответственно для следующих индивидуальных пунктов все будет аналогично просто разные названия классов для стилей
Для меню на сайте.
Меню тоже выводится в цикле. Значит изменения будут похожи.
В файле "HTML".
Найти код:
{% FOR menu %} {% FOR footer %} <div class="menu_main"> <a class="link_nav" title="Разделы сайта">Разделы сайта</a> <a title="Разделы сайта" style="text-decoration: none"><h4 class="hidden-phone">Разделы сайта</h4></a> <ul> {% FOR links %}<li><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} </ul> </div> {% ENDFOR %} {% ENDFOR %}
Заменить:
{% FOR menu %} {% FOR footer %} <div class="menu_main"> <a class="link_nav" title="Разделы сайта">Разделы сайта</a> <a title="Разделы сайта" style="text-decoration: none"><h4 class="hidden-phone">Разделы сайта</h4></a> <ul> {% FOR links %}<li {% IF menu.footer.links.NAME=Главная %} class="m1" {%ELSEIF menu.footer.links.NAME=О сайте %} class="m2" {%ENDIF%}><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %} </ul> </div> {% ENDFOR %} {% ENDFOR %}Теперь пропишем стили для индивидуального пункта меню.
В файле "main.csstemplate".
Добавить код:
.m1 {/*постоянные стили*/ color:red;/*цвет текста*/ background-color:green;/*цвет фона*/ } .m1:hover {/*при наведение мышкой*/ color:green;/*цвет текста*/ backgrond-color:blue;/*цвет фона*/ }
А еще. В файле "bootstrap-responsive.css".
Найти код:
.menu_main li, .menu_main li a { background-color: #71A744;/*цвет фона*/ padding-left:5px;/*отступ слева*/ color:white!important;/*цвет текста*/ }Заменить:
.menu_main li, .menu_main li a { background-color: #71A744;/*цвет фона*/ color:white!important;/*цвет текста*/ }В файле "main.csstemplate".
Найти код:
.footer ul li a{color:#B2B2B2; text-decoration:none;text-align:left;}Заменить:
.footer ul li a{ color:#B2B2B2; text-decoration:none; text-align:left; padding-left: 5px;/*отступ слева*/ }
#5
Отправлено 21 Январь 2013 - 12:04
Я выполнил первый пункт :
Для того чтобы изменять цвет фона пункта при наведение мыши.Придется стили прописать в классе.
В файле "HTML" условие измениться на :
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
{% IF catalog_full.FIRST %}<ul>{% ENDIF %}
<li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}>
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %} style="color:black;background-color:blue;" {%ELSEIF catalog_full.NAME=продукты2 %}class="p1"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span>
{% 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%}
В файле "main.csstemplate".
Добавить:
.p1 {/*постоянные цвета для данного пункта*/
color:white;/*цвет текста*/
background-color: #F48916;/*цвет фона*/
}
p1:hover {/*цвет пункта меню при наведение*/
color:white;/*цвет текста*/
background-color: blue;
}
Соответственно для следующих индивидуальных пунктов все будет аналогично просто разные названия классов для стилей
Я выполнил все описанные действия, но почему то при наведении мыши так цвет и не меняется, подскажите пожалуйста , может что упустил
Остальные пункты пока не выполнял ,
код цвета : #F48916
http://asfn.storeland.ru/
#6
Отправлено 21 Январь 2013 - 12:31
Нормальный код для вывода каталога.
В предыдущем коде были назначены индивидуальные стили у которых наибольший приоритет.
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %}class="p1"{%ELSEIF catalog_full.NAME=продукты2 %}class="p2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}Теперь цвета для пункта "продукты" будут применяться из класса "p1".
#7
Отправлено 21 Январь 2013 - 13:41
#8
Отправлено 21 Январь 2013 - 13:50
Работает это так.
Если текушее название категории равно, например "продукты".
То присваиваем этому пункту класс стилей "p1".
в котором уже прописаны стили специально для данного пункта меню в файле main.csstemplate.
#9
Отправлено 09 Февраль 2013 - 12:12
Koderhan (21 Январь 2013 - 12:31) писал:
Нормальный код для вывода каталога.
В предыдущем коде были назначены индивидуальные стили у которых наибольший приоритет.
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %}class="p1"{%ELSEIF catalog_full.NAME=продукты2 %}class="p2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}Теперь цвета для пункта "продукты" будут применяться из класса "p1".
Заменил код в шаблоне "HTML"
{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
{% IF catalog_full.FIRST %}<ul>{% ENDIF %}
<li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}>
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=ТОВАРЫ В НАЛИЧИИ %}class="p1" {%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span>
{% 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%}
Далее добавил код в "main.csstemplate" код:
.p1 {/*постоянные цвета для данного пункта*/
color:white;/*цвет текста*/
background-color: #F68A17;/*цвет фона*/
}
p1:hover {/*цвет пункта меню при наведение*/
color:black;/*цвет текста*/
background-color: #E8E8E8;
изменений нет http://asfn.storeland.ru/
#10
Отправлено 09 Февраль 2013 - 13:31
Изменить код:
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %}class="p1"{%ELSEIF catalog_full.NAME=продукты2 %}class="p2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}На код:
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %}class="p1" style="{background-color:blue;color:white;}:hover {background: yellow;color:white;}"{%ELSEIF catalog_full.NAME=продукты2 %}class="p2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}
#11
Отправлено 09 Февраль 2013 - 13:49
#12
Отправлено 12 Февраль 2013 - 01:25
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %}class="p1" style="{background-color:blue;color:white;}:hover {background: yellow;color:white;}"{%ELSEIF catalog_full.NAME=продукты2 %}class="p2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}
и заменить на
{%IFNOT catalog_full_empty%} {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %} id="catitem1"{%ELSEIF catalog_full.NAME=продукты2 %} id="catitem2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}
и далее в файл стилей main.css добавить
li #catitem1 { color:white !important; background-color: #F68A17 !important; } li #catitem1:hover { color: black !important; background-color: #E8E8E8 !important; }
#13
Отправлено 12 Февраль 2013 - 10:22
#14
Отправлено 13 Февраль 2013 - 02:04
#15
Отправлено 22 Февраль 2013 - 14:41
Vaccina (12 Февраль 2013 - 01:25) писал:
{%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %}class="p1" style="{background-color:blue;color:white;}:hover {background: yellow;color:white;}"{%ELSEIF catalog_full.NAME=продукты2 %}class="p2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}
и заменить на
{%IFNOT catalog_full_empty%} {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul>{% ENDIF %} <li {% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %}> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %} {% IF catalog_full.NAME=продукты %} id="catitem1"{%ELSEIF catalog_full.NAME=продукты2 %} id="catitem2"{%ENDIF%}>{catalog_full.NAME}</a><span class="icons"{% IFNOT catalog_full.ISSET_SUB %}style="display: none;"{% ENDIF %}></span> {% 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%}
и далее в файл стилей main.css добавить
li #catitem1 { color:white !important; background-color: #F68A17 !important; } li #catitem1:hover { color: black !important; background-color: #E8E8E8 !important; }
Ура, все получилось , благодарю Вас
Подскажите пожалуйста еще путь как сделать такой же "фокус" для разделов сайта?!
#16
Отправлено 22 Февраль 2013 - 14:44
#17
Отправлено 22 Февраль 2013 - 15:54
фон оранжевый, цвет текста белый
при наведении , фон серый, цвет шрифта черный
#18
Отправлено 22 Февраль 2013 - 16:45
#19
Отправлено 22 Февраль 2013 - 17:07
Stasya (22 Февраль 2013 - 16:45) писал:
{% FOR menu %}
{% FOR footer %}
<div class="menu_main">
<a class="link_nav" title="Разделы сайта">Разделы сайта</a>
<a title="Разделы сайта" style="text-decoration: none"><img src="http://asfn.storelan...ка 34.jpg?1437" class="hidden-phone"/></a>
<ul>
{% FOR links %}<li><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %} {%IF menu.footer.links.NAME=Вебинары%}target="_blank"{%ENDIF%} {%IF menu.footer.links.NAME=Все проекты Сообщества%}target="_blank"{%ENDIF%} {%IF menu.footer.links.NAME=Стать пользователем ASFN%}target="_blank"{%ENDIF%} >{menu.footer.links.NAME}</a></li>{% ENDFOR %}
</ul>
</div>
{% ENDFOR %}
{% ENDFOR %}
#20
Отправлено 23 Февраль 2013 - 06:53
<div class="menu_main"> <a class="link_nav" title="Разделы сайта">Разделы сайта</a>
на
<div class="menu_main other_link"> <a class="link_nav" title="Разделы сайта">Разделы сайта</a>
и классы
li #catitem1 { color:white !important; background-color: #F68A17 !important; } li #catitem1:hover { color: black !important; background-color: #E8E8E8 !important; }
замените на
li #catitem1, .other_link a { color:white !important; background-color: #F68A17 !important; } li #catitem1:hover, .other_link a:hover { color: black !important; background-color: #E8E8E8 !important; }
Темы с аналогичным тегами меню, цвет, отдельно
Вопросы работы сервиса StoreLand →
Другие вопросы →
Изменение Url'a Ссылки Навигационного МенюАвтор Гость_smoke_story_* , 05 нояб. 2019 Навигация, Меню и 4 еще... |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лазурь →
Каталог товаров →
Сделать Выпадающее МенюАвтор Гость_arpico-latex_* , 16 янв. 2019 выпадающее, меню |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Осень →
Нужна Помощь Редактировании Шаблона ОсеньАвтор Гость_Olga1215_* , 16 нояб. 2018 осень, шапка, фон сайта и 4 еще... |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Весна →
Другое →
Убрать Строку-Меню Перед ПодваломАвтор Гость_Olivka_* , 14 июня 2018 подвал, меню |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Весна →
Изменение общей стилистики →
Изменить Цвет ФонаАвтор Гость_Olivka_* , 14 июня 2018 главная, фон, цвет |
|
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных