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

[emin808]

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

[miyako]

emin808 (20 Январь 2013 - 11:42) писал:

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

У вас это реализовано через классы(class).
Найдите в шаблоне HTML примерно следующий код:

<ul class="span44 links">
																			<li class="first">
						<a href="http://asfn.storeland.ru/url/?away=http%3A%2F%2Fasfn.storeland.ru%2F" class="home">Главная</a>
					  </li>
									  <li>
						<a href="http://asfn.storeland.ru/news" title="Вся лента" class="document">Лента новостей</a>
					  </li>
									  <li>
						<a href="http://asfn.storeland.ru/url/?away=http%3A%2F%2Fasfn.storeland.ru%2Fpage%2F%25D0%2594%25D0%25BE%25D1%2581%25D1%2582%25D0%25B0%25D0%25B2%25D0%25BA%25D0%25B0-2" class="clock">Доставка</a>
					  </li>
									  <li>
						<a href="http://asfn.storeland.ru/user/login" title="Вход в личный кабинет покупателя" class="key">Войти в ЛК</a>
					  </li>
									  <li>
						<a href="http://asfn.storeland.ru/page/Эволюция-Ра-ЧТО-ЭТО" title="Перейти к странице «Эволюция Ра - ЧТО ЭТО!»" class="">Каталог цен</a>
					  </li>
									  <li class="last">
						<a href="http://asfn.storeland.ru/url/?away=http%3A%2F%2Fasfn.storeland.ru%2Fcatalog%2F%25D0%25A2%25D0%25BE%25D0%25B2%25D0%25B0%25D1%2580%25D1%258B-%25D0%25B2-%25D0%25BD%25D0%25B0%25D0%25BB%25D0%25B8%25D1%2587%25D0%25B8%25D0%25B8" class="">Есть в наличии</a>
					  </li>
																</ul>

Например, к главной привязана иконка следующим образом:

class="home

То есть в main.csstemplate к этому классу привязана картинка:

.header .links li a.home{background:url("/web/upload/assets/images/154/153295/menu_icon_home_16.png") left center no-repeat;}

[emin808]

да, цель достигнута, благодарю

[emin808]

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

[miyako]

emin808 (20 Январь 2013 - 15:08) писал:

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

Найдите в файле main.csstemplate примерно следующий код:

.header .links li a.catalog{background:url("/web/upload/assets/images/154/153295/menu_icon_catalog_16_act.png") left center no-repeat;}
.header .links li a.catalog-act {background:url("/web/upload/assets/images/154/153295/menu_icon_catalog_16_act.png") left center no-repeat;}
.header .links li a.present{background:url("/web/upload/assets/images/154/153295/menu_icon_present_16.png") left center no-repeat;}
.header .links li a.present-act{background:url("/web/upload/assets/images/154/153295/menu_icon_present_16_act.png") left center no-repeat;}
.header .links li a.briefcase{background:url("/web/upload/assets/images/154/153295/menu_icon_briefcase_16.png") left center no-repeat;}
.header .links li a.briefcase-act{background:url("/web/upload/assets/images/154/153295/menu_icon_briefcase_16_act.png") left center no-repeat;}
.header .links li a.key{background:url("/web/upload/assets/images/154/153295/menu_icon_key_16.png") left center no-repeat;}
.header .links li a.key-act{background:url("/web/upload/assets/images/154/153295/menu_icon_key_16_act.png") left center no-repeat;}
.header .links li a.tick{background:url("/web/upload/assets/images/154/153295/menu_icon_tick_16.png") left center no-repeat;}
.header .links li a.tick-act{background:url("/web/upload/assets/images/154/153295/menu_icon_tick_16_act.png") left center no-repeat;}
.header .links li a.label{background:url("/web/upload/assets/images/154/153295/menu_icon_label_16.png") left center no-repeat;}
.header .links li a.label-act{background:url("/web/upload/assets/images/154/153295/menu_icon_label_16_act.png") left center no-repeat;}
.header .links li a.heart{background:url("/web/upload/assets/images/154/153295/menu_icon_heart_16.png") left center no-repeat;}
.header .links li a.heart-act{background:url("/web/upload/assets/images/154/153295/menu_icon_heart_16_act.png") left center no-repeat;}
.header .links li a.clipboard{background:url("/web/upload/assets/images/154/153295/menu_icon_clipboard_16.png") left center no-repeat;}
.header .links li a.clipboard-act{background:url("/web/upload/assets/images/154/153295/menu_icon_clipboard_16_act.png") left center no-repeat;}
.header .links li a.address{background:url("/web/upload/assets/images/154/153295/menu_icon_address_16.png") left center no-repeat;}
.header .links li a.address-act{background:url("/web/upload/assets/images/154/153295/menu_icon_address_16_act.png") left center no-repeat;}
.header .links li a.clock{background:url("/web/upload/assets/images/154/153295/menu_icon_clock_16.png") left center no-repeat;}
.header .links li a.clock-act{background:url("/web/upload/assets/images/154/153295/menu_icon_clock_16_act.png") left center no-repeat;}
.header .links li a.cart{background:url("/web/upload/assets/images/154/153295/menu_icon_cart_16.png") left center no-repeat;}
.header .links li a.cart-act{background:url("/web/upload/assets/images/154/153295/menu_icon_cart_16_act.png") left center no-repeat;}
.header .links li a.user{background:url("/web/upload/assets/images/154/153295/menu_icon_user_16.png") left center no-repeat;}
.header .links li a.user-act{background:url("/web/upload/assets/images/154/153295/menu_icon_user_16_act.png") left center no-repeat;}
.header .links li a.document{background:url("/web/upload/assets/images/154/153295/menu_icon_document_16.png") left center no-repeat;}
.header .links li a.document-act{background:url("/web/upload/assets/images/154/153295/menu_icon_document_16_act.png") left center no-repeat;}
.header .links li a.home{background:url("/web/upload/assets/images/154/153295/menu_icon_home_16.png") left center no-repeat;}
.header .links li a.home-act{background:url("/web/upload/assets/images/154/153295/menu_icon_home_16_act.png") left center no-repeat;}

Первая картинка подгружается неактивная, а вторая активная. Рассмотрим на примере Доставки:
замените код:

.header .links li a.clock{background:url("/web/upload/assets/images/154/153295/menu_icon_clock_16.png") left center no-repeat;}
.header .links li a.clock-act{background:url("/web/upload/assets/images/154/153295/menu_icon_clock_16_act.png") left center no-repeat;}

на:

.header .links li a.clock{background:url("/web/upload/assets/images/154/153295/menu_icon_clock_16_act.png") left center no-repeat;}
.header .links li a.clock-act{background:url("/web/upload/assets/images/154/153295/menu_icon_clock_16_act.png") left center no-repeat;}

Таким образом мы подгружаем всегда вариант иконки, когда она активна

[emin808]

да, все получилось ,благодарю Вас

[galya.bu7]

miyako (20 Январь 2013 - 13:02) писал:

У вас это реализовано через классы(class).
Найдите в шаблоне HTML примерно следующий код:

<ul class="span44 links">
																		 <li class="first">
					 <a href="http://asfn.storeland.ru/url/?away=http%3A%2F%2Fasfn.storeland.ru%2F" class="home">Главная</a>
					 </li>
									 <li>
					 <a href="http://asfn.storeland.ru/news" title="Вся лента" class="document">Лента новостей</a>
					 </li>
									 <li>
					 <a href="http://asfn.storeland.ru/url/?away=http%3A%2F%2Fasfn.storeland.ru%2Fpage%2F%25D0%2594%25D0%25BE%25D1%2581%25D1%2582%25D0%25B0%25D0%25B2%25D0%25BA%25D0%25B0-2" class="clock">Доставка</a>
					 </li>
									 <li>
					 <a href="http://asfn.storeland.ru/user/login" title="Вход в личный кабинет покупателя" class="key">Войти в ЛК</a>
					 </li>
									 <li>
					 <a href="http://asfn.storeland.ru/page/Эволюция-Ра-ЧТО-ЭТО" title="Перейти к странице «Эволюция Ра - ЧТО ЭТО!»" class="">Каталог цен</a>
					 </li>
									 <li class="last">
					 <a href="http://asfn.storeland.ru/url/?away=http%3A%2F%2Fasfn.storeland.ru%2Fcatalog%2F%25D0%25A2%25D0%25BE%25D0%25B2%25D0%25B0%25D1%2580%25D1%258B-%25D0%25B2-%25D0%25BD%25D0%25B0%25D0%25BB%25D0%25B8%25D1%2587%25D0%25B8%25D0%25B8" class="">Есть в наличии</a>
					 </li>
															 </ul>

Например, к главной привязана иконка следующим образом:

class="home

То есть в main.csstemplate к этому классу привязана картинка:

.header .links li a.home{background:url("/web/upload/assets/images/154/153295/menu_icon_home_16.png") left center no-repeat;}

у меня в шаблоне нет такого кода. создала в верхнем меню пункт "Оплата". теперь хочу к этому пункту прикрутить иконку. как это сделать?

[Vaccina]

Данный раздел форума относиться к шаблону "Техника", у вас как я понимаю используется "Сияние". Вам необходимо или изменить тему оформления, или же искать решение в соответствующей ветке форума установленной вашей темы оформления.

Для темы "Сияние" вам необходимо в шаблоне "HTML" найти

{menu.header.links.NAME}

и заменить на

{%IF menu.header.links.NAME=Оплата%}<img src="image.png" alt="" /> {menu.header.links.NAME}{%ELSE%}{menu.header.links.NAME}{%ENDIF%}

где image.png это полный путь к вашему изображению которое вы можете загрузить в разделе редактора тем.

[galya.bu7]

Vaccina (17 Апрель 2013 - 03:53) писал:

Данный раздел форума относиться к шаблону "Техника", у вас как я понимаю используется "Сияние". Вам необходимо или изменить тему оформления, или же искать решение в соответствующей ветке форума установленной вашей темы оформления.

Для темы "Сияние" вам необходимо в шаблоне "HTML" найти

{menu.header.links.NAME}

и заменить на

{%IF menu.header.links.NAME=Оплата%}<img src="image.png" alt="" /> {menu.header.links.NAME}{%ELSE%}{menu.header.links.NAME}{%ENDIF%}

где image.png это полный путь к вашему изображению которое вы можете загрузить в разделе редактора тем.

у меня шаблон техника sigershop.ru

[Сake]

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

<li {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
						<a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}
						  class="{% IF menu.header.links.NAME=Каталог %}catalog{% ELSEIF menu.header.links.NAME=Каталог товаров %}catalog{% ELSEIF menu.header.links.NAME=Акции %}present{% ELSEIF menu.header.links.NAME=Акции магазина %}present{% ELSEIF menu.header.links.NAME=Доставка %}clock{% ELSEIF menu.header.links.NAME=Контакты %}address{% ELSEIF menu.header.links.NAME=Связь с администрацией %}address{% ELSEIF menu.header.links.NAME=Л.Кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Личный кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Выход %}key{% ELSEIF menu.header.links.NAME=Вход в бэк-офис %}key{% ELSEIF menu.header.links.NAME=Войти в ЛК %}key{% ELSEIF menu.header.links.NAME=Вход в личный кабинет %}key{% ELSEIF menu.header.links.NAME=Мои заказы %}tick{% ELSEIF menu.header.links.NAME=История заказов %}tick{% ELSEIF menu.header.links.NAME=Новинки %}label{% ELSEIF menu.header.links.NAME=Хиты %}heart{% ELSEIF menu.header.links.NAME=Хиты продаж %}heart{% ELSEIF menu.header.links.NAME=Статьи %}clipboard{% ELSEIF menu.header.links.NAME=Корзина %}cart{% ELSEIF menu.header.links.NAME=Главная %}home{% ELSEIF menu.header.links.NAME=Лента новостей %}document{% ELSEIF menu.header.links.NAME=Новости магазина %}document{% ELSEIF menu.header.links.NAME=Каталог статей %}document{% ELSEIF menu.header.links.NAME=Новости СМИ %}document{% ELSEIF menu.header.links.NAME=Регистрация %}user{% ELSEIF menu.header.links.NAME=Восстановление пароля %}user{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}">{menu.header.links.NAME}</a>
					  </li>

и заменить на

<li {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
						<a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}
						  class="{% IF menu.header.links.NAME=Оплата %}payment{% ELSEIF menu.header.links.NAME=Каталог %}catalog{% ELSEIF menu.header.links.NAME=Каталог товаров %}catalog{% ELSEIF menu.header.links.NAME=Акции %}present{% ELSEIF menu.header.links.NAME=Акции магазина %}present{% ELSEIF menu.header.links.NAME=Доставка %}clock{% ELSEIF menu.header.links.NAME=Контакты %}address{% ELSEIF menu.header.links.NAME=Связь с администрацией %}address{% ELSEIF menu.header.links.NAME=Л.Кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Личный кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Выход %}key{% ELSEIF menu.header.links.NAME=Вход в бэк-офис %}key{% ELSEIF menu.header.links.NAME=Войти в ЛК %}key{% ELSEIF menu.header.links.NAME=Вход в личный кабинет %}key{% ELSEIF menu.header.links.NAME=Мои заказы %}tick{% ELSEIF menu.header.links.NAME=История заказов %}tick{% ELSEIF menu.header.links.NAME=Новинки %}label{% ELSEIF menu.header.links.NAME=Хиты %}heart{% ELSEIF menu.header.links.NAME=Хиты продаж %}heart{% ELSEIF menu.header.links.NAME=Статьи %}clipboard{% ELSEIF menu.header.links.NAME=Корзина %}cart{% ELSEIF menu.header.links.NAME=Главная %}home{% ELSEIF menu.header.links.NAME=Лента новостей %}document{% ELSEIF menu.header.links.NAME=Новости магазина %}document{% ELSEIF menu.header.links.NAME=Каталог статей %}document{% ELSEIF menu.header.links.NAME=Новости СМИ %}document{% ELSEIF menu.header.links.NAME=Регистрация %}user{% ELSEIF menu.header.links.NAME=Восстановление пароля %}user{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}">{menu.header.links.NAME}</a>
					  </li>

далее в файле стилей main.css необходимо найти

.header .links li a.cart{background:url("{ASSETS_IMAGES_PATH}menu_icon_cart_16.png") left center no-repeat;}

и ниже вставить

.header .links li a.cart{background:url("{ASSETS_IMAGES_PATH}menu_icon_payment_16.png") left center no-repeat;}

далее вам необходимо загрузить изображение иконки в разделе редактора тем. Имя изображения должно быть "menu_icon_payment_16.png" размер иконки 16x16px

[galya.bu7]

Сake (18 Апрель 2013 - 03:55) писал:

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

<li {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
					 <a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}
						 class="{% IF menu.header.links.NAME=Каталог %}catalog{% ELSEIF menu.header.links.NAME=Каталог товаров %}catalog{% ELSEIF menu.header.links.NAME=Акции %}present{% ELSEIF menu.header.links.NAME=Акции магазина %}present{% ELSEIF menu.header.links.NAME=Доставка %}clock{% ELSEIF menu.header.links.NAME=Контакты %}address{% ELSEIF menu.header.links.NAME=Связь с администрацией %}address{% ELSEIF menu.header.links.NAME=Л.Кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Личный кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Выход %}key{% ELSEIF menu.header.links.NAME=Вход в бэк-офис %}key{% ELSEIF menu.header.links.NAME=Войти в ЛК %}key{% ELSEIF menu.header.links.NAME=Вход в личный кабинет %}key{% ELSEIF menu.header.links.NAME=Мои заказы %}tick{% ELSEIF menu.header.links.NAME=История заказов %}tick{% ELSEIF menu.header.links.NAME=Новинки %}label{% ELSEIF menu.header.links.NAME=Хиты %}heart{% ELSEIF menu.header.links.NAME=Хиты продаж %}heart{% ELSEIF menu.header.links.NAME=Статьи %}clipboard{% ELSEIF menu.header.links.NAME=Корзина %}cart{% ELSEIF menu.header.links.NAME=Главная %}home{% ELSEIF menu.header.links.NAME=Лента новостей %}document{% ELSEIF menu.header.links.NAME=Новости магазина %}document{% ELSEIF menu.header.links.NAME=Каталог статей %}document{% ELSEIF menu.header.links.NAME=Новости СМИ %}document{% ELSEIF menu.header.links.NAME=Регистрация %}user{% ELSEIF menu.header.links.NAME=Восстановление пароля %}user{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}">{menu.header.links.NAME}</a>
					 </li>

и заменить на

<li {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
					 <a href="{menu.header.links.URL}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}
						 class="{% IF menu.header.links.NAME=Оплата %}payment{% ELSEIF menu.header.links.NAME=Каталог %}catalog{% ELSEIF menu.header.links.NAME=Каталог товаров %}catalog{% ELSEIF menu.header.links.NAME=Акции %}present{% ELSEIF menu.header.links.NAME=Акции магазина %}present{% ELSEIF menu.header.links.NAME=Доставка %}clock{% ELSEIF menu.header.links.NAME=Контакты %}address{% ELSEIF menu.header.links.NAME=Связь с администрацией %}address{% ELSEIF menu.header.links.NAME=Л.Кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Личный кабинет %}briefcase{% ELSEIF menu.header.links.NAME=Выход %}key{% ELSEIF menu.header.links.NAME=Вход в бэк-офис %}key{% ELSEIF menu.header.links.NAME=Войти в ЛК %}key{% ELSEIF menu.header.links.NAME=Вход в личный кабинет %}key{% ELSEIF menu.header.links.NAME=Мои заказы %}tick{% ELSEIF menu.header.links.NAME=История заказов %}tick{% ELSEIF menu.header.links.NAME=Новинки %}label{% ELSEIF menu.header.links.NAME=Хиты %}heart{% ELSEIF menu.header.links.NAME=Хиты продаж %}heart{% ELSEIF menu.header.links.NAME=Статьи %}clipboard{% ELSEIF menu.header.links.NAME=Корзина %}cart{% ELSEIF menu.header.links.NAME=Главная %}home{% ELSEIF menu.header.links.NAME=Лента новостей %}document{% ELSEIF menu.header.links.NAME=Новости магазина %}document{% ELSEIF menu.header.links.NAME=Каталог статей %}document{% ELSEIF menu.header.links.NAME=Новости СМИ %}document{% ELSEIF menu.header.links.NAME=Регистрация %}user{% ELSEIF menu.header.links.NAME=Восстановление пароля %}user{% ENDIF %}{% IF menu.header.links.SELECTED %}-act selected{% ENDIF %}">{menu.header.links.NAME}</a>
					 </li>

далее в файле стилей main.css необходимо найти

.header .links li a.cart{background:url("{ASSETS_IMAGES_PATH}menu_icon_cart_16.png") left center no-repeat;}

и ниже вставить

.header .links li a.cart{background:url("{ASSETS_IMAGES_PATH}menu_icon_payment_16.png") left center no-repeat;}

далее вам необходимо загрузить изображение иконки в разделе редактора тем. Имя изображения должно быть "menu_icon_payment_16.png" размер иконки 16x16px

спасибо! все получилось! только код


.header .links li a.cart{background:url("{ASSETS_IMAGES_PATH}menu_icon_cart_16.png") left center no-repeat;}

нужно менять на



.header .links li a.payment {background:url("{ASSETS_IMAGES_PATH}menu_icon_payment_16.png") left center no-repeat;}


у Вас была опечатка

[Сake]

Да, верно, опечатался. Большое спасибо что заметили и поправили.

[magamg]

Не получается поставить значки для меню. компания и гарантия. Напишите пожалуйста какую строчку мне необходимо вставить в "HTML"

[sengun]

magamg (08 Август 2013 - 15:58) писал:

Не получается поставить значки для меню. компания и гарантия. Напишите пожалуйста какую строчку мне необходимо вставить в "HTML"

В html найдите самую длинную строку. Ее начало - это такой код

class="{% IF menu.header.links.NAME=Каталог %}

замените его на этот код

class="{% IF menu.header.links.NAME=Компания %}company{% ELSEIF menu.header.links.NAME=Каталог %}

И в конец main.css добавьте код

.header .links li a.company{background:url("{ASSETS_IMAGES_PATH}menu_icon_company.png") left center no-repeat;}

Где menu_icon_company.png - имя иконки для пункта меню "Компания" (пункта гарантии не нашел), которую вы загрузите на сайт через Сайт-Редактор шаблонов-Добавить файлы.

[magamg]

помогите тупому разобраться, пытаюсь вставить картинку для "Заказ и доставка". в html вставляю после class=" и перед {% IF menu.header.links.NAME=Компания %}company    строку {% IF menu.header.links.NAME=Заказ и доставка %} что нужно писать в замен company????

[shnafix]

magamg (11 Август 2013 - 13:51) писал:

помогите тупому разобраться, пытаюсь вставить картинку для "Заказ и доставка". в html вставляю после class=" и перед {% IF menu.header.links.NAME=Компания %}company строку {% IF menu.header.links.NAME=Заказ и доставка %} что нужно писать в замен company????

Если я Вас правильно понял, то вместо "company" стоит написать "briefcase" .

[magamg]

Цитата

Отправлен Сегодня, 17:43

magamg (11 August 2013 - 13:51) писал:

помогите тупому разобраться, пытаюсь вставить картинку для "Заказ и доставка". в html вставляю после class=" и перед {% IF menu.header.links.NAME=Компания %}company строку {% IF menu.header.links.NAME=Заказ и доставка %} что нужно писать в замен company????Если я Вас правильно понял, то вместо "company" стоит написать "briefcase" .

меняю. не получается сохранить файл, выскакивает ошибка при сохранении.

Жду помощи специалистов.

[miyako]

magamg (11 Август 2013 - 18:51) писал:

меняю. не получается сохранить файл, выскакивает ошибка при сохранении.

Жду помощи специалистов.

Найдите код в HTML -

class="{% IF menu.header.links.NAME=Компания %}company{% ELSEIF menu.header.links.NAME=Каталог %}

и замените на -

class="{% IF menu.header.links.NAME=Компания %}company{% ELSEIF menu.header.links.NAME=Заказ и доставка %}orderAndDelivery{% ELSEIF menu.header.links.NAME=Каталог %}

Далее в конец  main.css добавьте код -

.header .links li a.orderAndDelivery{background:url("{ASSETS_IMAGES_PATH}menu_icon_orderAndDelivery.png") left center no-repeat;}

Соответственно Вам нужно добавить изображение в формате png в раздел Сайт - Редактор шаблонов с названием menu_icon_orderAndDelivery

[magamg]

Благодарю, все получилось, и разобрался как делать