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


Мобильная Версия Шаблон Хамелеон


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

#21 korki

korki

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

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

Отправлено 16 Октябрь 2015 - 12:50

Просмотр сообщенияDanil (16 Октябрь 2015 - 11:32) писал:

Код
.header .row2 .col-4:first-child {
		 float: left;
		 margin-left: 33.3%;
		 margin-top: 82px;
}
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.header .row2 .col-4:first-child {
margin-left: 0px;
		 margin-top: 0px;
}
.row2 .marg4 {
margin-top: 0px;
}
}
замените на
.header .row2 .col-4:first-child {
		 float: left;
}
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.header .row2 .col-4:first-child {
margin-left: 0px;
		 margin-top: 0px;
}
.row2 .marg4 {
margin-top: 0px;
}
}
@media only screen and (min-width: 1025px) {
.header .row2 .col-4:first-child {
margin-left: 33.3%;
		 margin-top: 82px;
}
}

Спасибо, гораздо лучше!
Скажите, как убрать кнопки Вход и Регистрация? Так, чтобы зеленая плашка стала еще уже. см. вложение
Или:
Есть ли возможность создать на шапке цветную плашку (как та, что есть в фоне сейчас), чтобы на нее поместить телефон и кнопки Вход и Регистрация? см. вложение 2

Сделать пятый пункт возможно?
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»

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

  • Снимок-экрана-2015-101-16-в-12.27.47.png
  • Снимок-экрана-205-101-16-в-12.27.47.png


#22 korki

korki

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

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

Отправлено 18 Октябрь 2015 - 20:10

Скажите, как убрать кнопки Вход и Регистрация? Так, чтобы зеленая плашка стала еще уже. см. вложение
Или:
Есть ли возможность создать на шапке цветную плашку (как та, что есть в фоне сейчас), чтобы на нее поместить телефон и кнопки Вход и Регистрация? см. вложение 2

Сделать пятый пункт возможно?
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»

#23 korki

korki

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

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

Отправлено 20 Октябрь 2015 - 14:40

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

Сделать пятый пункт возможно?
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»

#24 korki

korki

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

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

Отправлено 21 Октябрь 2015 - 07:46

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

Сделать пятый пункт возможно?
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»


#25 Ирина345

Ирина345

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

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

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

Просмотр сообщенияkorki (21 Октябрь 2015 - 07:46) писал:

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

Сделать пятый пункт возможно?
5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»

Здравствуйте, для того что бы добавить кнопки "Вход и Регистрация" в верхнюю часть шапки, найдите в файле main.css
.login{display: none; width:138px;margin:6px auto 0 auto;}
замените на

.login {
	width: 138px;
	margin: 9px auto 0 auto !important;
	position: absolute;
	top: -10px;
}


#26 korki

korki

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

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

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

Просмотр сообщенияИрина345 (21 Октябрь 2015 - 11:13) писал:

Здравствуйте, для того что бы добавить кнопки "Вход и Регистрация" в верхнюю часть шапки, найдите в файле main.css
.login{display: none; width:138px;margin:6px auto 0 auto;}
замените на

.login {
width: 138px;
margin: 9px auto 0 auto !important;
position: absolute;
top: -10px;
}
Спасибо!

Скажите, как поднять телефон наверх, влево? (Как в обычной версии это сделать понятно, нужно чтобы в мобильной версии он также был сверху, так, чтобы корзина не смещалась вниз). Вопрос про плашку сверху открыт: как сделать цветную плашку наверху шапки (так, чтобы там был телефон и возможно регистрация)?

#27 korki

korki

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

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

Отправлено 21 Октябрь 2015 - 14:58

И еще вопрос: Как можно задать фон-картинку (не цвет) шапке?

#28 Юля123

Юля123

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

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

Отправлено 21 Октябрь 2015 - 15:14

Просмотр сообщенияkorki (21 Октябрь 2015 - 14:58) писал:

И еще вопрос: Как можно задать фон-картинку (не цвет) шапке?

Здравствуйте, в main.css добавьте код
.header.theme-color {
	background: url(url-адрес картинки);
}


#29 korki

korki

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

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

Отправлено 21 Октябрь 2015 - 18:03

Просмотр сообщенияЮля123 (21 Октябрь 2015 - 15:14) писал:

Здравствуйте, в main.css добавьте код
.header.theme-color {
background: url(url-адрес картинки);
}

Спасибо, то что надо!

#30 korki

korki

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

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

Отправлено 21 Октябрь 2015 - 18:32

5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»)
Если нет, то скажите пожалуйста, что это невозможно сделать, а то вопрос витает в воздухе...

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

  • Шапка-Mob_Good.jpg


#31 korki

korki

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

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

Отправлено 24 Октябрь 2015 - 08:10

5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»)
Если нет, то скажите пожалуйста, что это невозможно сделать, а то вопрос витает в воздухе...

#32 korki

korki

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

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

Отправлено 25 Октябрь 2015 - 22:21

5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»)
Если нет, то скажите пожалуйста, что это невозможно сделать, а то вопрос витает в воздухе...

#33 Firefly

Firefly

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

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

Отправлено 26 Октябрь 2015 - 14:47

Просмотр сообщенияkorki (25 Октябрь 2015 - 22:21) писал:

5. Реально ли сделать так, чтобы поиск в мобильной версии выглядел просто как значок, а при клике на него появлялось окно поиска снизу (см. вложение «Шапка-Mob_Good»)
Если нет, то скажите пожалуйста, что это невозможно сделать, а то вопрос витает в воздухе...

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
			</div><!--END search-->

Замените на:
			</div><!--END search-->
			<!-- search2-->
										  <div class="block-search">
					<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="inputText search-string" placeholder="Поиск по магазину...">
						<button type="submit" title="Искать" class="button search-submit"></button>
					  </div>
					</form>
				  </div>
				  <!--END search2-->

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
/* Search 2 */
@media only screen and (min-width: 767px) {
#search_mini_form2 {display:none;}
}
@media all and (max-width: 767px) {
#search_mini_form {display:none;}
.block-search {display:block;}
.block-search #search_mini_form2 {position: absolute;right: 35px; top:273px; cursor: pointer;z-index: 1000;height: 51px;width: 51px;}
.block-search #search_mini_form2:before {content: "";right: 0px;position: absolute;width: 48px;height: 47px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;border: 1px solid rgba(255, 255, 255, 0.5);background: transparent;}
.block-search #search_mini_form2:after {position: absolute;content: "";height: 16px;width: 17px;top: 18px;left: 18px;background: url("{ASSETS_IMAGES_PATH}search.png?design=chameleon") no-repeat left top;}
.block-search #search_mini_form2:hover:before {background: rgba(255, 255, 255, 0.2);}
.block-search #search_mini_form2:hover .form-search {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.block-search #search_mini_form2 .form-search {position: absolute;right: -30px;top: 50px;padding-top: 21px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);transform-origin: 50% 10% 0;-moz-transform-origin: 50% 10% 0;-webkit-transform-origin: 50% 10% 0;-o-transform-origin: 50% 10% 0;-ms-transform-origin: 50% 10% 0;}
#search_mini_form2 input{padding: 10px 5px 10px 5px;font-size:14px;width:250px;z-index:1000;}
#search_mini_form2 button{background:url('{ASSETS_IMAGES_PATH}search.png?design=chameleon') no-repeat; border:none;padding:6px;position:absolute;right:15px;top: 35px; cursor:pointer;}
}
@media all and (min-width:410px) and (max-width: 480px) {
.block-search #search_mini_form2 {right: 14px; top:328px;}
#search_mini_form2 button{background:url('{ASSETS_IMAGES_PATH}search.png?design=chameleon') no-repeat; right:25px;top: 25px;}
}
@media all and (max-width: 410px) {
.block-search #search_mini_form2 {display:none;}
}
/* END Search 2 */


#34 korki

korki

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

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

Отправлено 26 Октябрь 2015 - 17:52

Просмотр сообщенияFirefly (26 Октябрь 2015 - 14:47) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
		 </div><!--END search-->

Замените на:
		 </div><!--END search-->
		 <!-- search2-->
										 <div class="block-search">
				 <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="inputText search-string" placeholder="Поиск по магазину...">
					 <button type="submit" title="Искать" class="button search-submit"></button>
					 </div>
				 </form>
				 </div>
				 <!--END search2-->

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
/* Search 2 */
@media only screen and (min-width: 767px) {
#search_mini_form2 {display:none;}
}
@media all and (max-width: 767px) {
#search_mini_form {display:none;}
.block-search {display:block;}
.block-search #search_mini_form2 {position: absolute;right: 35px; top:273px; cursor: pointer;z-index: 1000;height: 51px;width: 51px;}
.block-search #search_mini_form2:before {content: "";right: 0px;position: absolute;width: 48px;height: 47px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;border: 1px solid rgba(255, 255, 255, 0.5);background: transparent;}
.block-search #search_mini_form2:after {position: absolute;content: "";height: 16px;width: 17px;top: 18px;left: 18px;background: url("{ASSETS_IMAGES_PATH}search.png?design=chameleon") no-repeat left top;}
.block-search #search_mini_form2:hover:before {background: rgba(255, 255, 255, 0.2);}
.block-search #search_mini_form2:hover .form-search {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.block-search #search_mini_form2 .form-search {position: absolute;right: -30px;top: 50px;padding-top: 21px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);transform-origin: 50% 10% 0;-moz-transform-origin: 50% 10% 0;-webkit-transform-origin: 50% 10% 0;-o-transform-origin: 50% 10% 0;-ms-transform-origin: 50% 10% 0;}
#search_mini_form2 input{padding: 10px 5px 10px 5px;font-size:14px;width:250px;z-index:1000;}
#search_mini_form2 button{background:url('{ASSETS_IMAGES_PATH}search.png?design=chameleon') no-repeat; border:none;padding:6px;position:absolute;right:15px;top: 35px; cursor:pointer;}
}
@media all and (min-width:410px) and (max-width: 480px) {
.block-search #search_mini_form2 {right: 14px; top:328px;}
#search_mini_form2 button{background:url('{ASSETS_IMAGES_PATH}search.png?design=chameleon') no-repeat; right:25px;top: 25px;}
}
@media all and (max-width: 410px) {
.block-search #search_mini_form2 {display:none;}
}
/* END Search 2 */
Уф! Спасибо большое! Сработало для поиска!
Еще бы с корзиной сделать тоже самое. Сейчас значок Поиска справа от Главное меню. Как сделать так чтобы значок Корзина с количеством покупок был слева от Главное меню (см вложение)?

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

  • Шапка-Mob_Good_2.jpg


#35 Юля123

Юля123

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

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

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

Просмотр сообщенияkorki (26 Октябрь 2015 - 17:52) писал:

Уф! Спасибо большое! Сработало для поиска!
Еще бы с корзиной сделать тоже самое. Сейчас значок Поиска справа от Главное меню. Как сделать так чтобы значок Корзина с количеством покупок был слева от Главное меню (см вложение)?

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

1) зайдите в админ.панель -> Сайт -> Редактор шаблонов -> Шаблоны ->HTML, найдите код:
<!-- end Корзина -->

и замените его на
			<!-- end Корзина -->
		   
		  <!-- Корзина 2-->
					  <div class="block-basket">
								<div id="cart2">
								<div class="incart2">
								  <div class="carttotalqty2 theme-color2">
										{CART_COUNT_TOTAL}
								  </div>
								  <a class="cartanchor2" href="{CART_URL}" title="Перейти в корзину">
									   
										<span>
										  {% IF cart_count_empty %}
												<span class="icon-cart" style="margin: 4px 7px 0 -25px;"> </span>
										</span>
										{% ELSE %}
										{% FOR cart_sum %}
										  <span class="icon-cart" style="margin: 4px 7px 0 -25px;"></span>
										 
										{% ENDFOR %}
						  {% ENDIF %}
								 </a>
								</div>
								  </div>
		   <!--END Корзина 2-->

2) в Стили -> main.css найдите код:
@media all and (max-width: 767px) {

после него добавьте код
div#cart2   {
	position: absolute;
	left: 35px;
	top: 273px;
	z-index: 1000;
}
.theme-color2 {
	background-color: rgb(235, 94, 47);
	display: inline-block;
	color: white;
	font-size: 25px;
}
.icon-cart:before {
	content: "\e603";
}
.cartanchor2{
  display:inline-block;
  color:white;
  margin-left:30px;
}
.incart{display:none;}
.incart2 {
	margin: 10px;
}

3) код
@media only screen and (min-width: 767px) {
#search_mini_form2 {display:none;}

}
замените на

@media only screen and (min-width: 767px) {
#search_mini_form2 {display:none;}
.incart2{display:none;}
}

4) после кода
@media all and (min-width:410px) and (max-width: 480px) {
добавьте код
.incart2 {
	margin: 25px -14px;
}

5) код
@media all and (max-width: 410px) {
.block-search #search_mini_form2 {display:none;}
}
замените на
@media all and (max-width: 410px) {
.block-search #search_mini_form2,.incart2 {display:none;}
}


#36 korki

korki

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

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

Отправлено 27 Октябрь 2015 - 23:55

Просмотр сообщенияЮля123 (27 Октябрь 2015 - 14:06) писал:

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

1) зайдите в админ.панель -> Сайт -> Редактор шаблонов -> Шаблоны ->HTML, найдите код:
<!-- end Корзина -->

и замените его на
		 <!-- end Корзина -->
		
		 <!-- Корзина 2-->
					 <div class="block-basket">
							 <div id="cart2">
							 <div class="incart2">
								 <div class="carttotalqty2 theme-color2">
									 {CART_COUNT_TOTAL}
								 </div>
								 <a class="cartanchor2" href="{CART_URL}" title="Перейти в корзину">
									
									 <span>
										 {% IF cart_count_empty %}
											 <span class="icon-cart" style="margin: 4px 7px 0 -25px;"> </span>
									 </span>
									 {% ELSE %}
									 {% FOR cart_sum %}
										 <span class="icon-cart" style="margin: 4px 7px 0 -25px;"></span>
										
									 {% ENDFOR %}
						 {% ENDIF %}
								 </a>
							 </div>
								 </div>
		 <!--END Корзина 2-->

2) в Стили -> main.css найдите код:
@media all and (max-width: 767px) {

после него добавьте код
div#cart2 {
position: absolute;
left: 35px;
top: 273px;
z-index: 1000;
}
.theme-color2 {
background-color: rgb(235, 94, 47);
display: inline-block;
color: white;
font-size: 25px;
}
.icon-cart:before {
content: "\e603";
}
.cartanchor2{
display:inline-block;
color:white;
margin-left:30px;
}
.incart{display:none;}
.incart2 {
margin: 10px;
}

3) код
@media only screen and (min-width: 767px) {
#search_mini_form2 {display:none;}

}
замените на

@media only screen and (min-width: 767px) {
#search_mini_form2 {display:none;}
.incart2{display:none;}
}

4) после кода
@media all and (min-width:410px) and (max-width: 480px) {
добавьте код
.incart2 {
margin: 25px -14px;
}

5) код
@media all and (max-width: 410px) {
.block-search #search_mini_form2 {display:none;}
}
замените на
@media all and (max-width: 410px) {
.block-search #search_mini_form2,.incart2 {display:none;}
}

Спасибо! Отлично, то, что нужно! Только Фон слетел: замостился фон шапки на весь сайт, а сам фон сайта не отображается.

#37 Vaccina

Vaccina

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

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

Отправлено 28 Октябрь 2015 - 01:17

В main.css найдите:
.header.theme-color {
		background: url({ASSETS_IMAGES_PATH}shapka.jpg);
}

замените на:
.header.theme-color {
		background: url({ASSETS_IMAGES_PATH}shapka.jpg) no-repeat center center;
}


#38 korki

korki

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

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

Отправлено 28 Октябрь 2015 - 08:00

Просмотр сообщенияVaccina (28 Октябрь 2015 - 01:17) писал:

В main.css найдите:
.header.theme-color {
	 background: url({ASSETS_IMAGES_PATH}shapka.jpg);
}

замените на:
.header.theme-color {
	 background: url({ASSETS_IMAGES_PATH}shapka.jpg) no-repeat center center;
}

Теперь наоборот, шапка исчезла, везде теперь фон сайта: и в шапке тоже.. Вернее фон шапки съехал куда-то вниз..

PS Убрал слово cеnter и фон шапки встал на место.

#39 korki

korki

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

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

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

Просмотр сообщенияkorki (28 Октябрь 2015 - 08:00) писал:

Теперь наоборот, шапка исчезла, везде теперь фон сайта: и в шапке тоже.. Вернее фон шапки съехал куда-то вниз..

PS Убрал слово cеnter и фон шапки встал на место.
Единственное:  шапка в стандартной версии выходит за рамки полоски меню (см вложение). Уменьшил высоту фона шапки — тогда в мобильных версиях шапка наоборот слишком узкая получается и основной фон вылезает наверх полоски меню. Как это исправить?

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

  • Снимок экрана 2015-10-28 в 14.56.49.png


#40 Юля123

Юля123

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

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

Отправлено 28 Октябрь 2015 - 16:35

Просмотр сообщенияkorki (28 Октябрь 2015 - 15:03) писал:

Единственное:  шапка в стандартной версии выходит за рамки полоски меню (см вложение). Уменьшил высоту фона шапки — тогда в мобильных версиях шапка наоборот слишком узкая получается и основной фон вылезает наверх полоски меню. Как это исправить?

Здравствуйте, в стилях main.css в самом конце добавьте код:

@media only screen and (max-width:1120px){
.header.theme-color {
height: 286px;
}
}
@media only screen and (min-width:1121px){
.header.theme-color {
height: 260px;
}
}





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

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