Сообщений в теме: 31

[Александр86]

Здравствуйте! Хотелось бы адаптировать мобильную версию сайта:
1. Сделать блоки(которые синим) в небольшую линию(каталог,путь каталога, сверху над логотипом, и в карточке товара. Возможно ли?
2. И вообще возможно ли изменить цвета в мобильной версии,а в полном разрешении оставить прежним?
3. Съезжают кнопки соцсетей,корзины, поиска можно ли также исправить?
4. И сделать,чтобы отображалось по 2 товара, а не одному.
Спасибо)

[Александр86]

Здравствуйте, я смогу получить ответы?

[Юля123]

Александр86 (16 Январь 2016 - 12:00) писал:

Здравствуйте! Хотелось бы адаптировать мобильную версию сайта:
1. Сделать блоки(которые синим) в небольшую линию(каталог,путь каталога, сверху над логотипом, и в карточке товара. Возможно ли?
2. И вообще возможно ли изменить цвета в мобильной версии,а в полном разрешении оставить прежним?
3. Съезжают кнопки соцсетей,корзины, поиска можно ли также исправить?
4. И сделать,чтобы отображалось по 2 товара, а не одному.
Спасибо)

Здравствуйте, извините за ожидание.

1) Эти блоки у Вас сверху над логотипом, просто они "съехали" . В шаблоне HTML найдите код:

	 </div>
											 <div class="header-social">
				 <a class="social vk" href="ssilka"><img src="{ASSETS_IMAGES_PATH}vkontakte.jpg" alt="" title="" /></a>
				 <a class="social tw" href="ssilka"><img src="{ASSETS_IMAGES_PATH}1383429118_119311912.jpg" alt="" title="" /></a>
				 <a class="social instagram" href="https://www.instagram.com/stilnye_chehly/"><img src="{ASSETS_IMAGES_PATH}Instagram Logo.jpg" alt="" title="" /></a>
				 <a class="social ok" href="ssilka"><img src="{ASSETS_IMAGES_PATH}1383429118_11931193.jpg" alt="" title="" /></a>
		 </div>

и замените на код:

																							 <div class="header-social">
				 <a class="social vk" href="ssilka"><img src="{ASSETS_IMAGES_PATH}vkontakte.jpg" alt="" title="" /></a>
				 <a class="social tw" href="ssilka"><img src="{ASSETS_IMAGES_PATH}1383429118_119311912.jpg" alt="" title="" /></a>
				 <a class="social instagram" href="https://www.instagram.com/stilnye_chehly/"><img src="{ASSETS_IMAGES_PATH}Instagram Logo.jpg" alt="" title="" /></a>
				 <a class="social ok" href="ssilka"><img src="{ASSETS_IMAGES_PATH}1383429118_11931193.jpg" alt="" title="" /></a>
		 </div>
											
												
											 </div>

в main.css код:

.header-social {
float: right;
position: absolute;
transform: translate(970px, -45px);
}

замените на код:

.header-social {
width: 20%;
float: right;
margin-top: 5px;
}

2) Да, так можно сделать, что нужно изменить?

3) В main.css после кода:

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

добавьте код:

.header-social {
width: 50% !important;
float: left !important;
padding: 0 16px 6px 16px;
}

По поводу отображения товаров  Вам ответят в следующем сообщении

[Юля123]

Александр86 (16 Январь 2016 - 12:00) писал:

4. И сделать,чтобы отображалось по 2 товара, а не одному.
Спасибо)

Изменения будут касаться только отображения на главной странице. В шаблоне HTML  найдите код (повторяется 3 раза, на данный момент это  384, 519 и 654):

<div class="item col-sm-4 col-sms-6 col-smb-12 effect-bounceIn">

и замените на код:

<div class="item col-sm-4 col-sms-6 col-smb-6 effect-bounceIn">

для всех трех строк.


далее в main.css найдите код:

.products-grid .item .item-inner .item-img > a {display: block;margin: 0 auto;}

и замените на код:

.products-grid .item .item-inner .item-img > a {
	display: block;
	margin: 0 auto;
	height: 250px !important;
	width: 145px !important;
}

[Александр86]

Спасибо, но ничего не вышло, все соцсети в полной версии съехали, а в мобильной практически все осталось прежним. Может не так изъяснился:
1. Сделать меньше логотип.
2. Блок каталог тоже умньшить,
3. Если возможно убрать почту и кнопки соцсетей,рабочее время только из мобильной версии.
4. Убрать путь,если тоже это возможно.
5. Убрать сортировку по названию,только в мобильной версии.
6. Изменить цвета заменить этот ярко-синий цвет на например этот #E0FFFF,или подсказать где менять цвета.
7. И на всем сайте убрать корзину, сравнение, значок "мне нравится". А значок корзины возможно перенести к названию товара?

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

• 
• 

[Юля123]

Александр86 (18 Январь 2016 - 16:42) писал:

Спасибо, но ничего не вышло, все соцсети в полной версии съехали, а в мобильной практически все осталось прежним. Может не так изъяснился:
1. Сделать меньше логотип.
2. Блок каталог тоже умньшить,
3. Если возможно убрать почту и кнопки соцсетей,рабочее время только из мобильной версии.
4. Убрать путь,если тоже это возможно.
5. Убрать сортировку по названию,только в мобильной версии.
6. Изменить цвета заменить этот ярко-синий цвет на например этот #E0FFFF,или подсказать где менять цвета.
7. И на всем сайте убрать корзину, сравнение, значок "мне нравится". А значок корзины возможно перенести к названию товара?

В инструкции была допущена ошибка, чтобы поправить отображение в обычной версии в main.css код:

[font=Consolas, 'Lucida Console', monospace][size=3]
.header-social {
		width: 20%;
		float: right;
		margin-top: 5px;
}[/size][/font]

замените на код:

.header-social {
		width: 20%;
		float: right;
		margin-top: 5px;
}

1 - 4) В main.css  код:

 div#logo {
	width: 70%;
	margin: 0 auto;
}
.header-right-mob {height: 38px !important;}
#header-right .fa {	width: 36px !important;
	height: 36px !important;
		line-height: 36px !important;}
#mommenu .btn {
	padding: 0 !important;
}
div#mommenu {
  min-height: 40px !important;
  background: #E0FFFF;
}
#mommenu .menu_catalog {
	font-size: 15px !important;
	line-height: 18px !important;
	padding: 10px !important;
}
ul.breadcrumbs {
	display: none;
}
.categories .item .title {
	padding: 5px !important;
}
.header_phone p.email {
	display: none;
}
.header_phone p.worktime {
	display: none;
}
.header-social {display: none;}

.header-social {
	width: 50% !important;
	float: left !important;
	padding: 0 16px 6px 16px;
}

5) Требуется убрать сортировку только по названию? Или сортировку вообще? Если только по названию, то это сделать только для мобильной версии не получится.

6) Цвет прописывается для каждого блока отдельно, если Вы хотите изменить все цвета только для мобильной версии, то нужно отдельно для каждого блока это прописать (а не изменять). В коде применила изменения описанные только для блока "Каталог", кодом:

div#mommenu {
  min-height: 40px !important;
  background: #E0FFFF;
}

в инструкции выше. Если Вы хотите везде изменить цвета, то желательно это делать последовательно (указывать где конкретно поменять).

если Вам не понравятся эти изменения, то найдите этот код и удалите в нем строчку:   background: #E0FFFF;


7) По поводу корзины не понятно. Убрать на все сайте и перенести к названию?

Модуль сравнения отключается в разделе настройки - основные , найдите там блок
Модуль сравнения товаров на сайте


и установите галочку в поле Выключить модуль сравнения товаров на сайте

Или эти изменения нужны только для мобильной версии?

[Александр86]

И еще вопрос, возможно ли сделать для мобильной версии переход на полную версию сайта?

[Александр86]

Опять же,ничего не помогло, я спрашивал конкретно про мобильную версию, а изменилось все в полной( это про пункты 1-4). Тогда попрошу по-другому помочь, можно ли как-то изменить мобильную версию,сейчас она смотрится плохо, хотелось бы,чтобы был упор на изображения, что-то наподобие инстаграмма?хоть как-то возможно произвести подобные изменения?

[Юля123]

Александр86 (18 Январь 2016 - 18:31) писал:

Опять же,ничего не помогло, я спрашивал конкретно про мобильную версию, а изменилось все в полной( это про пункты 1-4). Тогда попрошу по-другому помочь, можно ли как-то изменить мобильную версию,сейчас она смотрится плохо, хотелось бы,чтобы был упор на изображения, что-то наподобие инстаграмма?хоть как-то возможно произвести подобные изменения?

В main.css код:

  .header-social {
		width: 50% !important;
		float: left !important;
		padding: 0 16px 6px 16px;
}

замените на код:

div#logo {
		width: 70%;
		margin: 0 auto;
}
.header-right-mob {height: 38px !important;}
#header-right .fa {	 width: 36px !important;
		height: 36px !important;
				line-height: 36px !important;}
#mommenu .btn {
		padding: 0 !important;
}
div#mommenu {
  min-height: 40px !important;
}
#mommenu .menu_catalog {
		font-size: 15px !important;
		line-height: 18px !important;
		padding: 10px !important;
}
ul.breadcrumbs {
		display: none;
}
.categories .item .title {
		padding: 5px !important;
}
.header_phone p.email {
		display: none;
}
.header_phone p.worktime {
		display: none;
}
.header-social {display: none;}
.header-social {
		width: 50% !important;
		float: left !important;
		padding: 0 16px 6px 16px;
}

[Александр86]

Спасибо) А не подскажите как изменить все цвета в мобильной версии,допусти на #FFDAB9?

[Юля123]

Александр86 (19 Январь 2016 - 15:00) писал:

Спасибо) А не подскажите как изменить все цвета в мобильной версии,допусти на #FFDAB9?

Предлагаю Вам вариант, я начну изменять, если что-то пропущу - Вы пишите, поправим.

В main.css после кода:

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

добавьте код:

#header-right {
  background: #FFDAB9;
}
#header-right .fa {
	background: #FFDAB9;
}
#mommenu {
	  background: #FFDAB9;
}
#mommenu .menu_collapse_wrap{
		  background: #D6AD88;
}
#producttabs .pdt-nav li span {
		background: #FFDAB9;
}
#producttabs .pdt-nav li:hover span, #producttabs .pdt-nav li.tab-nav-actived span {
	border-bottom: 6px solid  #D6AD88;
	width: 100%;
}
.products-grid .item .item-inner .item-info {
	background: #FFDAB9;
}
.products-grid .item .item-inner .actions {
	background: #D6AD88;
}
.categories .item .title {
	  background: #FFDAB9;
}
.categories .item:hover .title {background-color:#D6AD88;color: #fff;}
.block-title {background: #FFDAB9;	border-bottom: 6px solid #D6AD88;}
.block-menu-content > ul {
	  border: 1px solid #FFDAB9;
	border-bottom: 7px solid #D6AD88;
}
a {
  color: #D6AD88;
}
.block-menu-content ul li a.active, .block-menu-content ul li a:hover {
	color: #D6AD88;
	border-left: 3px solid #D6AD88;
	background: #ffffff;
}
.products-grid .item .item-inner:hover .item-info {background:#D6AD88;}
#footer-middle .footer-contact .fa {color: #D6AD88;}
#footer-bottom {
	border-top: 1px solid #FFDAB9;
}
#header-right .header-search .search-hover .form-search .fa-search {color: #D6AD88;}
#header-right .header-search .search-hover .form-search .fa-search:hover {
	color: #fff;
	background: #FFDAB9;
	cursor: pointer;
}
#mommenu .menu_collapse_wrap a:hover, #mommenu .menu_collapse_wrap a.active, #mommenu .menu_collapse_wrap a.active span {
	color: #FFDAB9;
}
#header-right .header-link .top-menu ul li a:hover, #header-right .header-link .top-menu ul li a:hover:before {
	color: #FFDAB9;
}
.breadcrumbs{	background: #FFDAB9;}
.view-mode a:hover, .view-mode span {
	border: 1px solid #FFDAB9;
	background: #FFDAB9;
	color: #fff;
}
.table-box thead td, .table-box tfoot td { 
  background-color: #FFDAB9;
	border: 4px solid #D6AD88;}
	.cartTable .buttons .button {
		background: #D6AD88;
	}
	.product-view .product-shop .add-to-box .add-to-cart .add-cart {background: #D6AD88;}
	.product-tabs .tabs li a:hover {
	color: #FFDAB9;
}
.product-tabs .tabs li a:hover:after, .product-tabs .tabs li a.active:after {
	border-color: #FFDAB9;
}
.product-view .product-shop .product-name h1 {color: #D6AD88 !important;}

Изменила почти все, текст в некоторых местах остался синим, уточните, каким цветом его сделать?

[Александр86]

Спасибо большое) Кнопку заказать хотелось бы сделать  #66CDAA, цена красной, телефон серым.
А еще возможно уменьшить блоки, каталог, на главной, хиты продаж и верхнее меню?

[Юля123]

Александр86 (19 Январь 2016 - 17:21) писал:

Спасибо большое) Кнопку заказать хотелось бы сделать  #66CDAA, цена красной, телефон серым.
А еще возможно уменьшить блоки, каталог, на главной, хиты продаж и верхнее меню?

Давайте тогда я не буду каждый раз уточнять, что код нужно вставлять после кода:

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

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

Итак, добавьте код:

.products-grid .item .item-inner .actions {background: #66CDAA}
.header_phone p a {
	color: #6A6D77;
	font-weight: bold;
}

код:

.products-grid .item .item-inner .actions {
		background: #D6AD88;
}

замените на код:

.products-grid .item .item-inner .actions {
		background: #66CDAA;
}

С ценой справились?

Блок каталог, найдите код:

div#mommenu {
  min-height: 40px !important;
}

измените значение 40 на нужную Вам высоту, дальше поправим отображение иконки и само слово "Каталог"

Аналогично с верхним меню, найдите код:

.header-right-mob {
	height: 38px !important;
}

значение 38 уменьшайте до нужного значения, далее иконки подправим.

Далее блоки хиты, на главной, найдите код:

#producttabs .pdt-nav li:hover span, #producttabs .pdt-nav li.tab-nav-actived span {
		border-bottom: 6px solid  #D6AD88;
		width: 100%;
}

и замените на код:

#producttabs .pdt-nav li:hover span, #producttabs .pdt-nav li.tab-nav-actived span {
	border-bottom: 6px solid #66CDAA;
	width: 100%;
	height: 29px !important;
	line-height: 31px;
	font-size: 14px;
}

Далее код:

#producttabs .pdt-nav li span {
				background: #66CDAA;
}

замените на код:

#producttabs .pdt-nav li span {
	background: #66CDAA;
	height: 29px !important;
	line-height: 31px;
	font-size: 14px;
}

[Александр86]

Спасибо большое,помогло) Да,конечно,все понятно)
А можно ли аналогично уменьшить карточку товара(с названием и ценой)  и блок с кнопкой заказать, и немного увеличить слайдер?

[Юля123]

Александр86 (20 Январь 2016 - 10:57) писал:

Спасибо большое,помогло) Да,конечно,все понятно)
А можно ли аналогично уменьшить карточку товара(с названием и ценой)  и блок с кнопкой заказать, и немного увеличить слайдер?

Найдите код:

#header-right .fa {	  width: 36px !important;
				height: 36px !important;
								line-height: 36px !important;}

замените на код:

#header-right .fa {
	width: 25px !important;
	height: 25px !important;
	line-height: 25px !important;
	font-size: 85%;
}

код:

#mommenu .menu_catalog {
				font-size: 15px !important;
				line-height: 18px !important;
				padding: 10px !important;
}

замените на код:

#mommenu .menu_catalog {
	font-size: 15px !important;
	line-height: 18px !important;
	padding: 4px 10px !important;
}

код:

#mommenu .btn {
				padding: 0 !important;
}

замените на код:

#mommenu .btn {
	padding: 0 !important;
	margin: 4px 10px !important;
}

Дальше уменьшаем блок с названием и ценой.

код:

.products-grid .item .item-inner .item-info {
		background: #66CDAA;
}

замените на код:

.products-grid .item .item-inner .item-info {
	background: #66CDAA;
	height: 39px !important;
}

значение  39 измените на нужно Вам и укажите, как расположить цену и название, чтобы они при данной высоте смотрелись корректно.




добавьте код:

#mommenu .btn i {
	font-size: 15px !important;
}
.product-name-new {
	width: 50%;
}

button.add-cart.button-new {
	font-size: 12px !important;
	width: 90px !important;
	height: 25px !important;
	line-height: 25px !important;
}

Слайдер у вас по ширине на всю страницу, как Вы хотите увеличить его?

[Александр86]

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

[Юля123]

Александр86 (22 Январь 2016 - 12:26) писал:

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

В main.css найдите код:

.product-name-new {
		width: 50%;
}

и замените на код:

.product-name-new {width: 40% !important;}

код:

.products-grid .item .item-inner:hover .item-info {background:#D6AD88;}

замените на код:

.products-grid .item .item-inner:hover .item-info {background:#66CDAA;}

добавьте код:

.products-grid .item .item-inner .product-name-new a {
	width: 100% !important;
}
p.special-price {
	width: 55%;
	float: right;
}

.products-grid .item .item-inner .price-box-new p.old-price {
	margin: 0 0 5px 0;
	width: 33%;
	display: inline;
}

.old-price .price {
	font-size: 12px !important;
}

По слайдеру, объясняю ситуацию, тот отступ по бокам, что есть у слайдера накладывается на всю страничку, если его убрать, то слайдер будет больше, но при этом растянуться и карточки товаров, ели Вас это страивает, то для мобильной версии добавьте код:

.container {
	padding: 0 !important;
}

[Александр86]

Спасибо, получилось только с товарами на главной странице,а как сделать на все остальные товары?

[Юля123]

Александр86 (24 Январь 2016 - 18:05) писал:

Спасибо, получилось только с товарами на главной странице,а как сделать на все остальные товары?

В main.css добавьте код:

.product-name {
	width: 40%;
	display: inline-block;
}

.price-box {
	width: 60% !important;
	float: right !important;
}

[Александр86]

Спасибо помогло)
Еще при изменениях в полной версии в мобильно немного спустился блок каталог, наезжает на телефон, возможно исправить?