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



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

#1 leo-ji

leo-ji

    Новичок

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

Отправлено 27 Ноябрь 2017 - 21:32

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

Помогите, пожалуйста, поменять месторасположение элементов в шапке сайта.
Скрин с подробностями во вложении.
По пунктам:
1. Переместить Лого вверх
2. Пункты меню из сендвича расположить горизонтально
3. Сместить вправо телефон и мыло
4. Поиск, вход в ЛК и корзину опустить ниже (под телефон и мыло)
5. Увеличить белое поле, так чтобы влезли все элементы (см. скрин)
6. Главное меню поднять выше и сместить влево
7. Сделать более узким блок, который остается всегда видимым при скроле

Жду обратной связи
Спасибо

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

  • Скрин правки шапка Т+.png


#2 RayLi

RayLi

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

  • Модераторы
  • 2 862 сообщений

Отправлено 05 Декабрь 2017 - 18:49

Просмотр сообщенияleo-ji (27 Ноябрь 2017 - 21:32) писал:

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

Помогите, пожалуйста, поменять месторасположение элементов в шапке сайта.
Скрин с подробностями во вложении.
По пунктам:
1. Переместить Лого вверх
2. Пункты меню из сендвича расположить горизонтально
3. Сместить вправо телефон и мыло
4. Поиск, вход в ЛК и корзину опустить ниже (под телефон и мыло)
5. Увеличить белое поле, так чтобы влезли все элементы (см. скрин)
6. Главное меню поднять выше и сместить влево
7. Сделать более узким блок, который остается всегда видимым при скроле

Жду обратной связи
Спасибо

Здравствуйте.
К сожалению на данный момент Ваш сайт заблокирован за неуплату.
Просьба пополнить его баланс и сообщить об этом нам, после чего мы сможем Вам помочь с доработками.
Спасибо.

#3 leo-ji

leo-ji

    Новичок

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

Отправлено 05 Декабрь 2017 - 19:55

Мне нужно сделать несколько не значительных правок. Подскажите, пожалуйста, как реализовать.

1. В верхнем меню, при наведении на какой-либо пункт, выпадает окно с подкатегориями, но оно не кликабельно (т.е. при наведении на выпадающее окно, оно исчезает)
Выпадающее окно нужно сделать "кликабельным". (см. скрин)
2. Скрыть на Главной странице сайта блок Новости.
3. В блоке "Приемущества компании" заменить цвет иконки до наведения с белого на другой (см. скрин)
4. В категории товаров нужно увеличить расстояние между изображение товара и ценой. (см. скрин). Цель - нужно, чтобы название товара было полностью видно.

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

  • выпадающее окно скрин.png


#4 RayLi

RayLi

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

  • Модераторы
  • 2 862 сообщений

Отправлено 05 Декабрь 2017 - 20:38

Просмотр сообщенияleo-ji (05 Декабрь 2017 - 19:55) писал:

Мне нужно сделать несколько не значительных правок. Подскажите, пожалуйста, как реализовать.

1. В верхнем меню, при наведении на какой-либо пункт, выпадает окно с подкатегориями, но оно не кликабельно (т.е. при наведении на выпадающее окно, оно исчезает)
Выпадающее окно нужно сделать "кликабельным". (см. скрин)
2. Скрыть на Главной странице сайта блок Новости.
3. В блоке "Приемущества компании" заменить цвет иконки до наведения с белого на другой (см. скрин)
4. В категории товаров нужно увеличить расстояние между изображение товара и ценой. (см. скрин). Цель - нужно, чтобы название товара было полностью видно.

1) К сожалению подобной проблемы на Вашем сайте мы не наблюдаем.
Просьба уточнить, где конкретно на Вашем сайте наблюдается данная проблема?

2) В шаблоне main.css найдите, пожалуйста, данный код:

#footer-top {
	background-color: #fcfcfc;
	position: relative;
	padding: 20px 0;
	border-top: 1px solid #dddddd;
}

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

#footer-top {
	background-color: #fcfcfc;
	position: relative;
	padding: 20px 0;
	border-top: 1px solid #dddddd;
	display: none;
}


4) Далее в том же шаблоне найдите, пожалуйста, следующий код:

.products-grid .item .item-info .product-name a {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.3px;
	line-height: 20px;
	text-transform: capitalize;
	display: block;
	height: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

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

.products-grid .item .item-info .product-name a {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.3px;
	line-height: 20px;
	text-transform: capitalize;
	display: block;
	height: 60px;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
}


#5 leo-ji

leo-ji

    Новичок

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

Отправлено 06 Декабрь 2017 - 14:46

Изменения внес, спасибо.
По 1ому пункту ссылка на видео, там видно в чем проблема. https://yadi.sk/i/V19CFuT33QNF2a
3ий пункт с прошлого сообщения остался без внимания.

Так же, подскажите, как выровнять верхнее меню, телефон и емэил по правому краю. Эта строка сползает, в зависимости от пунктов в меню. (скрин приложил)
И уменьшить размер шрифта верхнего меню.

Жду обратной связи

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

  • 1512559046265.png


#6 Vaccina

Vaccina

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

  • Модераторы
  • 23 894 сообщений

Отправлено 07 Декабрь 2017 - 06:29

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

1. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;width:100%;left: 0;background: #ffffff;z-index: 999;padding: 0px 20px 10px;overflow-y: hidden;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}

замените на:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;width:100%;left: 0;background: #ffffff;z-index: 999;padding: 0px 20px 10px;overflow-y: hidden;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;top: 40px;}

3.Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#block-info .block-item .icon {display: inline-block;float: left;position: relative;width: 80px;height: 38px;background-color: rgba(0,0,0,0);margin: 23px 0;border-left: solid 1px #dddddd;border-right: solid 1px #dddddd;text-align: center;padding: 0;}
#block-info .block-item .icon:before, #block-info .block-item .icon:after {content: "";position: absolute;z-index: 1;width: 58px;height: 56.57px;-webkit-transform: scaleY(0.5774) rotate(-45deg);-ms-transform: scaleY(0.5774) rotate(-45deg);transform: scaleY(0.5774) rotate(-45deg);background-color: inherit;left: 10px;}
#block-info .block-item .icon:before {top: -28.2843px;border-top: solid 1.5px #dddddd;border-right: solid 1.5px #dddddd;}
#block-info .block-item .icon:after {bottom: -28.2843px;border-bottom: solid 1.5px #dddddd;border-left: solid 1.5px #dddddd;}
#block-info .block-item .icon span {position: relative;width: 69px;height: 34.41px;display: block;margin: 2px 4.5px;border-left: solid 0px #dddddd;border-right: solid 0px #dddddd;}


замените на:
#block-info .block-item .icon {background:#528D90;display: inline-block;float: left;position: relative;width: 80px;height: 38px;margin: 23px 0;border-left: solid 1px #dddddd;border-right: solid 1px #dddddd;text-align: center;padding: 0;}
#block-info .block-item .icon:before, #block-info .block-item .icon:after {content: "";position: absolute;z-index: 1;width: 58px;height: 56.57px;-webkit-transform: scaleY(0.5774) rotate(-45deg);-ms-transform: scaleY(0.5774) rotate(-45deg);transform: scaleY(0.5774) rotate(-45deg);background-color: #528D90;left: 10px;}
#block-info .block-item .icon:before {top: -28.2843px;border-top: solid 1.5px #dddddd;border-right: solid 1.5px #dddddd;}
#block-info .block-item .icon:after {bottom: -28.2843px;border-bottom: solid 1.5px #dddddd;border-left: solid 1.5px #dddddd;}
#block-info .block-item .icon span {position: relative;width: 69px;height: 34.41px;display: block;margin: 2px 4.5px;border-left: solid 0px #dddddd;border-right: solid 0px #dddddd;}

----
В main.css найдите:
.header-top .block-menu .block-menu-links li {display: block;background: none;text-align: left;margin: 5px 6px;float:left;}

замените на:
.header-top .block-menu .block-menu-links li {display: block;background: none;text-align: left;margin: 5px 6px;float:left;font-size: 12px;}


#7 leo-ji

leo-ji

    Новичок

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

Отправлено 07 Декабрь 2017 - 13:24

Спасибо. Но так и не получил ответа на один из вопросов. Опишу подробнее.

Нужно зафиксировать телефон и емэил (сверху), и выровнять их по правому краю. Чтобы они были на одном уровне с поиском, Входом в ЛК и корзиной, как это показано на скрине 1512641851229.png

На данный момент шапка находится в таком состоянии 1512641912712 съехало.png

Жду обратной связи

#8 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 12 Декабрь 2017 - 17:02

Просмотр сообщенияleo-ji (07 Декабрь 2017 - 13:24) писал:

Спасибо. Но так и не получил ответа на один из вопросов. Опишу подробнее.

Нужно зафиксировать телефон и емэил (сверху), и выровнять их по правому краю. Чтобы они были на одном уровне с поиском, Входом в ЛК и корзиной, как это показано на скрине Прикрепленный файл 1512641851229.png

На данный момент шапка находится в таком состоянии Прикрепленный файл 1512641912712 съехало.png

Жду обратной связи
Здравствуйте. В шаблоне HTML найдите код
<!-- Телефон в шапке -->
и замените его на
<div class="leftParts">
			  <!-- Телефон в шапке -->
Затем найдите
<!-- Поиск -->
			  <div class="form-search">
				<div class="search-title rhombus">
				  <i class="fa fa-search" title="Поиск по магазину">&nbsp;</i>
				</div>
				<form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
				  <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину...">
				  <input type="hidden" name="goods_search_field_id" value="0">
				  <button type="submit" title="Искать" class="button search-submit"><i class="fa fa-search"></i></button>
				</form>
			  </div>
			 
и замените его на
<!-- Поиск -->
			  <div class="form-search">
				<div class="search-title rhombus">
				  <i class="fa fa-search" title="Поиск по магазину">&nbsp;</i>
				</div>
				<form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
				  <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину...">
				  <input type="hidden" name="goods_search_field_id" value="0">
				  <button type="submit" title="Искать" class="button search-submit"><i class="fa fa-search"></i></button>
				</form>
			  </div>
			  </div>
Далее найдите код
<!-- Корзина -->
и замените его на
<div class="clear"></div>
<!-- Корзина -->
После этого в конец файла main.css добавьте
.leftParts {
	float: right;
}
 .block-cart{padding: 0 0 0 7px;}
Далее найдите
.header-top .block-phone {position: relative;display: inline-block;float: left;}
и замените его на
.header-top .block-phone {position: relative;display: inline-block;float: right;}
Затем найдите код





Темы с аналогичным тегами Шапка сайта, лето шаб, переместить элементы, сдвинуть лого, переделать меню, увеличить хедер

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

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