Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

1

Как Сделать "прыгающий Текст"?

Автор Гость_Наталья C._* , 19 янв. 2013 19:40

Авторизуйтесь для ответа в теме

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

#1 Гость_Наталья C._*

Гости

Отправлено 19 Январь 2013 - 19:40

Добрый вечер.
Подскажите, как сделать так, чтобы текст в правой колонке "Каталог товаров" при наведении на него мышкой немного передвигался?
Пример http://mops-dv.ru/

Мой сайт www.raduisebya.ru
Спасибо!

Наверх

#2 miyako

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

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

Отправлено 20 Январь 2013 - 09:16

Наталья C. (19 Январь 2013 - 19:40) писал:

Добрый вечер.
Подскажите, как сделать так, чтобы текст в правой колонке "Каталог товаров" при наведении на него мышкой немного передвигался?
Пример http://mops-dv.ru/

Мой сайт www.raduisebya.ru
Спасибо!

Добавьте в файл main.csstemplate(Сайт->Редактор тем->Стили и скрипты) следующий код:

.sdvig a {
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
color:#222;
display:block;
}

.sdvig a:hover {
-webkit-transform: translate(8px,0);
-moz-transform: translate(8px,0);
-o-transform: translate(8px,0);
color: #1FA2E1;
}

В шаблоне HTML(Сайт->Редактор тем->шаблоны) найдите следующий код:

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

замените на:

<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
					<div class="sdvig">
<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></div><br />
				  </li>

Наверх

#3 Гость_Наталья C._*

Гости

Отправлено 20 Январь 2013 - 10:31

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

Добавьте в файл main.csstemplate(Сайт->Редактор тем->Стили и скрипты) следующий код:

.sdvig a {
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
color:#222;
display:block;
}

.sdvig a:hover {
-webkit-transform: translate(8px,0);
-moz-transform: translate(8px,0);
-o-transform: translate(8px,0);
color: #1FA2E1;
}

В шаблоне HTML(Сайт->Редактор тем->шаблоны) найдите следующий код:

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

замените на:

<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
				 <div class="sdvig">
<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></div><br />
				 </li>

Спасибо большое! Все получилось! ))
Так приятно с Вами работать! Столь оперативные ответы пишете!

Наверх

#4 Гость_Наталья C._*

Гости

Отправлено 14 Май 2013 - 12:50

Наталья C. (20 Январь 2013 - 10:31) писал:

Спасибо большое! Все получилось! ))
Так приятно с Вами работать! Столь оперативные ответы пишете!

Добрый день!
Подскажите, возможно ли реализовать, чтобы при наведении на товар мышкой он "выезжал" вперед и светился небольшим облачком?
Как здесь http://www.just.ru/

Спасибо!

Наверх

#5 support 2.0

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

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

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

Наталья C. (14 Май 2013 - 12:50) писал:

Добрый день!
Подскажите, возможно ли реализовать, чтобы при наведении на товар мышкой он "выезжал" вперед и светился небольшим облачком?
Как здесь http://www.just.ru/

Спасибо!

найдите в файле main.css строчку

.withBorder:hover		   {border-color:#ff8d13 !important;}

замените на

.withBorder:hover		   {border-colorrgba(134, 124, 124, 0.5) !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);}

Наверх

#6 Гость_Наталья C._*

Гости

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

support 2.0 (14 Май 2013 - 16:55) писал:

найдите в файле main.css строчку

.withBorder:hover		 {border-color:#ff8d13 !important;}

замените на

.withBorder:hover		 {border-colorrgba(134, 124, 124, 0.5) !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);}

Спасибо, красиво получилось!

Наверх

#7 Ibra

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

Пользователи
191 сообщений

Отправлено 29 Июнь 2013 - 12:47

support 2.0 (14 Май 2013 - 16:55) писал:

найдите в файле main.css строчку

.withBorder:hover		 {border-color:#ff8d13 !important;}

замените на

.withBorder:hover		 {border-colorrgba(134, 124, 124, 0.5) !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);}

здравствуйте у меня нет такого кода .withBorder:hover {border-color:#ff8d13 !important;}

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

Добавьте в файл main.csstemplate(Сайт->Редактор тем->Стили и скрипты) следующий код:

.sdvig a {
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
color:#222;
display:block;
}

.sdvig a:hover {
-webkit-transform: translate(8px,0);
-moz-transform: translate(8px,0);
-o-transform: translate(8px,0);
color: #1FA2E1;
}

В шаблоне HTML(Сайт->Редактор тем->шаблоны) найдите следующий код:

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

замените на:

<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
				 <div class="sdvig">
<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></div><br />
				 </li>

такого кода тоже нет <liclass="categories"><h2><ahref="{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>

Наверх

#8 miyako

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

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

Отправлено 29 Июнь 2013 - 13:33

Ibra (29 Июнь 2013 - 12:47) писал:

здравствуйте у меня нет такого кода .withBorder:hover {border-color:#ff8d13 !important;}

такого кода тоже нет <liclass="categories"><h2><ahref="{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>

Инструкция была написана для другого нашего пользователя, у вас может быть другая тема. Что вы хотите сделать? Какой у вас номер аккаунта?

Наверх

#9 Ibra

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

Пользователи
191 сообщений

Отправлено 29 Июнь 2013 - 14:12

miyako (29 Июнь 2013 - 13:33) писал:

Инструкция была написана для другого нашего пользователя, у вас может быть другая тема. Что вы хотите сделать? Какой у вас номер аккаунта?

чтобы текст в левой колонке "Каталог товаров" при наведении на него мышкой немного передвигался как здесь http://mops-dv.ru/ и чтобы при наведении на товар мышкой он "выезжал" вперед и светился небольшим облачком
Как здесь http://www.just.ru/ . мой сайт http://tepaso.ru/

Наверх

#10 miyako

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

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

Отправлено 29 Июнь 2013 - 14:54

1)
В конец main.css добавьте код:

.sdvig a {
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
color:#222;
display:block;
}
.sdvig a:hover {
-webkit-transform: translate(8px,0);
-moz-transform: translate(8px,0);
-o-transform: translate(8px,0);
color: #1FA2E1;
}

в шаблоне HTML найдите примерно такой код:

<ul>
		{% IFNOT catalog_empty %}
		  {% FOR catalog %}
			{% IFNOT catalog.HIDE %}
			  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		</ul>

вам нужно его обернуть в <div class="sdvig"></div>
Результат:

<div class="sdvig">
	  <ul>
		{% IFNOT catalog_empty %}
		  {% FOR catalog %}
			{% IFNOT catalog.HIDE %}
			  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		</ul>
</div>

Наверх

#11 miyako

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

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

Отправлено 29 Июнь 2013 - 15:11

2) Добавьте в конец main.css код:

#content .box .tabproduct:hover{border-colorrgba(134, 124, 124, 0.5) !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);}

Наверх

#12 Ibra

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

Пользователи
191 сообщений

Отправлено 29 Июнь 2013 - 15:35

miyako (29 Июнь 2013 - 15:11) писал:

2) Добавьте в конец main.css код:

#content .box .tabproduct:hover{border-colorrgba(134, 124, 124, 0.5) !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);}

спасибо все грамотно получилось

Наверх

#13 Гость_Наталья C._*

Гости

Отправлено 02 Август 2013 - 10:52

Наталья C. (20 Январь 2013 - 10:31) писал:

Спасибо большое! Все получилось! ))
Так приятно с Вами работать! Столь оперативные ответы пишете!

Подскажите, возможно ли сделать так, чтобы подкатегория сразу отображалсь и не надо было нажимать на саму категорию, чтобы увидеть вложения?
У меня сейчас как в файле 1, а надо сделать как в файле 2. Спасибо!

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

Наверх

#14 shnafix

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

Модератоpы
506 сообщений

Отправлено 02 Август 2013 - 17:36

Наталья C. (02 Август 2013 - 10:52) писал:

Подскажите, возможно ли сделать так, чтобы подкатегория сразу отображалсь и не надо было нажимать на саму категорию, чтобы увидеть вложения?
У меня сейчас как в файле 1, а надо сделать как в файле 2. Спасибо!

Для этого в Редакторе шаблонов -> HTML найдите блок кода Каталог

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

и замените в нем

catalog

на

catalog_full

Наверх

#15 Гость_Наталья C._*

Гости

Отправлено 03 Август 2013 - 15:45

shnafix (02 Август 2013 - 17:36) писал:

Для этого в Редакторе шаблонов -> HTML найдите блок кода Каталог

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

и замените в нем