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


Меню, Кнопки, Ширина Выпадающих Категорий В Мобильной Версии

Автор orionych, 22 авг. 2015 19:53
меню мобильная версия кнопки

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

#1 orionych

orionych

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

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

Отправлено 22 Август 2015 - 19:53

1. Сначала над слайдером были просто определённые добавленные ссылки, потом изменили на меню как описано здесь http://forum.storela...осы-по-шаблону/ (сообщения #6-7).

Всё работает нормально, но вот в мобильной версии остались исходные ссылки, как сделать, чтобы там то же самое меню было?

2. Кнопка, которая вызывает это меню, находится на другом уровне по сравнению с остальными, как их выровнять? Её к остальным или хоть другие к ней - не имеет значения, главное, чтобы ровно. (красная стрелка)

3. Выпадающие категории хотелось бы сделать пошире процентов на 50 - на них неудобно нажимать. (желтые стрелки)

4. Как иконку контактов (люди) заменить на ту, которая используется в основной версии рядом с телефоном? (оранжевая стрелка)

5. Как иконку верхнего меню (якорь) заменить на другую? В идеале - три вертикальные полосы (как кнопка из п.2, только развёрнутая на 90 градусов и в стиле шапки, соответственно, серые полоски на белом фоне). (фиолетовые стрелки)


Заранее спасибо.

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

  • JhmKAF65IqE.jpg

#2 Vaccina

Vaccina

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

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

Отправлено 27 Август 2015 - 02:42

1. В шаблоне HTML найдите:
<ul>
										<li class="level0">
														<a href="{CATALOG_URL}" class="title-lv0">Каталог товаров</a>
												  </li>
				<li class="level0">
														<a href="http://{NET_DOMAIN}/catalog/Новинки" class="title-lv0">Новинки</a>
												  </li>
				<li class="level0">
														<a href="http://{NET_DOMAIN}/catalog/Хиты-продаж" class="title-lv0">Хиты продаж</a>
												  </li>
				<li class="level0">
														<a href="http://{NET_DOMAIN}/catalog/Товары-на-главной" class="title-lv0">Товары на главной</a>
												  </li>
										</ul>

замените на:
<ul>
											   {% FOR menu %}
												{% FOR slider %}
												  {% FOR links %}
														<li class="level0"><a class="title-lv0" href="{menu.slider.links.URL}" {% IF menu.slider.links.TITLE %}title="{menu.slider.links.TITLE}"{% ENDIF %}>{menu.slider.links.NAME}</a></li>
												  {% ENDFOR %}
												{% ENDFOR %}
										  {% ENDFOR %}
										</ul>

2. В main.css найдите:
#mommenu .btn {display:inline-block;cursor:pointer;margin: 14px 0 0;position: relative;z-index: 2;padding: 0 0;background: transparent;width: 49px;height: 49px;line-height: 49px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.5);}
з
замените на:
#mommenu .btn {display:inline-block;cursor:pointer;margin: 5px 0 0;position: relative;z-index: 2;padding: 0 0;background: transparent;width: 49px;height: 49px;line-height: 49px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.5);}

3. В main.css найдите:
#mommenu .menu_collapse_wrap a {
	color: #B9B9B9;
}
замените на:
#mommenu .menu_collapse_wrap a {
	color: #B9B9B9;
	padding: 5px 0;
	display: block;
}

4.В main.css найдите:
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}

замените на:
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: " ";position: absolute;font-size: 16px;left: 8px;top: 0px;background: url("{ASSETS_IMAGES_PATH}ico-contactusnow.png") no-repeat left -35px;}

5. В main.css найдите:
#header-top .topheader-right .sns-quickaccess:before {content: "\f13d";position: absolute;font-family: FontAwesome;left: 9px;top: 0px;font-size: 16px;color: #909090;z-index: 1;cursor: pointer;}
замените на:
#header-top .topheader-right .sns-quickaccess:before {content: "\f0c9";position: absolute;font-family: FontAwesome;left: 9px;top: 0px;font-size: 16px;color: #909090;z-index: 1;cursor: pointer;}

#3 orionych

orionych

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

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

Отправлено 09 Сентябрь 2015 - 14:25

Просмотр сообщенияVaccina (27 Август 2015 - 02:42) писал:

1. В шаблоне HTML найдите:
<ul>
									 <li class="level0">
													 <a href="{CATALOG_URL}" class="title-lv0">Каталог товаров</a>
												 </li>
			 <li class="level0">
													 <a href="http://{NET_DOMAIN}/catalog/Новинки" class="title-lv0">Новинки</a>
												 </li>
			 <li class="level0">
													 <a href="http://{NET_DOMAIN}/catalog/Хиты-продаж" class="title-lv0">Хиты продаж</a>
												 </li>
			 <li class="level0">
													 <a href="http://{NET_DOMAIN}/catalog/Товары-на-главной" class="title-lv0">Товары на главной</a>
												 </li>
									 </ul>

замените на:
<ul>
											 {% FOR menu %}
											 {% FOR slider %}
												 {% FOR links %}
													 <li class="level0"><a class="title-lv0" href="{menu.slider.links.URL}" {% IF menu.slider.links.TITLE %}title="{menu.slider.links.TITLE}"{% ENDIF %}>{menu.slider.links.NAME}</a></li>
												 {% ENDFOR %}
											 {% ENDFOR %}
										 {% ENDFOR %}
									 </ul>

2. В main.css найдите:
#mommenu .btn {display:inline-block;cursor:pointer;margin: 14px 0 0;position: relative;z-index: 2;padding: 0 0;background: transparent;width: 49px;height: 49px;line-height: 49px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.5);}
з
замените на:
#mommenu .btn {display:inline-block;cursor:pointer;margin: 5px 0 0;position: relative;z-index: 2;padding: 0 0;background: transparent;width: 49px;height: 49px;line-height: 49px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.5);}

3. В main.css найдите:
#mommenu .menu_collapse_wrap a {
color: #B9B9B9;
}
замените на:
#mommenu .menu_collapse_wrap a {
color: #B9B9B9;
padding: 5px 0;
display: block;
}

4.В main.css найдите:
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}

замените на:
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: " ";position: absolute;font-size: 16px;left: 8px;top: 0px;background: url("{ASSETS_IMAGES_PATH}ico-contactusnow.png") no-repeat left -35px;}

5. В main.css найдите:
#header-top .topheader-right .sns-quickaccess:before {content: "\f13d";position: absolute;font-family: FontAwesome;left: 9px;top: 0px;font-size: 16px;color: #909090;z-index: 1;cursor: pointer;}
замените на:
#header-top .topheader-right .sns-quickaccess:before {content: "\f0c9";position: absolute;font-family: FontAwesome;left: 9px;top: 0px;font-size: 16px;color: #909090;z-index: 1;cursor: pointer;}


Спасибо большое, всё поправилось, но после этих изменений почему-то перестал работать слайдер - он просто пустой. Как его вернуть, подскажите, пожалуйста?

#4 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 09 Сентябрь 2015 - 14:28

Просмотр сообщенияorionych (09 Сентябрь 2015 - 14:25) писал:

Спасибо большое, всё поправилось, но после этих изменений почему-то перестал работать слайдер - он просто пустой. Как его вернуть, подскажите, пожалуйста?


Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.slides_container img {left:0 !important;}

Замените на:
.slides_container img {left:0 !important;transform: none !important;}

#5 orionych

orionych

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

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

Отправлено 09 Сентябрь 2015 - 14:39

Просмотр сообщенияFirefly (09 Сентябрь 2015 - 14:28) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.slides_container img {left:0 !important;}

Замените на:
.slides_container img {left:0 !important;transform: none !important;}

Благодарю за правильный и быстрый ответ!
Обратно в Изменение общей стилистики



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

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

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

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