Сообщений в теме: 71

[MariG]

Скажите, пожалуйста, как поменять цвет категорий и подкатегорий в меню (каталог товаров) справа в шаблоне "Сияние". Чтобы категории в меню были жирным шрифтом и другим цветом, а подкатегории, соответственно, другие. И чтобы категория, в которой на данный момент находится клиент, выделялась каким-либо образом, как в других Ваших шаблонах, в которых данная функция есть.

[support]

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 страницы либо вынесены в отдельный файл.

[MariG]

Спасибо за ответ.

Только вот, что -то не получается "вуаля"- как Вы говорите. Все, вроде бы понятно, кроме одного - где именно, я должна вставить:


.leftmenu li li.root a {background-color:#fdf5f3;color:#000000;}
.leftmenu li li.root.selected a {font-weight:bold;color:#000000;}


вы написали, как выглядит изначальный код "до", а можно еще написать, как оно должно выглядеть "после".

А остальное я нашла, где и как вставить.

Заранее спасибо.

[support]

Да, действительно забыл, извиняюсь.
Сообщение ответа обновил, добавил получившийся код

[MariG]

support (25 Сентябрь 2010 - 03:38) писал:

Да, действительно забыл, извиняюсь.
Сообщение ответа обновил, добавил получившийся код

Ой...Какое же Вам, огромное, человеческое спасибо. Так приятно с Вами работать. Особенно, нам новичкам.

[Moschino]

Добрый день. Стоит у меня тема "сияние" зашел во вкладку  "Сайт" пункт меню "Редактор тем". Но как изменить код шаблона? Как писала "MariG" у меня нет HTML значка (каталог товаров). Может я что недопонял?

[support]

Наведите на файл HTML:


Нажмите на него, откроется html код:


Каталог расположен ниже:

[Moschino]

Спасибо большое. Все понял.

[Vagitt]

У меня что-то не получилось, все сделал как описано. <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>

[Vaccina]

Пожалуйста, объясните подробней что у вас не получается.

[Vagitt]

У меня не получается поменять цвет списка и подсписка каталога. Сделал всё как описано выше

[Vaccina]

Хм. возможно вы что-то делаете не совсем верно. попробуйте перечитать тему еще раз и попытаться снова. Так же укажите адрес вашего магазина, для того что бы была возможность вам помочь.

[Vagitt]

http://goldkosmetik.ru/ вроде сделал всё как описано, также и переносить не получается

[Vaccina]

Вы видимо забыли добавить изменения в код каталога

нужно найти в шаблоне "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;}

[Vagitt]

спасибо!!! получилось. Я об этом не знал

Вот только с переносом каталога в правую сторону осталось

[Mityayson]

А у меня такой трабл: хотел поменять цвет и шрифт только названий товаров, а поменялись все шрифты с таким цветом... очевидно и стилем.
И еще. у меня товары в рамках разной величины, выглядит очень топорно...

[Mityayson]

Со шрифтом разобрался, а вот с размером рамок - не получается... =(

[Vaccina]

Хм. попробуйте добавить в ваш файл стилей (в конец файла) следующий стиль

.goodsListItem {
	overflow: hidden;
	padding: 0;
	text-align: center;
	vertical-align: top;
	width: 195px;
}

[Mityayson]

Не помогло... =(

[Vaccina]

Хм. сейчас попробовала сделать изменения - в итоге все в порядке. Попробуйте проделать изменения еще раз. После если изменений не появиться - то перезапустить браузер, очистить кэш, зайти под другим браузером.