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


Изменения На Главной.

Автор UGIN, 08 янв. 2016 16:05

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

#1 UGIN

UGIN

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

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

Отправлено 08 Январь 2016 - 16:05

1. сделав ссылки на слайдерах, столкнулся с проблемой. при попытке перелистать слайдер происходит переход. можно добавить стрелки по бокам? и сразу, сделать поле нажатия больше чем сама стрелка( т.к. посетитель не всегда может точно кликнуть по стрелки.
2. можно ли допилить мобильную версию сайта, т.к. главная страница и страница "умный дом" совершенно неприемлимо выглядят.
Cпасибо.

#2 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 10 Январь 2016 - 18:13

Просмотр сообщенияUGIN (08 Январь 2016 - 16:05) писал:

1. сделав ссылки на слайдерах, столкнулся с проблемой. при попытке перелистать слайдер происходит переход. можно добавить стрелки по бокам? и сразу, сделать поле нажатия больше чем сама стрелка( т.к. посетитель не всегда может точно кликнуть по стрелки.
2. можно ли допилить мобильную версию сайта, т.к. главная страница и страница "умный дом" совершенно неприемлимо выглядят.
Cпасибо.

Здравствуйте! Перед внесением изменений, создайте бэкап.
1) Загрузите во вкладке Сайт-->Редактор шаблонов, с помощью кнопки "Добавить файлы", изображение:
a21.png

Далее в шаблоне html замените блок кода:
<!-- Слайдер на главной -->
		{% IF index_page %}
		<div id="slideshow" class="wrap">
		  <div id="slider">
			<!-- Slides Container -->
			<div u="slides" class="slides_container">
			   <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			  </div>
			   <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			  </div>
			</div>
			<div data-u="navigator" class="jssorb05" style="z-index:99;position: absolute;bottom: 16px; right: 16px; width: 68px; height: 16px; left: 616px;" data-autocenter="1">
				 <div data-u="prototype" style="width: 16px; height: 16px; position: absolute; left: 0px; top: 0px;"></div>
</div>
		  </div>
		
		</div>
		{% ENDIF %}  
		<!-- /END Слайдер на главной -->
на:
<!-- Слайдер на главной -->
		{% IF index_page %}
		<div id="slideshow" class="wrap">
		  <div id="slider">
			<!-- Slides Container -->
			<div u="slides" class="slides_container">
			   <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			  </div>
			  <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			  </div>
			   <div>
				<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			  </div>
			</div>
		 <!-- Arrow Left -->
		<span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
		</span>
		<!-- Arrow Right -->
		<span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
		</span>
		 </div>
		</div>
		{% ENDIF %}  
		<!-- /END Слайдер на главной -->

Затем в конец шаблона main.css добавьте код:
.jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position: absolute;cursor: pointer;display: block;background: url('{ASSETS_IMAGES_PATH}a21.png') center center no-repeat;overflow: hidden;}
.jssora21l {
  background-position: -5px 230px !important;
  margin-top: -255px;
  height: 550px !important;
}
.jssora21r {
  background-position: -60px 230px !important;
  margin-top: -255px;
  height: 550px !important;
}
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21ldn { background-position: -243px -33px; }
.jssora21rdn { background-position: -303px -33px; }

Результат:
1.jpg

2) Укажите, пожалуйста, на скриншотах, какие необходимо выполнить изменения для мобильной версии.

#3 UGIN

UGIN

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

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

Отправлено 10 Январь 2016 - 22:21

Просмотр сообщенияRedHead (10 Январь 2016 - 18:13) писал:

Здравствуйте! Перед внесением изменений, создайте бэкап.
1) Загрузите во вкладке Сайт-->Редактор шаблонов, с помощью кнопки "Добавить файлы", изображение:
Прикрепленный файл a21.png

Далее в шаблоне html замените блок кода:
<!-- Слайдер на главной -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
			 <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			 </div>
		 </div>
		 <div data-u="navigator" class="jssorb05" style="z-index:99;position: absolute;bottom: 16px; right: 16px; width: 68px; height: 16px; left: 616px;" data-autocenter="1">
				 <div data-u="prototype" style="width: 16px; height: 16px; position: absolute; left: 0px; top: 0px;"></div>
</div>
		 </div>
		
	 </div>
	 {% ENDIF %}
	 <!-- /END Слайдер на главной -->
на:
<!-- Слайдер на главной -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
			 <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			 </div>
		 </div>
		 <!-- Arrow Left -->
	 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
	 </span>
	 <!-- Arrow Right -->
	 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
	 </span>
		 </div>
	 </div>
	 {% ENDIF %}
	 <!-- /END Слайдер на главной -->

Затем в конец шаблона main.css добавьте код:
.jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position: absolute;cursor: pointer;display: block;background: url('{ASSETS_IMAGES_PATH}a21.png') center center no-repeat;overflow: hidden;}
.jssora21l {
background-position: -5px 230px !important;
margin-top: -255px;
height: 550px !important;
}
.jssora21r {
background-position: -60px 230px !important;
margin-top: -255px;
height: 550px !important;
}
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21ldn { background-position: -243px -33px; }
.jssora21rdn { background-position: -303px -33px; }

Результат:
Прикрепленный файл 1.jpg

2) Укажите, пожалуйста, на скриншотах, какие необходимо выполнить изменения для мобильной версии.
1) пропала карусель, которая была раньше внизу слайдеров. можно ее вернуть?
2)2.1. сделать блок который будет спускаться вниз при скролинге, в кнопке "меню" должен быть каталог товаров. (скрин1)(скрин3 вообще такого не должно быть)
2.2 Блог,новости адаптировать и поставить их по очереди.а при открытии на мобильном вообще убрать этот блок.(скрин5)
2.3  категории на главной "умный дом" "облачное хранилище" адаптировать.
2.4. "доставка уехала" (скрин2)
как по вашему мнению можно страницу "умный дом" адаптировать под мобильную версию?

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

  • скрин2.png
  • скрин3.PNG
  • скрин5.PNG
  • слайд1.png

#4 UGIN

UGIN

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

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

Отправлено 18 Январь 2016 - 09:45

Просмотр сообщенияRedHead (10 Январь 2016 - 18:13) писал:

Здравствуйте! Перед внесением изменений, создайте бэкап.
1) Загрузите во вкладке Сайт-->Редактор шаблонов, с помощью кнопки "Добавить файлы", изображение:
Прикрепленный файл a21.png

Далее в шаблоне html замените блок кода:
<!-- Слайдер на главной -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
			 <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			 </div>
		 </div>
		 <div data-u="navigator" class="jssorb05" style="z-index:99;position: absolute;bottom: 16px; right: 16px; width: 68px; height: 16px; left: 616px;" data-autocenter="1">
				 <div data-u="prototype" style="width: 16px; height: 16px; position: absolute; left: 0px; top: 0px;"></div>
</div>
		 </div>
		
	 </div>
	 {% ENDIF %}
	 <!-- /END Слайдер на главной -->
на:
<!-- Слайдер на главной -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
			 <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			 </div>
		 </div>
		 <!-- Arrow Left -->
	 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
	 </span>
	 <!-- Arrow Right -->
	 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
	 </span>
		 </div>
	 </div>
	 {% ENDIF %}
	 <!-- /END Слайдер на главной -->

Затем в конец шаблона main.css добавьте код:
.jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position: absolute;cursor: pointer;display: block;background: url('{ASSETS_IMAGES_PATH}a21.png') center center no-repeat;overflow: hidden;}
.jssora21l {
background-position: -5px 230px !important;
margin-top: -255px;
height: 550px !important;
}
.jssora21r {
background-position: -60px 230px !important;
margin-top: -255px;
height: 550px !important;
}
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21ldn { background-position: -243px -33px; }
.jssora21rdn { background-position: -303px -33px; }

Результат:
Прикрепленный файл 1.jpg

2) Укажите, пожалуйста, на скриншотах, какие необходимо выполнить изменения для мобильной версии.
Доброе утро. после внесенных изменений пропала карусель. как можно ее вернуть?
И сделать стрелки белее выделенными!

#5 UGIN

UGIN

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

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

Отправлено 27 Апрель 2016 - 08:17

Просмотр сообщенияRedHead (10 Январь 2016 - 18:13) писал:

Здравствуйте! Перед внесением изменений, создайте бэкап.
1) Загрузите во вкладке Сайт-->Редактор шаблонов, с помощью кнопки "Добавить файлы", изображение:
Прикрепленный файл a21.png

Далее в шаблоне html замените блок кода:
<!-- Слайдер на главной -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
			 <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			 </div>
		 </div>
		 <div data-u="navigator" class="jssorb05" style="z-index:99;position: absolute;bottom: 16px; right: 16px; width: 68px; height: 16px; left: 616px;" data-autocenter="1">
				 <div data-u="prototype" style="width: 16px; height: 16px; position: absolute; left: 0px; top: 0px;"></div>
</div>
		 </div>
		
	 </div>
	 {% ENDIF %}
	 <!-- /END Слайдер на главной -->
на:
<!-- Слайдер на главной -->
	 {% IF index_page %}
	 <div id="slideshow" class="wrap">
		 <div id="slider">
		 <!-- Slides Container -->
		 <div u="slides" class="slides_container">
			 <div>
																 <a href="http://store-ip.ru/page/Umnyj-dom"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=jade" /></a>
												 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=jade" />
			 </div>
			 <div>
			 <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=jade" />
			 </div>
		 </div>
		 <!-- Arrow Left -->
	 <span u="arrowleft" class="jssora21l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
	 </span>
	 <!-- Arrow Right -->
	 <span u="arrowright" class="jssora21r" style="width: 55px; height: 55px; top: 123px; right: 8px">
	 </span>
		 </div>
	 </div>
	 {% ENDIF %}
	 <!-- /END Слайдер на главной -->

Затем в конец шаблона main.css добавьте код:
.jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {position: absolute;cursor: pointer;display: block;background: url('{ASSETS_IMAGES_PATH}a21.png') center center no-repeat;overflow: hidden;}
.jssora21l {
background-position: -5px 230px !important;
margin-top: -255px;
height: 550px !important;
}
.jssora21r {
background-position: -60px 230px !important;
margin-top: -255px;
height: 550px !important;
}
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21ldn { background-position: -243px -33px; }
.jssora21rdn { background-position: -303px -33px; }

Результат:
Прикрепленный файл 1.jpg

2) Укажите, пожалуйста, на скриншотах, какие необходимо выполнить изменения для мобильной версии.
с Добрым утром. Подскажите как можно в блоге на главной сделать кликабельными картинки?

#6 Юля123

Юля123

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

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

Отправлено 27 Апрель 2016 - 09:26

Просмотр сообщенияUGIN (27 Апрель 2016 - 08:17) писал:

с Добрым утром. Подскажите как можно в блоге на главной сделать кликабельными картинки?

Здравствуйте, попробуйте в кратком описании новости код вида:

<img src="ссылка на картинку" class="fotoNovostiImg">

заменить на код:

<a href="ссылка "><img src="ссылка на картинку" class="fotoNovostiImg"></a>



"ссылка" замените на соответствующую ссылку.

#7 АнтонМ

АнтонМ

    Новичок

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

Отправлено 17 Май 2016 - 17:22

Здравствуйте!
Помогите внести изменения как на скриншоте. Самостоятельно криво получается.

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

  • 2016-05-17_17-07-49.png

#8 Danil

Danil

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

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

Отправлено 19 Май 2016 - 13:30

Просмотр сообщенияАнтонМ (17 Май 2016 - 17:22) писал:

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

#9 АнтонМ

АнтонМ

    Новичок

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

Отправлено 19 Май 2016 - 14:43

Просмотр сообщенияDanil (19 Май 2016 - 13:30) писал:

Здравствуйте.
Создал бэкап и частично произвел изменения, проверьте.
Уточните, пожалуйста, где должна отображаться почта под телефонами и название блока "Контакты"?
Здравствуйте.
Блок "Контакты" без названия. телефоны и почта в одну строку над полем поиска. значки соцсетей на место блока "Контакты"
Поле поиска максимально длинное.

#10 Danil

Danil

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

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

Отправлено 19 Май 2016 - 15:14

Просмотр сообщенияАнтонМ (19 Май 2016 - 14:43) писал:

Здравствуйте.
Блок "Контакты" без названия. телефоны и почта в одну строку над полем поиска. значки соцсетей на место блока "Контакты"
Поле поиска максимально длинное.
Изменения произвел, проверьте.

#11 АнтонМ

АнтонМ

    Новичок

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

Отправлено 19 Май 2016 - 15:51

Просмотр сообщенияDanil (19 Май 2016 - 15:14) писал:

Изменения произвел, проверьте.
То, что надо. Спасибо.
Обратно в Изменение общей стилистики


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

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

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