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


Как Сделать Иконки В Левом Меню?

Картинки левое меню

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

#1 slymentat

slymentat

    Новичок

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

Отправлено 07 Ноябрь 2013 - 10:09

В левом меню хочу иконки (миниатюрные изображения) к категориям товаров. Как это сделать? Подозреваю, нужно править этот блок в файле HTML редактора шаблонов:

	  <table id="contentMainTb">
		<tr>
		  <td id="leftMenuBlockWrap">
			<div id="leftMenuBlock"> 
			  <!-- Каталог -->
			  <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			  <ul id="subNavigation">
				{%IFNOT catalog_empty %}
				  {% FOR catalog %}
					{% IFNOT catalog.HIDE %}
					  <li>
						<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 /><p align="center"><hr></p>
			<table height="5" border="0">
			<tr><td>

Что необходимо поставить перед >{catalog.NAME}?
У категорий есть возможность устанавливать изображения. В какую переменную они сохраняются?

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

  • Screen01.jpg


#2 Koderhan

Koderhan

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

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

Отправлено 07 Ноябрь 2013 - 14:46

Вам придется написать условие которое будет привязано к названию категории.

Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "HTML".
Найти код:
<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 %}
						  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
						>
						{%IF catalog.NAME = фрукты %}
						  <img src="адрес до изображения" />
						{%ELSEIF catalog.NAME = фрукты2 %}
						  <img src="адрес до изображения" />
						{%ELSEIF catalog.NAME = фрукты2 %}
						  <img src="адрес до изображения" />
						{%ELSEIF catalog.NAME = фрукты2 %}
						  <img src="адрес до изображения" />
						{%ENDIF%}
						{catalog.NAME}</a>
Название категории нужно вводить с учетом регистра и пробелов.
И соответственно нужно указывать адреса картинок.

#3 vender12

vender12

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

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

Отправлено 27 Март 2014 - 14:34

как сделать рамки для каталога
маг8626

#4 Stasya

Stasya

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

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

Отправлено 27 Март 2014 - 15:54

В конец файла main.css добавьте блок
.categories {
border: 1px solid grey;
padding: 10px;
border-radius: 14px;
margin-bottom: 10px;
}

Затем найдите блок
ul.leftmenu {
margin-right: 20px;
margin-left: 20px;
}

и замените его на
ul.leftmenu {
margin-right: 20px;
margin-left: 5px;
width: 205px;
}


#5 vender12

vender12

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

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

Отправлено 27 Март 2014 - 18:14

Просмотр сообщенияStasya (27 Март 2014 - 15:54) писал:

В конец файла main.css добавьте блок
.categories {
border: 1px solid grey;
padding: 10px;
border-radius: 14px;
margin-bottom: 10px;
}

Затем найдите блок
ul.leftmenu {
margin-right: 20px;
margin-left: 20px;
}

и замените его на
ul.leftmenu {
margin-right: 20px;
margin-left: 5px;
width: 205px;
}

а теперь что бы при на ведении на категорию она подсвечивалась не много красным цветом

#6 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 27 Март 2014 - 18:21

Просмотр сообщенияvender12 (27 Март 2014 - 18:14) писал:

а теперь что бы при на ведении на категорию она подсвечивалась не много красным цветом

в main.css найдите код:
.leftmenu li li a:hover {
background: url(http://design.***.ru/lm-bg.jpg) repeat-x left bottom;
}

и замените на:
.leftmenu li li a:hover {
background: #FF6F6F;
}

код цвета можно поменять на свой

#7 vender12

vender12

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

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

Отправлено 27 Март 2014 - 18:41

Просмотр сообщенияMikDark (27 Март 2014 - 18:21) писал:

в main.css найдите код:
.leftmenu li li a:hover {
background: url(http://design.***.ru/lm-bg.jpg) repeat-x left bottom;
}

и замените на:
.leftmenu li li a:hover {
background: #FF6F6F;
}

код цвета можно поменять на свой

у меня после этого кода меню в право ушло

#8 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 27 Март 2014 - 18:43

Просмотр сообщенияvender12 (27 Март 2014 - 18:41) писал:

у меня после этого кода меню в право ушло

Может вы что-то не то делали, данный код никак не влияет на положение меню.

#9 vender12

vender12

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

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

Отправлено 27 Март 2014 - 18:49

Просмотр сообщенияMikDark (27 Март 2014 - 18:43) писал:

Может вы что-то не то делали, данный код никак не влияет на положение меню.

все норм, я просто случайно скобку } удалил
спс

Просмотр сообщенияvender12 (27 Март 2014 - 18:45) писал:

все норм, я просто случайно скобку } удалил
спс

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

Сообщение отредактировал vender12: 27 Март 2014 - 18:58


#10 Vaccina

Vaccina

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

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

Отправлено 28 Март 2014 - 03:55

к стилям:
.leftmenu li li a:hover {
background: #FF6F6F;
}
добавьте border-radius:10px;

#11 vender12

vender12

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

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

Отправлено 28 Март 2014 - 11:17

Просмотр сообщенияVaccina (28 Март 2014 - 03:55) писал:

к стилям:
.leftmenu li li a:hover {
background: #FF6F6F;
}
добавьте border-radius:10px;

как цвет рамки категорий изменить

#12 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 28 Март 2014 - 11:32

Просмотр сообщенияvender12 (28 Март 2014 - 11:17) писал:

как цвет рамки категорий изменить
В main.css есть код:
.categories {
border: 1px solid grey;
padding: 10px;
border-radius: 14px;
margin-bottom: 10px;
}

в строке border: 1px solid grey; - grey является цветом. Можно его заменить на другой в том числе в hex-виде, т.е. например  #f1f1f1

#13 vender12

vender12

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

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

Отправлено 28 Март 2014 - 12:12

Просмотр сообщенияMikDark (28 Март 2014 - 11:32) писал:

В main.css есть код:
.categories {
border: 1px solid grey;
padding: 10px;
border-radius: 14px;
margin-bottom: 10px;
}

в строке border: 1px solid grey; - grey является цветом. Можно его заменить на другой в том числе в hex-виде, т.е. например  #f1f1f1

как сделать что бы при на ведении на категории в каталоге, только текст менял цвет

#14 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 28 Март 2014 - 12:15

Просмотр сообщенияvender12 (28 Март 2014 - 12:12) писал:

как сделать что бы при на ведении на категории в каталоге, только текст менял цвет

В css файле у вас есть код:
.leftmenu li li a:hover {
background: #F7AAAA;
border-radius: 10px;
}

уберите строку background и добавьте color: #F7AAAA; Будет меняться цвет текста вместо фонового.

#15 vender12

vender12

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

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

Отправлено 28 Март 2014 - 12:38

Просмотр сообщенияMikDark (28 Март 2014 - 12:15) писал:

В css файле у вас есть код:
.leftmenu li li a:hover {
background: #F7AAAA;
border-radius: 10px;
}

уберите строку background и добавьте color: #F7AAAA; Будет меняться цвет текста вместо фонового.
спасибо

#16 tega4

tega4

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

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

Отправлено 05 Апрель 2014 - 19:35

Просмотр сообщенияKoderhan (07 Ноябрь 2013 - 14:46) писал:

Вам придется написать условие которое будет привязано к названию категории.

Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "HTML".
Найти код:
<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 %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>
{%IF catalog.NAME = фрукты %}
<img src="адрес до изображения" />
{%ELSEIF catalog.NAME = фрукты2 %}
<img src="адрес до изображения" />
{%ELSEIF catalog.NAME = фрукты2 %}
<img src="адрес до изображения" />
{%ELSEIF catalog.NAME = фрукты2 %}
<img src="адрес до изображения" />
{%ENDIF%}
{catalog.NAME}</a>
Название категории нужно вводить с учетом регистра и пробелов.
И соответственно нужно указывать адреса картинок.

А сделать через переменную {nested_categories_list.IMAGE_MEDIUM} это невозможно,как я поняла, возможно есть волшебная переменная для данного варианта?
<img src="{nested_categories_list.IMAGE_MEDIUM}" style="width:50px;height:50px;"/>{catalog.NAME}</a>


#17 support 2.0

support 2.0

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

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

Отправлено 05 Апрель 2014 - 20:16

Просмотр сообщенияtega4 (05 Апрель 2014 - 19:35) писал:

А сделать через переменную {nested_categories_list.IMAGE_MEDIUM} это невозможно,как я поняла, возможно есть волшебная переменная для данного варианта?
<img src="{nested_categories_list.IMAGE_MEDIUM}" style="width:50px;height:50px;"/>{catalog.NAME}</a>
Для того, чтобы привязать категорию к определенному изображению, воспользоваться можно только выше написанной инструкцией.




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

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