Как поменять цвет категорий и подкатегорий
#1
Отправлено 21 Сентябрь 2010 - 19:50
#2
Отправлено 21 Сентябрь 2010 - 22:39
MariG (21 Сентябрь 2010 - 19:50) писал:
Изначальный код у Вас выглядит так:
<!-- Каталог --> <div class="pad-box"> <ul class="leftmenu"> <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul><br /> </li>
Этап первый, по вашему заданию
Изменяем код отображения корневой категории, для этого вставляем условие, которое будет проверять уровень вложенности категории. Сделаем например светло розовый фон и черный шрифт. При выделении выделим этот шрифт жирным цветом.
Шаг 1. Создадим пару стилей:
.leftmenu li li.root a {background-color:#fdf5f3;color:#000000;} .leftmenu li li.root.selected a {font-weight:bold;color:#000000;}Здесь:
background-color:#fdf5f3; - розовый фон
color:#000000; - черный шрифт
font-weight:bold; - жирный шрифт
Эти стили можно прописать в редакторе тем:
либо в html шаблоне. Для шаблона пишем с указанием тега style, вот так:
<style> .leftmenu li li.root a {background-color:#fdf5f3;color:#000000;} .leftmenu li li.root.selected a {font-weight:bold;color:#000000;} </style>
Если пишем в css шаблоне магазина (файл main.csstemplate) Тогда будет достаточно просто вставить в файл шаблона вышеуказанный код без тегов style.
Шаг 2. Изменим в изначальном html код ячейки категории, добавим в него условие что все корневые категории имеют стиль "root".
Вместо старого кода:
<li class="cat-item">вставляем новый код:
<li class="cat-item {% IF catalog.LEVEL=0%} cat-root{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}">
Получили следующий результат:
Этап второй, не обязательный.
Раскрашиваем вложенные категории, делаем светло-голубой шрифт и изменяем цвета шрифтов:
Шаг 1. Добавляем 2 стиля рядом с вставленными в этапе первом, первом шаге:
.leftmenu li li.sub a {background-color:#e5f2fe;color:#e54c2c;} .leftmenu li li.sub.selected a {font-weight:bold;color:#000000;}Здесь:
background-color:#e5f2fe; - светло голубой фон
color:#e54c2c; - темно оранжевый цвет шрифта
font-weight:bold; - жирный шрифт при выделении
color:#000000; - черный цвет при выделении
По большому счету можно создавать не ограниченно такую вложенность, но мы ограничимся для данного случая одной.
Шаг 2. Конечно же изменяем html код, указывая еще одно условие - все вложенные категории имеют стиль "sub" получаем:
<li class="cat-item{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}">Нажимаем волшебную кнопку сохранить и вуаля! получаем вот такой вот результат:
Код который получился в результате:
<style> .leftmenu li li.root a {background-color:#fdf5f3;color:#000000;} .leftmenu li li.root.selected a {font-weight:bold;color:#000000;} .leftmenu li li.sub a {background-color:#e5f2fe;color:#e54c2c;} .leftmenu li li.sub.selected a {font-weight:bold;color:#000000;} </style> <!-- Каталог --> <div class="pad-box"> <ul class="leftmenu"> <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul><br /> </li>
Здесь можно копировать прям как написано, браузеры прекрасно обрабатывают получившийся код, ничего страшного не случится. Хотя по стандартам стили должны быть в теге head страницы либо вынесены в отдельный файл.
#3
Отправлено 24 Сентябрь 2010 - 14:19
Только вот, что -то не получается "вуаля"- как Вы говорите. Все, вроде бы понятно, кроме одного - где именно, я должна вставить:
.leftmenu li li.root a {background-color:#fdf5f3;color:#000000;}
.leftmenu li li.root.selected a {font-weight:bold;color:#000000;}
вы написали, как выглядит изначальный код "до", а можно еще написать, как оно должно выглядеть "после".
А остальное я нашла, где и как вставить.
Заранее спасибо.
#4
Отправлено 25 Сентябрь 2010 - 03:38
Сообщение ответа обновил, добавил получившийся код
#6
Отправлено 27 Сентябрь 2010 - 16:31
#8
Отправлено 29 Сентябрь 2010 - 14:59
#9
Отправлено 05 Май 2011 - 11:42
<style>
.leftmenu li li.root a {background-color:#fdf5f3;color:#000000;}
.leftmenu li li.root.selected a {font-weight:bold;color:#000000;}
.leftmenu li li.sub a {background-color:#e5f2fe;color:#e54c2c;}
.leftmenu li li.sub.selected a {font-weight:bold;color:#000000;}
</style>
<!-- Каталог -->
<div class="pad-box">
<ul class="leftmenu">
<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
<ul>
{%IFNOT catalog_empty %}
{% FOR catalog %}
{% IFNOT catalog.HIDE %}
<li class="cat-item{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}">
<a href="{catalog.URL}"
{% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>{catalog.NAME}</a>
</li>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul><br />
</li>
#10
Отправлено 05 Май 2011 - 16:22
#11
Отправлено 05 Май 2011 - 18:27
#12
Отправлено 05 Май 2011 - 22:43
#13
Отправлено 06 Май 2011 - 08:59
#14
Отправлено 06 Май 2011 - 16:33
нужно найти в шаблоне "html"
<ul class="leftmenu"> <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul><br /> </li>
заменить на
<ul class="leftmenu"> <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li class="cat-item{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}"> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul><br /> </li>
далее в самый конец файла main.css добавить следующий блок
.leftmenu li li.root a {background-color:#fdf5f3;color:#000000;} .leftmenu li li.root.selected a {font-weight:bold;color:#000000;} .leftmenu li li.sub a {background-color:#e5f2fe;color:#e54c2c;} .leftmenu li li.sub.selected a {font-weight:bold;color:#000000;}
#15
Отправлено 06 Май 2011 - 23:02
Вот только с переносом каталога в правую сторону осталось
#16
Отправлено 02 Июнь 2011 - 14:54
И еще. у меня товары в рамках разной величины, выглядит очень топорно...
#17
Отправлено 02 Июнь 2011 - 15:01
#18
Отправлено 03 Июнь 2011 - 05:18
.goodsListItem { overflow: hidden; padding: 0; text-align: center; vertical-align: top; width: 195px; }
#19
Отправлено 03 Июнь 2011 - 11:21
#20
Отправлено 04 Июнь 2011 - 09:22
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных