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


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

Автор zoovmeste, 28 янв. 2017 13:16

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

#81 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 06 Май 2017 - 08:25

до 10

#82 Vaccina

Vaccina

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

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

Отправлено 06 Май 2017 - 08:38

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#logo {
	margin: 0;
	padding: 0;
}

после него пропишите:
#custommenu, #logo, .mycart1, .mycart {
	display: inline-block;
	padding: 0 4%;
}

#83 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 06 Май 2017 - 08:54

Просмотр сообщенияVaccina (06 Май 2017 - 08:38) писал:

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#logo {
margin: 0;
padding: 0;
}

после него пропишите:
#custommenu, #logo, .mycart1, .mycart {
display: inline-block;
padding: 0 4%;
}

Это помогло.
А как быть с картинками увеличенными в IE

#84 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 06 Май 2017 - 20:26

Просмотр сообщенияadmin (06 Май 2017 - 08:54) писал:

Это помогло.
А как быть с картинками увеличенными в IE

Попробуйте в main.css добавить:
.IE img {
width: auto;
}

#85 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 07 Май 2017 - 07:20

Просмотр сообщенияMikDark (06 Май 2017 - 20:26) писал:

Попробуйте в main.css добавить:
.IE img {
width: auto;
}

Не помогло!

#86 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 07 Май 2017 - 18:12

В дополнение

В разрешении 800 и 1024 появляется промежуток между картинкой и названием.
Название залазиет на короткое описание.

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

  • вопрос каталог.jpg

#87 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 07 Май 2017 - 18:28

Вроде как всё поправил, но кажется раньше на разрешении 800 было по 3 товара и было всё в порядке, а сейчас по четыре и название наезжает на короткое описание. Можно сделать три товара (на главной по три стоят в данном разрешении)

#88 Firefly

Firefly

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

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

Отправлено 08 Май 2017 - 10:31

Просмотр сообщенияadmin (07 Май 2017 - 18:28) писал:

Вроде как всё поправил, но кажется раньше на разрешении 800 было по 3 товара и было всё в порядке, а сейчас по четыре и название наезжает на короткое описание. Можно сделать три товара (на главной по три стоят в данном разрешении)

Здравствуйте.
В шаблоне main.css код:
a.product-name {height: 38px;display: block;line-height: 18px;}

Заменил на:
a.product-name {height: 38px;display: block;line-height: 18px;overflow: hidden;}

А так же в шаблоне Товары код:
		<!-- Вывод товаров ТАБЛИЦЕЙ -->
		<div class="product-grid">
		  {% FOR goods %}
			<div class="item col-sm-3 col-sms-6 col-smb-12">

Заменил на:
		<!-- Вывод товаров ТАБЛИЦЕЙ -->
		<div class="product-grid">
		  {% FOR goods %}
			<div class="item col-sm-4 col-md-3 col-sms-6 col-smb-12">

Проверьте, пожалуйста.

#89 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 13 Май 2017 - 10:51

Просмотр сообщенияFirefly (08 Май 2017 - 10:31) писал:

Здравствуйте.
В шаблоне main.css код:
a.product-name {height: 38px;display: block;line-height: 18px;}

Заменил на:
a.product-name {height: 38px;display: block;line-height: 18px;overflow: hidden;}

А так же в шаблоне Товары код:
	 <!-- Вывод товаров ТАБЛИЦЕЙ -->
	 <div class="product-grid">
		 {% FOR goods %}
		 <div class="item col-sm-3 col-sms-6 col-smb-12">

Заменил на:
	 <!-- Вывод товаров ТАБЛИЦЕЙ -->
	 <div class="product-grid">
		 {% FOR goods %}
		 <div class="item col-sm-4 col-md-3 col-sms-6 col-smb-12">

Проверьте, пожалуйста.
Спасибо!

А как быть с картинками увеличенными в IE

#90 Mr.Nito

Mr.Nito

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

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

Отправлено 13 Май 2017 - 12:04

Просмотр сообщенияadmin (13 Май 2017 - 10:51) писал:

Спасибо!

А как быть с картинками увеличенными в IE
Отображение товаров в IE поправил в main.css
/******************************************************************************
  Фиксы для браузеров
*******************************************************************************/

добавил
.IE .product-grid .item .item-inner .item-img .img-main img {max-width:260px;}

#91 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 13 Май 2017 - 12:43

Не могу добиться хорошей видимости в мобильных версиях.
Требуются изменения.
1. Поиск сделать иконкой и оставить на своём месте, а слева от него поместить телефон.
2. В разрешении более 991 к корзине добавить надпись "корзина покупок" как у каталога, а логотип должен быть строго по центру
3. В разрешении менее 641 поиск, ЛК и сравнение должны располагаться только в мобильном каталоге

#92 Vaccina

Vaccina

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

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

Отправлено 16 Май 2017 - 05:31

Здравствуйте.

1. Уточните пожалуйста, что должно происходить при клике на иконку поиска?
2. Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<i class="fa fa-shopping-cart"></i><span class="cart-count">{CART_COUNT_TOTAL}</span>

после него пропишите:
<span class="text">Корзина покупок</span>

В main.css найдите:
.mycart .cart-count {
	right: -10px;
	top: -20px;
}

после него пропишите:
.mycart .text {
	font-size: 14px;
	text-transform: uppercase;
	vertical-align: middle;
}

Далее найдите:
@media all and (max-width: 991px) {

после него пропишите:
.mycart .text {
	display:none;
}

3. Поиск нужен и в шапке и в раскрывающемся каталоге? Элементы расположить над каталогом иконками? Какой примерно результат должен получиться для более точной расстановки в инструкции?

#93 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 16 Май 2017 - 08:35

Просмотр сообщенияVaccina (16 Май 2017 - 05:31) писал:

Здравствуйте.

1. Уточните пожалуйста, что должно происходить при клике на иконку поиска?
2. Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<i class="fa fa-shopping-cart"></i><span class="cart-count">{CART_COUNT_TOTAL}</span>

после него пропишите:
<span class="text">Корзина покупок</span>

В main.css найдите:
.mycart .cart-count {
right: -10px;
top: -20px;
}

после него пропишите:
.mycart .text {
font-size: 14px;
text-transform: uppercase;
vertical-align: middle;
}

Далее найдите:
@media all and (max-width: 991px) {

после него пропишите:
.mycart .text {
display:none;
}

3. Поиск нужен и в шапке и в раскрывающемся каталоге? Элементы расположить над каталогом иконками? Какой примерно результат должен получиться для более точной расстановки в инструкции?

Поиск заменить на иконку при нажатии на которую ниже будет открываться окно для поиска как сейчас или наподобие.
А слева от поиска разместить телефон.
До 991 скрывается каталог и вместо него появляется мобильный каталог, так нужно чтобы и поиск,ЛК и сравнение были расположены в этом мобильном каталоге. А в верхнем углу их скрыть и останется только телефон.

#94 Firefly

Firefly

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

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

Отправлено 16 Май 2017 - 10:33

Просмотр сообщенияadmin (16 Май 2017 - 08:35) писал:

Поиск заменить на иконку при нажатии на которую ниже будет открываться окно для поиска как сейчас или наподобие.
А слева от поиска разместить телефон.
До 991 скрывается каталог и вместо него появляется мобильный каталог, так нужно чтобы и поиск,ЛК и сравнение были расположены в этом мобильном каталоге. А в верхнем углу их скрыть и останется только телефон.

Здравствуйте.
Произвел Вам изменения. Добавил код в шапку сайта:
		  <div class="mycart1 header-tools">
				{% IF SETTINGS_STORE_PHONE_NUMBER1 %}<em class="fa fa-phone">&nbsp;</em> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a>{% ENDIF %}
		  </div>
		<!-- Поиск -->
		<div class="header-search header-tools">
			<a href="javascript:void(0);"><em class="fa fa-search">&nbsp;</em></a>
		  <div class="search-hover">
			<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину">
			  <div class="form-search">
				<input id="search" type="text" name="q" value="" class="input-text search-string" placeholder="Поиск по магазину...">
				<button type="submit" title="Искать" class="button search-submit fa"></button>
			  </div>
			</form>
		  </div>
		</div>


И внес изменения по шаблону main.css.

Проверьте результат, пожалуйста.

#95 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 16 Май 2017 - 11:15

Просмотр сообщенияFirefly (16 Май 2017 - 10:33) писал:

Здравствуйте.
Произвел Вам изменения. Добавил код в шапку сайта:
		 <div class="mycart1 header-tools">
			 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<em class="fa fa-phone">&nbsp;</em> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a>{% ENDIF %}
		 </div>
	 <!-- Поиск -->
	 <div class="header-search header-tools">
		 <a href="javascript:void(0);"><em class="fa fa-search">&nbsp;</em></a>
		 <div class="search-hover">
		 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину">
			 <div class="form-search">
			 <input id="search" type="text" name="q" value="" class="input-text search-string" placeholder="Поиск по магазину...">
			 <button type="submit" title="Искать" class="button search-submit fa"></button>
			 </div>
		 </form>
		 </div>
	 </div>

И внес изменения по шаблону main.css.

Проверьте результат, пожалуйста.

Иконку поиска нужно сделать в один ряд с ЛК и сравнением (одно целое), а телефон будет отдельно в 20px

До 991 скрывается каталог и вместо него появляется мобильный каталог, так нужно чтобы и поиск,ЛК и сравнение были расположены в этом мобильном каталоге. А в верхнем углу их скрыть и останется только телефон.
Логотип сделать по центру как в разрешении 1024 например или более
Сейчас в мобильной версии менее 991 появляется мобильный каталог который располагается уже по другому.

#96 Vaccina

Vaccina

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

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

Отправлено 17 Май 2017 - 08:04

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:

.header-search {
float: left;
}

замените на:

.header-search {
float: left;
margin: 1px -7px 0 25px !important;
}

далее найдите:
.header-tools .mycompare #compare-items .button {display: block;margin: 0 auto;max-width: 170px;}

после него вставьте:
#menu_offcanvas .header-tools {
width: 60%;
text-align: center;
}
#menu_offcanvas .header-tools > div {
width: 47%;
}
#menu_offcanvas .header-search {
width: 32%;
text-align: center;
}
#menu_offcanvas .header-tools i {
color: #fff;
}

далее найдите:

@media all and (max-width: 991px) {

после него вставьте:

#header-top .header-col-right .header-search, #header-top .header-col-right .header-tools:last-child {
display: none;
}
#header .container {
text-align: center;
display: block;
}
.mycart {
float: right;
margin-top: 15px;
}

далее зайдите в шаблон HTML - найдите:
<!-- Меню -->
	 <div id="menu" class="wrap">
	 <div class="container">
		 <div class="row">
		 <div id="mommenu" class="menu-offcanvas">
			 <span class="btn-navbar"> <i class="fa fa-align-justify"></i> <span class="overlay"></span></span>
			 <div id="menu_offcanvas" class="offcanvas">
  
  
после него вставьте:
<!-- Поиск -->
	 <div class="header-search header-tools">
		 <a href="javascript:void(0);"><em class="fa fa-search">&nbsp;</em></a>
		 <div class="search-hover">
		 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину">
			 <div class="form-search">
			 <input id="search" type="text" name="q" value="" class="input-text search-string" placeholder="Поиск по магазину...">
			 <button type="submit" title="Искать" class="button search-submit fa"></button>
			 </div>
		 </form>
		 </div>
	 </div>
		 <div class="header-tools">
			 <!-- Меню пользователя -->
			 <div class="myaccount">
			 <div class="tongle" title="Меню пользователя"><i class="fa fa-user"></i></div>
			 <div class="content">
				 <ul class="links">
				 {% IFNOT CLIENT_IS_LOGIN %}
				 <li><a href="{USER_LOGIN_URL}" title="Вход в личный кабинет"><i class="fa fa-sign-in"></i>Вход</a></li>
				 <li><a href="{USER_REGISTER_URL}" title="Регистрация"><i class="fa fa-user-plus"></i>Регистрация</a></li>
				 {% ELSE %}
				 <li><a href="{USER_SETTINGS_URL}" title="Личный кабинет"><i class="fa fa-user"></i>Мой кабинет</a></li>
				 <li><a href="{USER_HISTORY_LIST_URL}" title="История заказов"><i class="fa fa-history"></i>История</a></li>
				 <li><a href="{FAVORITES_URL}" title="Избранные товары"><i class="fa fa-heart"></i>Избранное</a></li>
				 <li><a href="{COMPARE_URL}" title="Сравнение"><i class="fa fa-retweet"></i>Сравнение</a></li>
				 <li><a href="{USER_LOGOUT_URL}" title="Выход"><i class="fa fa-sign-out"></i>Выход</a></li>
				 {% ENDIF %}
				 </ul>
			 </div>
			 </div>
			 <!-- Сравнение -->
			 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
			 <div class="mycompare {% IF COMPARE_GOODS_COUNT > 0 %}have-items{% ENDIF %}">
			 <div class="tongle">
				 <a href="{COMPARE_URL}" title="Перейти к сравнению">
				 <i class="fa fa-retweet"></i><span class="compare-num">{COMPARE_GOODS_COUNT}</span>
				 </a>
			 </div>
			 <ul id="compare-items" class="content">
				 {% FOR compare_goods %}
				 <li class="item" {% IF compare_goods.index > 6 %}style="display:none;"{% ENDIF %}>
				 <a data-href="{COMPARE_DELETE_URL}?id={compare_goods.MIN_PRICE_NOW_ID}" data-goods-mod-id="{compare_goods.MIN_PRICE_NOW_ID}" class="remove-compare fa fa-close" title="Убрать товар из списка сравнения"></a>
				 <div class="product-name"><a href="{compare_goods.URL}" class="title" title="{compare_goods.NAME}">{compare_goods.NAME}</a></div>
				 <a href="#" class="dataid">{compare_goods.ID}</a>
				 </li>
				 {% ENDFOR %}
			 </ul>
			 </div>
			 {% ENDIF %}
			 <!-- Корзина -->
		 </div>
<div class="clear"></div>

#97 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 17 Май 2017 - 12:20

Теперь нужно чуть доработать.
В мобильном каталоге:
поиск сделать открытым без наведения и иконки, далее иконка ЛК и сравнения. Все в один ряд

#98 Mr.Nito

Mr.Nito

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

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

Отправлено 17 Май 2017 - 15:10

Просмотр сообщенияadmin (17 Май 2017 - 12:20) писал:

Теперь нужно чуть доработать.
В мобильном каталоге:
поиск сделать открытым без наведения и иконки, далее иконка ЛК и сравнения. Все в один ряд
Уточните, пожалуйста, изменения в мобильном каталоге должны выглядеть как на скриншоте?

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

  • 17-05-2017 15-08-58.jpg

#99 admin

admin

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

  • Пользователи
  • PipPipPipPip
  • 505 сообщений
  • ГородСамара

Отправлено 17 Май 2017 - 15:13

Просмотр сообщенияMr.Nito (17 Май 2017 - 15:10) писал:

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

#100 Mr.Nito

Mr.Nito

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

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

Отправлено 17 Май 2017 - 16:49

Просмотр сообщенияadmin (17 Май 2017 - 15:13) писал:

Желательно в одну строчку поиск ЛК и сравнение. Поиск можно сделать меньше и будет написано "поиск"
В таком случае поле получится совсем маленьким и на мобильном устройстве будет неудобно вводить поисковый запрос.

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

  • 17-05-2017 16-47-15.jpg

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


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

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

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