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


Слайдер На Главную

Автор Roman(GRR), 19 июля 2013 11:58

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

#1 Roman(GRR)

Roman(GRR)

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

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

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

Здравствуйте, подскажите мне не опытному!
Первый раз связался со слайдерами!

1)Вот как мне это всё сделать, я ни чего понять не могу, что после чего ставить...
2)поставить мне его надо над блоком "интересные предложения"
Вот ссылка на сайт где я нашёл про этот слайдер: http://ruseller.com/...s2251/example/#
А вот мой сайт: http://bigb.storeland.ru/

Заранее благодарен!

#2 support 2.0

support 2.0

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

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

Отправлено 19 Июль 2013 - 17:55

Просмотр сообщенияRoman(GRR) (19 Июль 2013 - 11:58) писал:

Здравствуйте, подскажите мне не опытному!
Первый раз связался со слайдерами!

1)Вот как мне это всё сделать, я ни чего понять не могу, что после чего ставить...
2)поставить мне его надо над блоком "интересные предложения"
Вот ссылка на сайт где я нашёл про этот слайдер: http://ruseller.com/...s2251/example/#
А вот мой сайт: http://bigb.storeland.ru/

Заранее благодарен!

Здравствуйте, попробуйте воспользоваться следующей инструкцией:
Я не использовала те скрипты с того сайта, но выглядит слайдер примерно также, однако стрелочки появляются при наведении. Если Вам нужно будет иначе, напишите, подредактирую

Сначала скачайте архив, прикрепленный к моему сообщению, разархивируйте его у себя на компьютере и загрузите эти файлы в разделе редактор шаблонов.
Теперь зайдите в шаблон HTML и после
<!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

вставьте
  <!-- Загрузка Jquery галереи Slider -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}nyvo2.css" type="text/css" media="screen" />
<script src="{ASSETS_JS_PATH}jquery.nivo.slider.pack.js" type="text/javascript"></script>

далее в шаблоне HTML после
<td class="content_body cont700">
вставьте
<!-- Слайдер который отображается на главной -->
{% IF index_page %}
  <!-- Обёртка, указывающая стиль темы -->
  <div class="theme-default" style="padding:1em;display:none;">
	<!-- Непосредственный код слайдера -->
	<div id="slider">
	  <a href="#"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" title="Пример картинки с заголовком"/></a>
	  <a href="#"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" title="Пример картинки с заголовком" /></a>
	  <a href="#"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" title="Пример картинки с заголовком"/></a>
	  <a href="#"><img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" title="Пример картинки с заголовком"/></a>
	</div>
  </div>
 
  <!-- Запуск слайдера -->
  <script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider({effect: 'slideInRight'}).parent().show();
	});
  </script>
  {% ENDIF %}

Прикрепленные файлы

  • Прикрепленный файл  flexslider.zip   9,45К   177 Количество загрузок:

#3 Roman(GRR)

Roman(GRR)

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

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

Отправлено 19 Июль 2013 - 20:34

Большое вам спасибо за этот слайдер! Вы просто чудо! Я бы сам никогда не разобрался!

Но вот у меня ещё вопросы:

1)Можно точки слайдера поднять повыше или лучше их вообще удалить.
2)В левом меню, при наведении на надпись, что бы она ни чем не подсвечивалась, а выезжала. Вот как здесь  http://mops-dv.ru/
3)Тот текст что я обвёл красным, он был изначально серым, а при наведении на него #ad21da без подчёркивания.
4)Тот текст что я обвёл зелёным сделать #ad21da, а при наведении серым без подчёркивания.
5)Значок скайпа сделать побольше.

Заранее благодарю!

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

  • Безы54мянный.png

#4 sengun

sengun

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

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

Отправлено 19 Июль 2013 - 20:59

Просмотр сообщенияRoman(GRR) (19 Июль 2013 - 20:34) писал:

Большое вам спасибо за этот слайдер! Вы просто чудо! Я бы сам никогда не разобрался!

Но вот у меня ещё вопросы:

1)Можно точки слайдера поднять повыше или лучше их вообще удалить.
2)В левом меню, при наведении на надпись, что бы она ни чем не подсвечивалась, а выезжала. Вот как здесь  http://mops-dv.ru/
3)Тот текст что я обвёл красным, он был изначально серым, а при наведении на него #ad21da без подчёркивания.
4)Тот текст что я обвёл зелёным сделать #ad21da, а при наведении серым без подчёркивания.
5)Значок скайпа сделать побольше.

Заранее благодарю!
1. В файле nyvo2.css в коде 
.theme-default .nivoSlider {
position:relative;
background:#fff url({ASSETS_IMAGES_PATH}nyvo_loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
удалите margin-bottom:50px;
2.

Просмотр сообщенияmiyako (20 Январь 2013 - 09:16) писал:

Добавьте в файл 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(Сайт->Редактор тем->шаблоны) найдите следующий код:
<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>
Скоро остальное.

#5 sengun

sengun

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

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

Отправлено 19 Июль 2013 - 21:16

3. В main.css найдите код 
.recent_viewed td.link a {font-size: 0.8em;width:153px;overflow:hidden;}
замените на этот
.recent_viewed td.link a {font-size: 0.8em;width:153px;overflow:hidden; color: grey;}
.recent_viewed td.link a:hover {color: #ad21da; text-decoration: none;}

4. Там же код
.goodsListItemName a			 {font-size:16px;line-height:18px;padding:0px;margin:0px;font-weight:normal;}
замените на
.goodsListItemName a			 {font-size:16px;line-height:18px;padding:0px;margin:0px;font-weight:normal; color: #ad21da;}
.goodsListItemName a:hover			 {color: grey; text-decoration: none;}

5. В HTML найдите строчку 
<a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /><span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a>
В ней width="16" height="16" ширина и высота иконки скайпа соответственно. Задайте эти значения вместо 16, например, 22, чтобы увеличить значок.

#6 Roman(GRR)

Roman(GRR)

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

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

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

Спасибо, за ответ!

Но остались не доработки!

1)Сделать точки слайдера цветом #ad21da
2)Надо что бы выезжал только текст, а разделительные полосы стояли на месте, и когда текст выезжает, появляется серый фон, надо его поменять на белый.
5)Значок скайпа получается размытый, как и куда поставить новое лого скайпа?
   Можно ли что бы перед номером стоял значок трубки как тут: http://mops-dv.ru/?

Заранее благодарен.

#7 miyako

miyako

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

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

Отправлено 20 Июль 2013 - 16:01

Просмотр сообщенияRoman(GRR) (20 Июль 2013 - 13:53) писал:

Спасибо, за ответ!

Но остались не доработки!

1)Сделать точки слайдера цветом #ad21da
2)Надо что бы выезжал только текст, а разделительные полосы стояли на месте, и когда текст выезжает, появляется серый фон, надо его поменять на белый.
5)Значок скайпа получается размытый, как и куда поставить новое лого скайпа?
   Можно ли что бы перед номером стоял значок трубки как тут: http://mops-dv.ru/?

Заранее благодарен.

Цвет кнопки задается изображение 
nyvo_bullets.png
Либо менять само изображение, либо ставить тогда цвет для изображений слайдера которое еще не активно

#8 sengun

sengun

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

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

Отправлено 20 Июль 2013 - 16:10

Просмотр сообщенияRoman(GRR) (20 Июль 2013 - 13:53) писал:

Спасибо, за ответ!

Но остались не доработки!

1)Сделать точки слайдера цветом #ad21da
2)Надо что бы выезжал только текст, а разделительные полосы стояли на месте, и когда текст выезжает, появляется серый фон, надо его поменять на белый.
5)Значок скайпа получается размытый, как и куда поставить новое лого скайпа?
   Можно ли что бы перед номером стоял значок трубки как тут: http://mops-dv.ru/?

Заранее благодарен.
2. В main.css код 
.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: #999999;
text-decoration: none;
} .leftmenu li li a.selected{
font-weight:bold; color:#000;
} .leftmenu li li a:hover {
background: url({ASSETS_IMAGES_PATH}lm-bg.jpg) repeat-x left bottom;
}
замените на 
.leftmenu li li a{
display: block;
padding: 5px 10px;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
} .leftmenu li li a.selected{
font-weight:bold; color:#000;
} .leftmenu li li a:hover { }
.leftmenu li li div {
border-bottom: 1px solid #D6D6D6;
}
Далее в 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>
после него вставьте 
<div></div>
5. Загрузите свой значок скайпа с именем skype.png через Сайт-редактор шаблонов-добавить файлы. И в HTML код 
<img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="30" height="30" alt="Свяжитесь с нами по Skype" />
замените на 
<img class="valignMiddle" src="{ASSETS_IMAGES_PATH}skype.png" width="30" height="30" alt="Свяжитесь с нами по Skype" />

#9 sengun

sengun

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

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

Отправлено 20 Июль 2013 - 16:17

Чтобы значок телефона вставить, загрузите нужное изображение и в HTML в коде 
<!-- Первый контактный телефон -->
						 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
								 <tr>
								 <td class="contentTableHeadMainPhone">
										 {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}
								 </td>
								 </tr>
						 {% ENDIF %}
после строчки 
<td class="contentTableHeadMainPhone">
вставьте код вида 
<img class="valignMiddle" src="{ASSETS_IMAGES_PATH}tel.png" alt="">

#10 Roman(GRR)

Roman(GRR)

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

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

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

Что-то у меня ничего не получается во 2-ом пункте, после изменения в html коде получилось вот что, вы не могли бы написать полностью html код.

http://bigb.storeland.ru/

#11 Roman(GRR)

Roman(GRR)

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

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

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

Всё, всё уже переделал. Спасибо! Вопрос не актуален.

#12 vadim777

vadim777

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

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

Отправлено 03 Январь 2015 - 20:47

как удалить точки слайдера?

#13 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 05 Январь 2015 - 12:17

Просмотр сообщенияvadim777 (03 Январь 2015 - 20:47) писал:

как удалить точки слайдера?
Здравствуйте.
Пришлите номер аккаунта, на котором нужно убрать точки от слайдера.

#14 LDaisy

LDaisy

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

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

Отправлено 09 Май 2015 - 10:09

переместила вопрос в другую тему

#15 LDaisy

LDaisy

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

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

Отправлено 09 Май 2015 - 15:26

переместила вопрос в другую тему.
Обратно в Шаблон Сияние


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

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

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