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


Изменения В Шапке

Автор Stas_Y, 31 авг. 2015 18:08
Меню логотип поиск и корзин

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

#1 Stas_Y

Stas_Y

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

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

Отправлено 31 Август 2015 - 18:08

Добрый вечер. Требуется произвести следующие изменения:

1) Логотип перенести вверх
2) Подтянуть вторую полосу меню впритык к первой
3) Переместить поиск, поставить перед корзиной

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

  • 1.jpg

#2 Firefly

Firefly

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

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

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

Просмотр сообщенияStas_Y (31 Август 2015 - 18:08) писал:

Добрый вечер. Требуется произвести следующие изменения:

1) Логотип перенести вверх
2) Подтянуть вторую полосу меню впритык к первой
3) Переместить поиск, поставить перед корзиной

Добрый вечер.
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите и удалите код:
			  <!-- Логотип -->
			  <div class="logo col-lg-3 col-md-2 col-xs-12">
				<a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">			   
				  <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}logo.png?design=orange">								  
				</a>
			  </div>

Найдите код:
			  <!-- Основное меню -->
			  <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">

Замените на:
			  <!-- Основное меню -->
			  <div class="header-top-left col-lg-9 col-md-9 col-sm-6 col-xs-12">
			  <!-- Логотип -->
			  <div class="logo col-lg-3 col-md-2 col-xs-12">
				<a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">			   
				  <img alt="{SETTINGS_STORE_NAME}" src="{ASSETS_IMAGES_PATH}logo.png?design=orange">								  
				</a>
			  </div>

2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.header-content .yt-main-menu {padding:40px 0 20px 0;float:right;}

Замените на:
.header-content .yt-main-menu {padding: 0px 0 10px 0;float:right;}

3. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
				<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
				  <div class="form-search">
					<input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>

Переместите данный код перед:
				<!-- Корзина -->

#3 Stas_Y

Stas_Y

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

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

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

Помогите сдвинуть корзину и поиск

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

  • 1.jpg

#4 Firefly

Firefly

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

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

Отправлено 31 Август 2015 - 20:21

Просмотр сообщенияStas_Y (31 Август 2015 - 19:18) писал:

Помогите сдвинуть корзину и поиск

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
			  <!-- Корзина и Поиск -->
			  <div class="header-top-right col-lg-3 col-md-3 col-sm-6 col-xs-12">
			  <!-- Поиск -->
			  <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
				<div class="form-search">
				  <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
				  <button type="submit" title="Искать" class="button search-submit"></button>
				</div>
			  </form>
			  <div class="header-right-mobile">
	  <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get">
				  <div class="form-search">
					<input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>			
			   <!-- Корзина -->
				<div class="block mini-cartpro sm-cartpro cart-header">
				  <div class="block-title cart-count-block">
					{% IF cart_count_empty %}
					  <span class="empty">Корзина пуста</span>
					{% ELSE %}
					  <span class="not-empty"><a href="{CART_URL}"><span class="cart-count">{CART_COUNT_TOTAL}</span> товар{CART_COUNT_TOTAL| gen_word_end("","а","ов")}</a></span>
					  <span class="empty" style="display:none;">Корзина пуста</span>
					{% ENDIF %}
				  </div>
				  <!-- Выпадающая корзина-->
				  <div class="block-content dropdown-cart" {% IF MOD_LNAME = cart %}style="display:none;"{% ENDIF %}>
					<div class="block-inner" {% IF cart_count_empty %}style="display:none;"{% ENDIF %}>
					  <ul id="cart-sidebar" class="mini-products-list">
						{% FOR cart_items %}
						<li class="cart-item">
						  <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}" class="product-image"><img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=orange{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon"></a>
						  <a href="{cart_items.GOODS_URL}" class="product-name">{cart_items.GOODS_NAME}</a>
						  <span class="price" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span>
						  <span class="title-qty">Количество: <span class="qty-val">{cart_items.ORDER_LINE_QUANTITY}</span></span>
						  <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="product-remove"></a>
						</li>
						{% ENDFOR %}
					  </ul>
					  <div class="bottom-action actions">
						<a class="button btn-gotocart remove-products" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}"></a>
						<a class="button btn-checkout" title="Перейти к оформлению заказа" href="{CART_URL}"></a>
						<div class="summary">
						  {% FOR cart_sum %}
						  <span class="subtotal">
							<span class="label-total">Итого:</span> <span class="total-sum">{cart_sum.NOW_WITH_DELIVERY_AND_DISCOUNT | money_format}</span>
						  </span>
						  {% ENDFOR %}
						</div>
					  </div>
					</div>
				  </div>
				  <!-- /END Выпадающая корзина-->
				</div>
				<!-- /END Корзина -->
		   
			  </div>
			  </div>

Переместите данный код после:
		<!-- Верхняя часть шапки -->
		<div class="header-top">

#5 Stas_Y

Stas_Y

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

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

Отправлено 31 Август 2015 - 20:32

Чет вообще не то((
Сдвинуть надо в правый угол прям к до упора

#6 Firefly

Firefly

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

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

Отправлено 31 Август 2015 - 20:45

Просмотр сообщенияStas_Y (31 Август 2015 - 20:32) писал:

Чет вообще не то((
Сдвинуть надо в правый угол прям к до упора

Прошу прощения. Не дописал последнюю строчку.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.header-top .header-top-right {padding: 0;}

Замените на:
.header-top .header-top-right {padding: 0;float: right;}

#7 Stas_Y

Stas_Y

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

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

Отправлено 31 Август 2015 - 20:56

Прекрасно)

Осталось 2) Подтянуть вторую полосу меню впритык к первой

#8 Vaccina

Vaccina

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

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

Отправлено 01 Сентябрь 2015 - 01:20

В main.css найдите:
.header-content .yt-main-menu {
	padding: 40px 0px 20px;
	float: right;
}
замените на:
.header-content .yt-main-menu {
	padding: 0px;
	float: right;
}
.logo img {
	height: 60px;
}

#9 Stas_Y

Stas_Y

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

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

Отправлено 13 Сентябрь 2015 - 21:29

Изменения:
1) Поменять оранжевый цвет на цвет шапки
2) Сузить по высоте кнопки меню и уменьшить шрифт, поменять серый фон на белый
3) Распределить по ширине кнопки меню от |<-------- до ----->|

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

  • 12.jpg

#10 Stas_Y

Stas_Y

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

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

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

Вопрос выше снимается!!!!

Нужно следующее:
В мобильной версии меню с товарами формируется в кнопку "КАТАЛОГ" , как реализовать тоже самое только для всех разрешений???

Далее к этой кнопке прикрутить вот такое выпадающее меню http://w3talks.org/i.../resources/430/ (пример 39 колонна 4)  вместо выезжающего сбоку. Хотелось бы на фон выпадающего меню поставить картинку?!

P/s возможно это можно реализовать за счет вашей платформы без вмешательств и загрузок- я не против))

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

  • 1.jpg

#11 Vaccina

Vaccina

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

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

Отправлено 15 Сентябрь 2015 - 03:15

Ранее вам писалась инструкция по выпадающему пункту каталог в меню с фоновыми подставками, используйте ее, а адаптивный вариант необходимо скрыть. Так как если адаптивный вариант переделывать, то мы придем к тем же действиям =)
http://forum.storela..._40#entry209647

#12 Stas_Y

Stas_Y

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

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

Отправлено 15 Сентябрь 2015 - 03:35

я воспользуюсь вашими решениями, только скажите как поправить код, чтобы выпадение было как на рис?!=))

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

  • 1.jpg

#13 Vaccina

Vaccina

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

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

Отправлено 15 Сентябрь 2015 - 04:06

Я могу прописать корректирующие css на основе результатов, выполните инструкцию по ссылке выше и в main.css измененный код:
.header-top .header-top-left .top-navbar-links {
		overflow: visible;
}
замените на:
.header-top .header-top-left .top-navbar-links {
		overflow: visible;
		display:none;
}

чтобы результат был визуально скрыт только в css и не портил общее отображение сайта и на его основе я уже пропишу последующую инструкцию =)

Только уточните пожалуйста, у вас сейчас реализовано меню иначе, его необходимо совсем убрать или как-то по иному?

#14 Stas_Y

Stas_Y

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

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

Отправлено 15 Сентябрь 2015 - 04:18

Аа..эмм скрылся каталог тот который в обычном разрешении)) сейчас у меня даже не пойму что)) я очень вас прошу посмотрите)

#15 Vaccina

Vaccina

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

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

Отправлено 15 Сентябрь 2015 - 04:26

Вы отменили изменения? У вас сейчас все по старому.

Простите, заметила изменения.

В шаблоне HTML найдите:
<ul class="top-navbar-links">
										   <li><a href="#">Каталог</a>
										  {%FOR catalog_full%}
										{% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
										<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
										  <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
										{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
										{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
								  {%ENDFOR%}
								  </li>
										  {% FOR menu %}
												{% FOR header %}
												  {% FOR links %}
														<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
												  {% ENDFOR %}
												{% ENDFOR %}
										  {% ENDFOR %}
										</ul>

замените на:
<ul class="top-navbar-links">
										   <li><a href="#">Каталог</a>
										  {%FOR catalog_full%}
										{% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
										<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
										  <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
										{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
										{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
								  {%ENDFOR%}
								  </li>
										</ul>

#16 Stas_Y

Stas_Y

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

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

Отправлено 15 Сентябрь 2015 - 05:15

Не вижу каталог)) и меню у меня раскидано, названия групп товаров в шапке

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

  • 1111.jpg

#17 Stas_Y

Stas_Y

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

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

Отправлено 15 Сентябрь 2015 - 05:29

На то место где сейчас категории товаров(т.е. серая строка) нужно поместить header под названием "ВЕРХНЕЕ"

#18 Vaccina

Vaccina

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

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

Отправлено 15 Сентябрь 2015 - 05:33

В main.css найдите:
.header-top .header-top-left .top-navbar-links {float:left;list-style:none;overflow: hidden;height: 40px;}
.header-top .header-top-left .top-navbar-links li {float: left;border-left: 1px solid #fff;height: 40px;background-repeat: no-repeat;}
.header-top .header-top-left .top-navbar-links li a {padding: 18px 18px 12px 18px;display: block;font-size:115%;}
.header-top .header-top-left .top-navbar-links li:hover {background-color: #f79242;}
.header-top .header-top-left .top-navbar-links li:hover a {color: #fff;text-decoration: none;}
.header-top .header-top-left .top-navbar-links {
				overflow: visible;
				display:none;
}
.header-top .header-top-left .top-navbar-links li {
		position: relative;
}
.header-top .header-top-left .top-navbar-links li ul {
		position: absolute;
		left: 0px;
		top: 50px;
		background: rgb(255, 255, 255) none repeat scroll 0% 0%;
		width: 200%;
  display:none;
}
.header-top .header-top-left .top-navbar-links > li > ul.active {
		display:block;
}
.header-top .header-top-left .top-navbar-links li ul li {
		list-style: outside none none;
		float: none;
}
.header-top .header-top-left .top-navbar-links li > ul > li > ul {
		top:0;
		left:100%;
}
.header-top .header-top-left .top-navbar-links li > ul > li:hover > ul {
		display:block;
}
.header-top .header-top-left .top-navbar-links li  ul  li a{
		color:#000 !important;
}
замените на:
.top-navbar-links.cat2 {float:left;list-style:none;overflow: hidden;height: 40px;}
.top-navbar-links.cat2 li {float: left;border-left: 1px solid #fff;height: 40px;background-repeat: no-repeat;}
.top-navbar-links.cat2 li a {padding: 18px 18px 12px 18px;display: block;font-size:115%;}
.top-navbar-links.cat2 li:hover {background-color: #f79242;}
.top-navbar-links.cat2 li:hover a {color: #fff;text-decoration: none;}
.top-navbar-links.cat2 {
				overflow: visible;
				display:none;
}
.top-navbar-links.cat2 li {
		position: relative;
}
.top-navbar-links.cat2 li ul {
		position: absolute;
		left: 0px;
		top: 50px;
		background: rgb(255, 255, 255) none repeat scroll 0% 0%;
		width: 200%;
  display:none;
}
.top-navbar-links.cat2 > li > ul.active {
		display:block;
}
.top-navbar-links.cat2 li ul li {
		list-style: outside none none;
		float: none;
}
.top-navbar-links.cat2 li > ul > li > ul {
		top:0;
		left:100%;
}
.top-navbar-links.cat2 li > ul > li:hover > ul {
		display:block;
}
.top-navbar-links.cat2 li  ul  li a{
		color:#000 !important;
}

далее в шаблоне HTML найдите:
<div class="top-navbar">
				  <button type="button" class="button-navbar two btn-top-navbar" data-toggle="collapse" data-target=".top-navbar .navbar-collapse">
					<span class="text">Меню</span>
				  </button>
				  <div class="navbar-collapse collapse">
					<ul class="top-navbar-links">
																				   <li><a href="#">Каталог</a>
																				  {%FOR catalog_full%}
																				{% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
																				<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
																				  <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
																				{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
																				{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
																  {%ENDFOR%}
																  </li>
																				</ul>
				  </div>
				</div>
перенеите его, поставив после:
<!-- Основная часть шапки -->
		<div class="header-content">
		  <div class="container">
			<div class="row">

далее в main.css найдите:
.header-content .yt-main-menu {
	padding: 0px 0px 10px;
	float: right;
}
замените на:
.header-content .yt-main-menu {
	padding: 0px 0px 10px;
	float: right;
	display:none;
}

Просмотр сообщенияStas_Y (15 Сентябрь 2015 - 05:29) писал:

На то место где сейчас категории товаров(т.е. серая строка) нужно поместить header под названием "ВЕРХНЕЕ"

Кнопка каталога должна быть слева от полосы меню?

#19 Stas_Y

Stas_Y

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

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

Отправлено 15 Сентябрь 2015 - 05:36

ДА)

#20 Vaccina

Vaccina

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

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

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

Тогда из инструкции выше не делайте:

Цитата

далее в main.css найдите:
.header-content .yt-main-menu {
		padding: 0px 0px 10px;
		float: right;
}
замените на:
.header-content .yt-main-menu {
		padding: 0px 0px 10px;
		float: right;
		display:none;
}

Обратно в Изменение общей стилистики


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

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

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