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


Добавить Элемент


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

#21 Ирина345

Ирина345

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

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

Отправлено 04 Сентябрь 2017 - 17:19

Просмотр сообщенияadmin (02 Сентябрь 2017 - 12:02) писал:

1. Иконку поиска нужно так же опустить на 3 пикселя. При наведении на иконку ПОИСК появляется сама форма поиска и она должна появляться так же как при наведении на иконку ВХОД в ЛК (плавно из центра, а сейчас они по своему для каждой иконки)

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

3 При наведении на товар на картинке появляется светлый фон, а нужно его сделать как в каталоге более плавно ив один стиль (появляется с двух сторон)



Спасибо
Только в телефоне нужно доработать, какого-то стиля не хватает в разрешении до 481
Здравствуйте,
1. найдите в файле main.css
.header-search {
	float: left;
}

замените на
.header-search {
	float: left;
	margin-top: 3px;
}

2 добавьте в конец файла main.css
#slideshow a {
	cursor: default;
}
#slideshow .button.big {
	cursor: pointer;
}

3 найдите в файле main.css
.product-grid .item .item-inner .item-img .img-main img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
  
}

замените на
.product-grid .item .item-inner .item-img .img-main img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}


#22 admin

admin

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

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

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

Просмотр сообщенияИрина345 (04 Сентябрь 2017 - 17:19) писал:

Здравствуйте,
1. найдите в файле main.css
.header-search {
float: left;
}

замените на
.header-search {
float: left;
margin-top: 3px;
}

2 добавьте в конец файла main.css
#slideshow a {
cursor: default;
}
#slideshow .button.big {
cursor: pointer;
}

3 найдите в файле main.css
.product-grid .item .item-inner .item-img .img-main img {
max-width: 100%;
display: block;
margin: 0 auto;

}

замените на
.product-grid .item .item-inner .item-img .img-main img {
max-width: 100%;
display: block;
margin: 0 auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

1. Поиск нужно сделать правее рядом с входом в ЛК. И всплывать он может как у иконки ВХОД в ЛК (в таком же стиле)?
2. курсор должен выделять кроме кнопки слайда ещё и стрелочки листания слайдов
3. При наведении на товар образуется лёгкая обводка. Нужно как-то поднять её в верху над картинкой товара.

#23 admin

admin

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

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

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

По второму вопросу.
Кнопку сделать крупнее на слайдере требуется

#24 Vaccina

Vaccina

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

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

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

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

1. Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<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>
			<div class="header-tools">
			  <!-- Меню пользователя -->
			  <div class="myaccount">
              
замените на:
	 <div class="header-tools">
	 <div class="mycart1">
				{% 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">
			<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="myaccount">
              
              
Далее зайдите в main.css - найдите:
.mycart1 {float:left;}
#header-top .header-tools.mycart1{margin-top:3px;}

замените на:
.mycart1 {float:left; margin:3px 10px 0 0;}

далее найдите:
.header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content {position: absolute;right: 0;min-width: 140px;margin-top: 0px;z-index: 9999;padding: 0 15px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);text-align: left;top: 100%;background: #fff;border: 1px solid #ddd;overflow: hidden;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
.header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.header-tools .myaccount .content:before, .mycart .content:before, .header-tools .mycompare .content:before {content: '';display: block;width: 100%;height: 15px;position: absolute;bottom: 100%;left: 0;}


замените на:
.header-tools .header-search .search-hover, .header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content {position: absolute;right: 0;min-width: 140px;margin-top: 0px;z-index: 9999;padding: 0 15px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);text-align: left;top: 100%;background: #fff;border: 1px solid #ddd;overflow: hidden;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
.header-tools .header-search a:hover + .search-hover, .header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.header-tools .header-search a + .search-hover:before, .header-tools .myaccount .content:before, .mycart .content:before, .header-tools .mycompare .content:before {content: '';display: block;width: 100%;height: 15px;position: absolute;bottom: 100%;left: 0;}

далее найдите:
.mycart .cart-count, .header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content,
#toolbar .compare-toggle:hover #compare-items,
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn,
#header-top .header-col-left0 ul.links0
{-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;}

замените на:
.header-tools .header-search .search-hover, .mycart .cart-count, .header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content,
#toolbar .compare-toggle:hover #compare-items,
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn,
#header-top .header-col-left0 ul.links0
{-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;}

далее найдите:
#search_mini_form input {box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);background: #fff;color: #777;border: 1px solid #ddd;height: 25px;float: right;font-size: 12px;margin-top: 39px;width: 200px;padding-left: 10px;padding-right: 30px;}
#search_mini_form button.button {width: 32px;height: 32px;color:#555;background: none;border: none;font-size: 11px;margin: 0;padding: 0;position: absolute;right: 2px;top: 35px;}


замените на:
#search_mini_form input {box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);background: #fff;color: #777;border: 1px solid #ddd;height: 25px;float: right;font-size: 12px;margin: 10px;width: 200px;padding-left: 10px;padding-right: 30px;}
#search_mini_form button.button {width: 32px;height: 32px;color:#555;background: none;border: none;font-size: 11px;margin: 0;padding: 0;position: absolute;right: 12px;top: 6px;}


2. В main.css найдите:
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }

замените на:
.jssora21l { background-position: -3px -33px; cursor: pointer; }
.jssora21r { background-position: -63px -33px;  cursor: pointer;}

3. В main.css найдите:
.owl-carousel .owl-wrapper-outer {overflow: hidden;position: relative;width: 100%;}


замените на:
.owl-carousel .owl-wrapper-outer {overflow: hidden;position: relative;width: 100%;padding-top: 3px;}


#25 admin

admin

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

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

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

Просмотр сообщенияVaccina (05 Сентябрь 2017 - 07:39) писал:

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

1. Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<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>
		 <div class="header-tools">
			 <!-- Меню пользователя -->
			 <div class="myaccount">
  
замените на:
	 <div class="header-tools">
<div class="mycart1">
			 {% 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">
		 <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="myaccount">
  
  
Далее зайдите в main.css - найдите:
.mycart1 {float:left;}
#header-top .header-tools.mycart1{margin-top:3px;}

замените на:
.mycart1 {float:left; margin:3px 10px 0 0;}

далее найдите:
.header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content {position: absolute;right: 0;min-width: 140px;margin-top: 0px;z-index: 9999;padding: 0 15px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);text-align: left;top: 100%;background: #fff;border: 1px solid #ddd;overflow: hidden;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
.header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.header-tools .myaccount .content:before, .mycart .content:before, .header-tools .mycompare .content:before {content: '';display: block;width: 100%;height: 15px;position: absolute;bottom: 100%;left: 0;}


замените на:
.header-tools .header-search .search-hover, .header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content {position: absolute;right: 0;min-width: 140px;margin-top: 0px;z-index: 9999;padding: 0 15px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);text-align: left;top: 100%;background: #fff;border: 1px solid #ddd;overflow: hidden;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
.header-tools .header-search a:hover + .search-hover, .header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.header-tools .header-search a + .search-hover:before, .header-tools .myaccount .content:before, .mycart .content:before, .header-tools .mycompare .content:before {content: '';display: block;width: 100%;height: 15px;position: absolute;bottom: 100%;left: 0;}

далее найдите:
.mycart .cart-count, .header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content,
#toolbar .compare-toggle:hover #compare-items,
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn,
#header-top .header-col-left0 ul.links0
{-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;}

замените на:
.header-tools .header-search .search-hover, .mycart .cart-count, .header-tools .myaccount .content, .mycart .content, .header-tools .mycompare .content,
#toolbar .compare-toggle:hover #compare-items,
.sns-producttabs .sns-pdt-container .button-load .pdt-loadmore .btn-loadmore .ltabs-loadmore-btn,
#header-top .header-col-left0 ul.links0
{-webkit-transition: all 0.4s ease 0s;-moz-transition: all 0.4s ease 0s;-o-transition: all 0.4s ease 0s;transition: all 0.4s ease 0s;}

далее найдите:
#search_mini_form input {box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);background: #fff;color: #777;border: 1px solid #ddd;height: 25px;float: right;font-size: 12px;margin-top: 39px;width: 200px;padding-left: 10px;padding-right: 30px;}
#search_mini_form button.button {width: 32px;height: 32px;color:#555;background: none;border: none;font-size: 11px;margin: 0;padding: 0;position: absolute;right: 2px;top: 35px;}


замените на:
#search_mini_form input {box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);background: #fff;color: #777;border: 1px solid #ddd;height: 25px;float: right;font-size: 12px;margin: 10px;width: 200px;padding-left: 10px;padding-right: 30px;}
#search_mini_form button.button {width: 32px;height: 32px;color:#555;background: none;border: none;font-size: 11px;margin: 0;padding: 0;position: absolute;right: 12px;top: 6px;}


2. В main.css найдите:
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }

замените на:
.jssora21l { background-position: -3px -33px; cursor: pointer; }
.jssora21r { background-position: -63px -33px; cursor: pointer;}

3. В main.css найдите:
.owl-carousel .owl-wrapper-outer {overflow: hidden;position: relative;width: 100%;}


замените на:
.owl-carousel .owl-wrapper-outer {overflow: hidden;position: relative;width: 100%;padding-top: 3px;}

Здравствуйте
1.В сплывающий поиск нельзя попасть он закрывается при перемещении курсора к нему.
3.Ничего не изменилось
4.Кнопку сделать крупнее на слайдере требуется (указана как BIG, а в итоге мелкая)

#26 admin

admin

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

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

Отправлено 05 Сентябрь 2017 - 08:27

1.В разрешении до 991 пикселя телефон был в шапке справа, теперь его нет. Нужно сделать.

#27 Mr.Nito

Mr.Nito

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

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

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

Просмотр сообщенияadmin (05 Сентябрь 2017 - 08:08) писал:

Здравствуйте
1.В сплывающий поиск нельзя попасть он закрывается при перемещении курсора к нему.
3.Ничего не изменилось
4.Кнопку сделать крупнее на слайдере требуется (указана как BIG, а в итоге мелкая)
1.Для поиска
в main.css
замените
.header-tools .header-search a:hover + .search-hover, .header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
на
.header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.header-tools .header-search:hover a + .search-hover{overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
3.По третьему вопросу: товар при наведении мышкой обводится рамкой. Уточните, пожалуйста, ваш вопрос.
4.В main.css
#slideshow .button.big {cursor: pointer;}
замените на
#slideshow .button.big {cursor: pointer;padding: 10px 40px;font-size: 20px;font-weight: bold;}


#28 admin

admin

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

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

Отправлено 06 Сентябрь 2017 - 16:08

Просмотр сообщенияMr.Nito (06 Сентябрь 2017 - 15:43) писал:

1.Для поиска
в main.css
замените
.header-tools .header-search a:hover + .search-hover, .header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
на
.header-tools .myaccount:hover .content, .mycart.have-items:hover .content, .header-tools .mycompare.have-items:hover .content {overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.header-tools .header-search:hover a + .search-hover{overflow: visible;opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
3.По третьему вопросу: товар при наведении мышкой обводится рамкой. Уточните, пожалуйста, ваш вопрос.
4.В main.css
#slideshow .button.big {cursor: pointer;}
замените на
#slideshow .button.big {cursor: pointer;padding: 10px 40px;font-size: 20px;font-weight: bold;}

В разрешении до 991 пикселя телефон был в шапке справа, теперь его нет. Нужно сделать.
3. padding-top: 3px ничего не изменилось. Нужно что бы рамка была выше картинки товара

#29 admin

admin

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

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

Отправлено 06 Сентябрь 2017 - 18:19

1. В разрешении до 991 пикселя телефон был в шапке справа, теперь его нет. Нужно сделать.
2. Кнопку в слайдере сделать по центру (сейчас она слева)

3.Решено

#30 Mr.Nito

Mr.Nito

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

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

Отправлено 06 Сентябрь 2017 - 19:27

Просмотр сообщенияadmin (06 Сентябрь 2017 - 18:19) писал:

1. В разрешении до 991 пикселя телефон был в шапке справа, теперь его нет. Нужно сделать.
2. Кнопку в слайдере сделать по центру (сейчас она слева)

3.Решено
1. main.css
замените
#header-top .header-col-right .header-search, #header-top .header-col-right .header-tools:last-child {display: none;}
на
#header-top .header-col-right .header-search, #header-top .header-col-right .header-tools div:not(.mycart1) {display: none;}

Для включения на мобильной версии
@media all and (max-width: 481px) {
#header-top .header-col-left {display: none;}
.mycart1 {display: none; }
замените на
@media all and (max-width: 481px) {
#header-top .header-col-left {display: none;}

2.
замените
#slideshow .button.big {cursor: pointer;padding: 10px 40px;font-size: 20px;font-weight: bold;}
на
#slideshow .button.big {cursor: pointer;padding: 10px 40px;font-size: 20px;font-weight: bold;display: block;max-width: 190px;margin: auto;}





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

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