Перейти к содержимому


Как поменять цвет категорий и подкатегорий

Автор MariG, 21 сент. 2010 19:50

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 71

#41 sergey85

sergey85

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 230 сообщений
  • ГородКиев

Отправлено 21 Январь 2012 - 20:51

А как в Шаблоне Лайт поменять цвета основных категорий и сделать текст пожирнее?

#42 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 23 Январь 2012 - 19:53

Это можно сделать добавив в файл стилей main.css следующий класс

.contentTbodyCatalog > ul > li > a {
   color: #000000 !important;
   font-size:14px !important;
}

Далее изменить или добавить необходимые свойства.

#43 riviso

riviso

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 28 Февраль 2012 - 03:47

1)подскажите... хочу сделать в 3 вида
http://riviso.ru (шаблон Мокко на всякий случай)

вот код что не так?

Цитата

<style>
  .leftmenu li li.root a {color: #041389;font-size: 24px;font-weight:bold}
  .leftmenu li li.root.selected a {font-weight:bold;}
  .leftmenu li li.sub a {color:#000000;font-size: 16px;font-weight:bold;}
  .leftmenu li li.sub.selected a {font-weight:bold;}
  .leftmenu li li.sub b {color:#000000;font-size: 14px;}
  .leftmenu li li.sub.selected b {font-weight:bold;}
</style>

              
              <!-- Каталог -->
<div class="pad-box">
  <ul class="leftmenu">
    <li class="categories">
      <ul>
      {%IFNOT catalog_full_empty %}
        {% FOR catalog_full %}
          {% IFNOT catalog_full.HIDE %}
            <li class="cat-item{% IF catalog_full.LEVEL=0%} root{% ENDIF %}{% IF catalog_full.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog_full.CURRENT %} selected{% ENDIF %}">
              <a href="{catalog_full.URL}"
                {% IF catalog_full.LEVEL>0%}style="padding-left:{catalog_full.LEVEL | multiply("20")}px"{% ENDIF %}
                {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}
              >{catalog_full.NAME}</a>
            </li>
      
                    {% ENDIF %}
                  {% ENDFOR %}
                {% ENDIF %}
       </ul>
       <!-- end Каталог -->

2)и как отступ побольше сделать между ними(высоту)???
3)и убрать это дурацкое подчеркивание при наведении на ссылку??

#44 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 28 Февраль 2012 - 18:54

Цитата

1)подскажите... хочу сделать в 3 вида
Не совсем понятен ваш вопрос. Пожалуйста, опишите его подробнее.

Цитата

2)и как отступ побольше сделать между ними(высоту)???
3)и убрать это дурацкое подчеркивание при наведении на ссылку??

В файл стилей добавьте 

.cat-item {
   padding:10px 0
}

.cat-item a:hover {
   text-decoration: none;
}

#45 riviso

riviso

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 28 Февраль 2012 - 19:03

на данный момент можно редактировать только категория и под-категория, под-под-категория такая же как и под-категория, а хотелось бы редактировать и под-под категорию)))) незнаю как ещё объяснить)))

#46 lina

lina

    Пользователь

  • Пользователи
  • PipPip
  • 34 сообщений

Отправлено 11 Апрель 2012 - 01:15

 Как сделать, чтобы когда нажимаешь на подкатегории в  Каталоге товаров, выделялось розовым цветом а не белым. Попробовала сделать как написано выше, только с заменой цвета, получилось каля баля,вернула все обратно. Если можно поэтапно обьясните мну, а ))))   http://kids2011.storeland.ru/

#47 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 11 Апрель 2012 - 22:24

Цитата

под-под категорию
тут делается по аналогии
<li class="subNavigation {% IF catalog.LEVEL=0%} cat-root{% ENDIF %}{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL>=1 %} sub{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}">...</li>
меняем на
<li class="subNavigation {% IF catalog.LEVEL=0%} cat-root{% ENDIF %}{% IF catalog.LEVEL=0%} root{% ENDIF %}{% IF catalog.LEVEL=1 %} sub{% ENDIF %}{% IF catalog.LEVEL=2 %} third{% ENDIF %}{% IF catalog.CURRENT %} selected{% ENDIF %}">...</li>
то есть мы добавляем новое условие для подкатегорий 3 уровня
{% IF catalog.LEVEL=2 %} third{% ENDIF %}
где добавляется новый класс и в main.css следовательно выводим новый класс
.third{}
и стилизуем как необходимо

Цитата

Как сделать, чтобы когда нажимаешь на подкатегории в  Каталоге товаров, выделялось розовым цветом а не белым. Попробовала сделать как написано выше, только с заменой цвета, получилось каля баля,вернула все обратно. Если можно поэтапно обьясните мну, а ))))   http://kids2011.storeland.ru/
объясните пожалуйста точнее что у Вас не выходит и что Вы делаете для этого

#48 kotom

kotom

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 13 Май 2012 - 20:31

Vaccina, помоги решить проблему с цветами категорий и подкатегорий.
Пример:
По умолчанию все Категории черного цвета. Выбираем Категорию 1, она окрашивается в красный цвет. Выбираем Подкатегорию 2, она окрашивается в желтый цвет.

Категория 1 (цвет красный)
  Подкатегория 1 (цвет черный)
  Подкатегория 2 (цвет желтый)
  Подкатегория 3 (цвет черный)
Категория 2 (цвет черный)
Категория 3 (цвет черный)

Вопрос:
Как сделать так, чтобы при выборе Подкатегории 2, Категория 1 оставалась красной! Сейчас цвет возвращается к черному.

<!-- Каталог -->
			  <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>


.leftmenu li li a{
  display: block;
  padding: 5px 10px;
  border-bottom: 1px solid #D6D6D6;
  font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #dc316f;
  text-decoration: none;
} .leftmenu li li a.selected{
  font-weight:bold; color:#9dc333;
} .leftmenu li li a:hover {
  background: url({ASSETS_IMAGES_PATH}lm-bg.jpg) repeat-x left bottom;
}
.leftmenu li li.root a {background-color:#ffffff;color:#464451;}
.leftmenu li li.root.selected a {font-weight:bold;color:#a73b81;}
.leftmenu li li.sub a {background-color:#ffffff;color:#464451;}
.leftmenu li li.sub.selected a {font-weight:bold;color:#e35121;}

#49 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 14 Май 2012 - 19:17

Наследственность проследить проблематично. Можно задать фиксированные цвета Например категория 1(красная), под категория 1(желтая). Это реализовать можно следующим образом  

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


заменить на 

<a href="{catalog.URL}" 
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  class="{% IF catalog.CURRENT %}selected{% ENDIF %} level{catalog.LEVEL}">{catalog.NAME}</a>

Далее в файл стилей добавить такие классы как 

.level1 {
  color:(необходимый цвет)
}

.level2 {
  color:(необходимый цвет)
}

.level3 {
  color:(необходимый цвет)
}

.level4 {
  color:(необходимый цвет)
}

#50 Tatochka

Tatochka

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 21 Май 2012 - 11:15

Добрый день.
Помогите пожалуйста!!! Сколько все не перепробовала - ничего не получилось (то не нахожу нужное место в стилях, то не работает вообще) :(.
Мой сайт: http://kronvn.storeland.ru. Тема "Сияние"
Хочу: в каталоге названия разделов  - полужирным
                 название выбранного подраздела - полужирным и курсивом

#51 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Май 2012 - 14:21

В шаблоне "HTML" найдите

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

замените на 

<li class="cat-item"> 
							<a href="{catalog.URL}" 
							  style="font-weight:bold;{% IF catalog.LEVEL>0%}padding-left:{catalog.LEVEL | multiply("20")}px;font-style:italic;{% ENDIF %}"
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>

#52 may

may

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений

Отправлено 02 Май 2013 - 18:23

Просмотр сообщенияsupport (21 Сентябрь 2010 - 22:39) писал:

Для этого нужно зайти во вкладку "Сайт" пункт меню "Редактор тем". Там немного изменить код шаблона и добавить пару стилей для отображения списка категорий

Изначальный код у Вас выглядит так:
<!-- Каталог -->
<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 %}">

Получили следующий результат:
Прикрепленный файл sample1.jpg


Этап второй, не обязательный.
Раскрашиваем вложенные категории, делаем светло-голубой шрифт и изменяем цвета шрифтов:

Шаг 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 %}">
Нажимаем волшебную кнопку сохранить и вуаля! получаем вот такой вот результат:
Прикрепленный файл sample2.jpg

Код который получился в результате:
<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 страницы либо вынесены в отдельный файл.

Добрый вечер.
А как можно вместо розового фона сделать голубой или другой цвет.........как понять какой цвет как правильно прописывать на данном языке?

#53 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 03 Май 2013 - 10:10

Цитата

Добрый вечер.
А как можно вместо розового фона сделать голубой или другой цвет.........как понять какой цвет как правильно прописывать на данном языке?
добрый день.
скажите на каком сайте вы хотели заменить фон?
если на сайте
http://vegamay.ru/
то в main.css
найти и изменить код
body {
}
требуется поставить значение 
body {
  background-color: #fff666;
}
где
  background-color: #fff666;
цвет вашего фона.,
укажите свой номер аккаунта или адрес сайта.,

#54 may

may

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений

Отправлено 03 Май 2013 - 16:21

Просмотр сообщенияMikola (03 Май 2013 - 10:10) писал:

добрый день.
скажите на каком сайте вы хотели заменить фон?
если на сайте
http://vegamay.ru/
то в main.css
найти и изменить код
body {
}
требуется поставить значение
body {
background-color: #fff666;
}
где
background-color: #fff666;
цвет вашего фона.,
укажите свой номер аккаунта или адрес сайта.,
Да сайт www.vegamay.ru
Мне нужно чтоб фон подкатегорий был темно синего цвета а шрифт белого  после слов "каталог товаров",  а подкатегорию которую открываешь имеет ширный шрифт темно синие буквы на белом фоне......внизу подкатегории тоже на белом фоне с синими буквами но не жирными...
Как это сделать?

#55 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 04 Май 2013 - 13:06

Просмотр сообщенияmay (03 Май 2013 - 16:21) писал:

Да сайт www.vegamay.ru
Мне нужно чтоб фон подкатегорий был темно синего цвета а шрифт белого  после слов "каталог товаров",  а подкатегорию которую открываешь имеет ширный шрифт темно синие буквы на белом фоне......внизу подкатегории тоже на белом фоне с синими буквами но не жирными...
Как это сделать?

Вообще не понимаю как вы хотите, чтобы это выглядело? У Вас фон категорий и подкатегорий должен быть разных цветов? А цвет текста тоже разный?
Можете в граф.редакторе сделать так, как Вы хотите, чтобы это выглядело?

#56 may

may

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений

Отправлено 05 Май 2013 - 13:44

на вопрос мне так и не ответили.......

#57 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 05 Май 2013 - 15:07

Просмотр сообщенияmay (05 Май 2013 - 13:44) писал:

на вопрос мне так и не ответили.......

Подобные темы уже были у нас на форуме - http://forum.storela...и-подкатегорий/

#58 may

may

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений

Отправлено 07 Май 2013 - 19:18

Просмотр сообщенияmiyako (05 Май 2013 - 15:07) писал:

Подобные темы уже были у нас на форуме - http://forum.storela...и-подкатегорий/
Ничего у меня не получилось=(
И там описывают другую ситуацию.....мне нужно так как в прик.фото
И БОЛЬШАЯ ПРОСЬБА ШРИФТ И ЗАЛИВКА КАК НА РИСУНКАХ НУЖНА, А НЕ СЕРОГО,РОЗОВОГО ИЛИ ИНОГО ЦВЕТА

Прикрепленные изображения

  • первое.png
  • второе.png
  • трет.png

#59 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Май 2013 - 01:30

Вам необходимо в шаблоне "HTML" найти

{%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 %}

и заменить на

{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item{% IF catalog.CURRENT %} selected{% ENDIF %} {% IF catalog.LEVEL>0%} sub{% 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 %}

далее в самый конец вашего файла стилей main.css вставьте

.categories .cat-item.selected a, .categories .cat-item:not(.sub) a {
  color: #fff !important;
  font-weight: bold;
}
.cat-item.sub:hover a {
  color: #3F48CB !important;
}
.categories .cat-item.sub a {
  font-weight: normal;
  color: #3F48CB;
}
.categories .cat-item:not(.sub), .categories .cat-item:not(.sub) a:hover, .categories .cat-item.sub.selected {
  background: #3F48CB;
  display: block;
}

#60 may

may

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 94 сообщений

Отправлено 08 Май 2013 - 17:56

Просмотр сообщенияСake (08 Май 2013 - 01:30) писал:

Вам необходимо в шаблоне "HTML" найти

{%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 %}

и заменить на

{%IFNOT catalog_empty %}
					 {% FOR catalog %}
					 {% IFNOT catalog.HIDE %}
						 <li class="cat-item{% IF catalog.CURRENT %} selected{% ENDIF %} {% IF catalog.LEVEL>0%} sub{% 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 %}

далее в самый конец вашего файла стилей main.css вставьте

.categories .cat-item.selected a, .categories .cat-item:not(.sub) a {
color: #fff !important;
font-weight: bold;
}
.cat-item.sub:hover a {
color: #3F48CB !important;
}
.categories .cat-item.sub a {
font-weight: normal;
color: #3F48CB;
}
.categories .cat-item:not(.sub), .categories .cat-item:not(.sub) a:hover, .categories .cat-item.sub.selected {
background: #3F48CB;
display: block;
}
Спасибо все получилось!=)
Обратно в Каталог товаров


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Сияние
  5. → Каталог товаров
  6. Privacy Policy