Изменить Главную Страницу

Cybernetic (29 Февраль 2016 - 11:07) писал:

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

Добрый день.

Необходимо провести изменения как на картинке.

1) Корзину сдвинуть к верху  (отцентровать) к почте (на рисунке циферка 1)
2) Поиск на сайте визуально скорректировать как на рисунке и вместо искать написать поиск
3) между вертикальным меню сделать отступы как на рисунке (так же сделать и в футоре)

Cybernetic (04 Март 2016 - 12:46) писал:

Здравствуйте.
Изменения Вам произвели, проверьте.

Danil (04 Март 2016 - 15:15) писал:

Спасибо. В низу в футоре меню необходимо сделать так же как и на верху. Можно в низу в футоре отцентровать по середине, что бы при добавлении новых пунктов меню они шли как бы из середины. Например я одну вкладку меню сделаю а она по середине была бы.

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

Нужны изменения отображения элементов при разных разрешениях, а именно:

@media only screen and (max-width: 1024px)
- Скрытие блока "мы работаем с .."
- Отображение меню (картинками) в том виде  в котором он отображается при разрешении 1222x px т.е. все то же самое только с уменьшением пропорций.

@media all and (min-width: 990px)
- Удаление блока "мы работаем с .."
- Отображение меню (картинками) в том виде  в котором он отображается при разрешении 1222x px т.е. все то же самое только с уменьшением пропорций.
- Скрытие вертикального меню карусель

@media all and (min-width: 768px)
- Удаление блока "мы работаем с .."
- Скрытие баннера.
- Отображение меню (картинками) в том виде  в котором он отображается при разрешении 1222x px т.е. все то же самое только с уменьшением пропорций.
- Скрытие вертикального меню карусель

С строчек отвечающих за
@media screen and (max-width: 785px)
@media only screen and (max-width: 640px)
@media only screen and (min-width: 557px) and (max-width: 898px)
@media only screen and (min-width: 480px) and (max-width: 556px)
@media only screen and (min-width: 480px) and (max-width: 767px)
@media only screen and (max-width: 480px)
@media only screen and (max-width: 400px)
@media only screen and (max-width: 360px)  
Ко всем разрешениям применяется такие же настройки как и у @media all and (min-width: 768px)

PS: В картинках пытался визуализировать то что хотим

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

Если ответить затрудняетесь, можно по блокам разбить вопрос выше.

Cybernetic (05 Март 2016 - 12:20) писал:

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

1) В шаблоне main.css после строки:

@media only screen and (max-width: 1024px)

вставьте:

.header_top div .geocity {display:none;}

Для этого же блока, строки:

#header .links {
		clear: both;
		float: right;
		margin: 0 auto 20px;
		padding-right: 0;
}
#column-left + #content .prod_hold {
		margin: 0 3.5px 20px;
}

замените на:

#header .links {
		clear: both;
		float: left;
		margin: 0 auto 20px;
		padding-right: 0;
}
#header #search {width: 215px;}
#header #search input {width: 115px;}

#column-left + #content .prod_hold {
		margin: 0 3.5px 20px;zoom: 0.8;
}

2) В блоке:

@media only screen and (min-width: 768px) and (max-width: 980px) {

найдите строку:

#module_area{width: 40%;}

замените на:

#module_area{width: 40%;display:none;}

В конец шаблона добавьте:

@media only screen and (max-width: 768px) {
  #module_area{display:none;}
}

Проверьте, пожалуйста, первую часть изменений.
"Отображение меню (картинками) в том виде  в котором он отображается при разрешении 1222x px" - Вы имеете ввиду, отображать по 5 картинок в ряд?

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

"Отображение меню (картинками) в том виде  в котором он отображается при разрешении 1222x px" - Вы имеете ввиду, отображать по 5 картинок в ряд?
Ответ: Отображение по 5 картинок вряд.(рис)

Проверьте, пожалуйста, первую часть изменений.
Ответ Блок поиска должен быть на том же месте (как и на рис) 5 картинок в ряд.

Необходимо дальше делать изменения для других разрешений.

Cybernetic (09 Март 2016 - 05:33) писал:

Здравствуйте, в main.css найдите код:

@media only screen and (max-width: 1024px) {

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

.prod_hold {
	width: 16%;
}
img.goods-cat-image-medium {
	width: 120px;
}
.image.goods-cat-image-medium-square {
	width: 120px;
}
.prod_hold .name a, .prod_hold_recent .name a {
	font-size: 16px !important;
}

далее код:

#header .links {
				clear: both;
				float: left;
				margin: 0 auto 20px;
				padding-right: 0;
}
#header #search {width: 215px;}
#header #search input {width: 115px;}

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

#header .links {
				clear: both;
				float: right;
				margin: 0 auto 20px;
				padding-right: 0;
}
#header #search {width: 200px;}
#header #search input {width: 100px;}

Далее после кода:

@media screen and (max-width: 785px) {

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

.contacts {
	width: 45%;
	float: right;
}

Далее найдите код:

#column-left + #content {
		float: right;
		width: 970px;
}

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

#column-left + #content {
		float: right;
}

Цитата

может тогда установить минимальную ширину 768px, чтобы на мобильных устройствах отображалось так же как на такой ширине?

Юля123

Ваши инструкции выше применил.

может тогда установить минимальную ширину 768px, чтобы на мобильных устройствах отображалось так же как на такой ширине?
Ответ:Да, но необходимо при разрешении 768px что бы отображалось корректно. Сейчас вот так (рис)

Cybernetic (09 Март 2016 - 13:33) писал:

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

  #header .links {margin:0;}

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

#header .links {
	float: none;
	width: 40%;
	margin: 20px auto;
}

далее код:

  #header #search {margin:0 3px 0 0;
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#9BAAD3), to(#FFFFFF));
   background: -webkit-linear-gradient(top, #9BAAD3, #FFFFFF);
   background: -moz-linear-gradient(top, #9BAAD3, #FFFFFF);
   background: -ms-linear-gradient(top, #9BAAD3, #FFFFFF);
   background: -o-linear-gradient(top, #9BAAD3, #FFFFFF);
   background-image: -ms-linear-gradient(top, #9BAAD3 0%, #5066A2 100%);
   padding: 11.5px 23px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 15px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
	position:relative;clear:both;width:440px;margin-bottom: 19px;float: left;}

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

  #header #search {margin:0 3px 0 0;
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#9BAAD3), to(#FFFFFF));
   background: -webkit-linear-gradient(top, #9BAAD3, #FFFFFF);
   background: -moz-linear-gradient(top, #9BAAD3, #FFFFFF);
   background: -ms-linear-gradient(top, #9BAAD3, #FFFFFF);
   background: -o-linear-gradient(top, #9BAAD3, #FFFFFF);
   background-image: -ms-linear-gradient(top, #9BAAD3 0%, #5066A2 100%);
   padding: 11.5px 23px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 15px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
	position:relative;clear:both;width:440px;margin-bottom: 19px;f}

далее после кода:

@media only screen and (max-width: 768px) {

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

.prod_hold .name a, .prod_hold_recent .name a {
	font-size: 13px !important;
}

Проблемы с изображениями я у себя не наблюдаю, попробуйте почистить кеш.

далее в шаблоне HTML найдите код:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

<meta name="viewport" content="width=767" />

Юля123

Применил Все ваши настройки получилось как на левой картинке, а необходимо что бы было как на правой (рис)

Cybernetic (09 Март 2016 - 15:56) писал:

в main.css код:

#header #search {margin:0 3px 0 0;
border: 1px solid #0a3c59;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#9BAAD3), to(#FFFFFF));
background: -webkit-linear-gradient(top, #9BAAD3, #FFFFFF);
background: -moz-linear-gradient(top, #9BAAD3, #FFFFFF);
background: -ms-linear-gradient(top, #9BAAD3, #FFFFFF);
background: -o-linear-gradient(top, #9BAAD3, #FFFFFF);
background-image: -ms-linear-gradient(top, #9BAAD3 0%, #5066A2 100%);
padding: 11.5px 23px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #06426c;
font-size: 15px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
	 position:relative;clear:both;width:440px;margin-bottom: 19px;}

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

#header #search {
margin: 4px 3px 0 0;
border: 1px solid #0a3c59;
background: #3e779d;
background: -webkit-gradient(linear, left top, left bottom, from(#9BAAD3), to(#FFFFFF));
background: -webkit-linear-gradient(top, #9BAAD3, #FFFFFF);
background: -moz-linear-gradient(top, #9BAAD3, #FFFFFF);
background: -ms-linear-gradient(top, #9BAAD3, #FFFFFF);
background: -o-linear-gradient(top, #9BAAD3, #FFFFFF);
background-image: -ms-linear-gradient(top, #9BAAD3 0%, #5066A2 100%);
padding: 2.5px 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #06426c;
font-size: 15px;
font-family: helvetica, serif;
text-decoration: none;
vertical-align: middle;
position: relative;
width: 48%;
margin-bottom: 19px;
float: left;
}

далее код:

#header .links {
	 float: none;
	 width: 40%;
	 margin: 20px auto;
}

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

#header .links {
	 width: 40%;
}

далее код:

#header #search input {width:380px;}

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

#header #search input {
width: 155px;
}

укажите, пожалуйста, каким Вы браузером пользуетесь.

Здравствуйте.
Юля123
Применил Ваши инструкции, к сожалению ругается Вебмастер на мобильную адаптацию (слишком мелкий шрифт, рис) Можно это исправить и на всех разрешениях сделать текст не менее 12px?

Cybernetic (10 Март 2016 - 05:29) писал:

У Вас шрифта меньше 13px нет на сайте, возможно, робот  распознает шрифт, как более мелкий, из-за того, что на маленький экран мы пытаемся уместить большую страницу (уменьшение в 2 раза). Мы можем увеличить текст, то есть некоторые названия категорий в одно слово, которые не убираются в "плитку" категории и выходит за рамки, уточните, пожалуйста, что нужно сделать в таком случае.



Можно либо проигнорировать рекомендации Вебмастера, либо всё-таки сделать сайт более адаптивным (уменьшить количество "плиток в ряд", увеличить их ширину, и соответственно, увеличится и шрифт).

Юля123


Можно либо проигнорировать рекомендации Вебмастера, либо всё-таки сделать сайт более адаптивным (уменьшить количество "плиток в ряд", увеличить их ширину, и соответственно, увеличится и шрифт).

Ответ: Нужно послушать Яндекс и сделать сайт более адаптивным, для этого при мобильных разрешениях (380px если не ошибаюсь) сделать отображение на 3 плитики в ряд с шрифтом 12px.

Cybernetic (10 Март 2016 - 20:47) писал:

Тогда код:

<meta name="viewport" content="width=767" />

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

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

@media only screen and (max-width: 360px) {

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

.contacts {
	width: 100%;
	float: none;
}
.prod_hold .name a, .prod_hold_recent .name a {
	font-size: 16px !important;
}
#content .heading_title span {
	position: relative;
}
a.fbnp{position:relative !important}
#powered > .inner > div {
	float: none !important;
}

Добрый день.

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

Под мобильной адоптацией понимаю @media only screen and (min-width: 768px) и разрешения ниже.

Cybernetic (23 Март 2016 - 09:17) писал:

Здравствуйте, в шаблоне HTml найдите код:

	  <!-- Меняющиеся телефоны -->
		<div class="contacts">
	  <span class="geocity">Екатеринбург</span>
		  <div class="phone_number"></span><span class="number number1 ringo-ek">8(343)302-01-42</span></div>
	<span class="geocity">Челябинск</span>
		 <div class="phone_number"></span><span class="number"><div class="ringo-chel">8(351)240-09-90 </div>
  <div class="time ringo-del"><span>Бесплатный звонок по России</span>8-800-505-4001</div>
</span></div>
		<span class="geocity" style="background: none;color: #5979B4;">ПОЧТА: SANBM@mail.ru</span>

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

	  <!-- Меняющиеся телефоны -->
		<div class="contacts">
	  <span class="geocity">Екатеринбург</span>
		  <div class="phone_number"><a href="tel:83433020142"><span class="number number1 ringo-ek">8(343)302-01-42</span></a></div>
	<span class="geocity">Челябинск</span>
		 <div class="phone_number"><a href="tel:83512400990"><span class="number"><div class="ringo-chel">8(351)240-09-90 </div></span></a></div>
  <div class="time ringo-del"><span>Бесплатный звонок по России</span><a href="tel:88005054001">8-800-505-4001</a></div>
</span></div>
		<span class="geocity" style="background: none;color: #5979B4;">ПОЧТА: SANBM@mail.ru</span>

далее в конце main.css добавьте код:

.time a {
	color: #5979B4;
}

Юля123 после применения инструкции не корректно отображается корзина. подробнее на скриншоте.

2 скриншота в низу
- отображение на мобильной версии
- отображение при разрешении 1366px

PS: при тапах(нажатии) на телефон все происходит правильно.