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


Изменения В Шапке На Главной

перенести поискперенести тел

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

#1 Sergey1988

Sergey1988

    Пользователь

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

Отправлено 23 Август 2018 - 10:09

Добрый день. Помогите плиз доработать дизайн шапки. В прикрепленном рисунке все понятно разрисовал по пунктам.
  • Переместить телефон к логотипу.

  • Поиск расположить за телефоном.

  • Верхнее меню закинуть вправо,если не влезет,то в правый угол,как на рисунке

  • Значки корзины и сравнения поднять выше и изменить цвет на серый к примеру.

  • Выплывающее меню "ВК" уничтожить)

  • Баннер сделать уже и тоньше

  • Каталог перенести в освободившееся место в столбик(и как бы его рамочкой оформить)))

  • Сделать меньше
в изображении попытался отобразить,как все должно получиться- Scrin 2.png
Спасибо заранее!!!

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

  • Scrin.png


#2 stasia

stasia

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

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

Отправлено 24 Август 2018 - 11:30

Просмотр сообщенияSergey1988 (23 Август 2018 - 10:09) писал:

Добрый день. Помогите плиз доработать дизайн шапки. В прикрепленном рисунке все понятно разрисовал по пунктам.
  • Переместить телефон к логотипу.

  • Поиск расположить за телефоном.

  • Верхнее меню закинуть вправо,если не влезет,то в правый угол,как на рисунке

  • Значки корзины и сравнения поднять выше и изменить цвет на серый к примеру.

  • Выплывающее меню "ВК" уничтожить)

  • Баннер сделать уже и тоньше

  • Каталог перенести в освободившееся место в столбик(и как бы его рамочкой оформить)))

  • Сделать меньше
в изображении попытался отобразить,как все должно получиться- Прикрепленный файл Scrin 2.png
Спасибо заранее!!!


Здравствуйте.
Зайдите в шаблон HTML и найдите данный код:

<div class="topheader-left col-md-5 col-sms-9 col-smb-6">
			<ul class="contact-us-now">
			  {% IF SETTINGS_STORE_EMAIL_MAIN %}<li class="c-email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="c-phone"><label>Телефон</label>: <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></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></li>{% ENDIF %}
			</ul>
		  </div>

Скопируйте его и удалите.

Найдите:

			<div class="header-right col-sm-8 col-xs-12">

И вставьте сразу после этой строчки ранее скопированный текст.


Найдите:

			  <div class="topheader-left col-md-5 col-sms-9 col-smb-6">
			<ul class="contact-us-now">
			  {% IF SETTINGS_STORE_EMAIL_MAIN %}<li class="c-email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="c-phone"><label>Телефон</label>: <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></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></li>{% ENDIF %}
			  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></li>{% ENDIF %}
			</ul>
		  </div>

И вставте сразу после данный код:


				  <form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
				  <div class="form-search">
					<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину...">
					<input type="hidden" name="goods_search_field_id" value="0">
					<button type="submit" title="Искать" class="button search-submit"></button>
				  </div>
				</form>


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

	<!-- Виджет сообществ -->
	<div id="community_widget_right">
	  <div class="community-widget">
		<span class="community-widget-button"><i class="fa fa-vk"></i></span>
		<div class="community-widget-content">
		  <!-- VK Widget. Замените id(20003922) на id Вашей группы -->
		  <div id="vk_groups"></div>
		  <script type="text/javascript">
		  VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '666666', color3: '#3cabda'}, 20003922);
		  </script>
		</div>
	  </div>
	</div>

И удалите его.

#3 Sergey1988

Sergey1988

    Пользователь

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

Отправлено 24 Август 2018 - 15:53

Просмотр сообщенияstasia (24 Август 2018 - 11:30) писал:

Здравствуйте.
Зайдите в шаблон HTML и найдите данный код:

<div class="topheader-left col-md-5 col-sms-9 col-smb-6">
<ul class="contact-us-now">
{% IF SETTINGS_STORE_EMAIL_MAIN %}<li class="c-email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></li>{% ENDIF %}
{% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="c-phone"><label>Телефон</label>: <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></li>{% ENDIF %}
{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></li>{% ENDIF %}
{% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></li>{% ENDIF %}
</ul>
</div>

Скопируйте его и удалите.

Найдите:

 <div class="header-right col-sm-8 col-xs-12">

И вставьте сразу после этой строчки ранее скопированный текст.


Найдите:

<div class="topheader-left col-md-5 col-sms-9 col-smb-6">
<ul class="contact-us-now">
{% IF SETTINGS_STORE_EMAIL_MAIN %}<li class="c-email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></li>{% ENDIF %}
{% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="c-phone"><label>Телефон</label>: <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></li>{% ENDIF %}
{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></li>{% ENDIF %}
{% IF SETTINGS_STORE_PHONE_NUMBER3 %}<li class="c-phone hide"><label>Телефон</label>: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></li>{% ENDIF %}
</ul>
</div>

И вставте сразу после данный код:


<form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
<div class="form-search">
<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину...">
<input type="hidden" name="goods_search_field_id" value="0">
<button type="submit" title="Искать" class="button search-submit"></button>
</div>
</form>


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

<!-- Виджет сообществ -->
<div id="community_widget_right">
<div class="community-widget">
<span class="community-widget-button"><i class="fa fa-vk"></i></span>
<div class="community-widget-content">
<!-- VK Widget. Замените id(20003922) на id Вашей группы -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '666666', color3: '#3cabda'}, 20003922);
</script>
</div>
</div>
</div>

И удалите его.


Сделал все так,кроме контакта и вот что получилось :mellow:Scrin 3.png

#4 stasia

stasia

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

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

Отправлено 24 Август 2018 - 18:04

Просмотр сообщенияSergey1988 (24 Август 2018 - 15:53) писал:

Сделал все так,кроме контакта и вот что получилось :mellow:Прикрепленный файл Scrin 3.png


1. Зайдите в шаблон HTML и найдите строки с 84 по 90:

<form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
<div class="form-search">
<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину...">
<input type="hidden" name="goods_search_field_id" value="0">
<button type="submit" title="Искать" class="button search-submit"></button>
</div>
</form>

И удалите их.


2. Зайдите в шаблон main.css и найдите данный код:

#menu .nav-right {
	text-align: right;
	float: right;
	margin-top: 14px;
}

И замените на:

#menu .nav-right {
	text-align: right;
	float: right;
	margin-top: -26px;
}


3. Найдите код:

input.inputText {
	padding: 0px 10px;
	color: #c8c8c8;
	background-color: #fff;
	border: 1px solid #ccc;
	display: inline-block;
	vertical-align: middle;
	height: 30px;
	line-height: 20px;
	width: 240px;
	max-width: 350px;
}

И его замените на:

input.inputText {
	padding: 0px 10px;
	color: #c8c8c8;
	background-color: #fff;
	border: 1px solid #ccc;
	display: inline-block;
	vertical-align: middle;
	height: 30px;
	line-height: 20px;
	width: 240px;
	max-width: 350px;
	margin-top: 6px;
}


4. Найдите код:

#header-top .topheader-right .sns-quickaccess {
	float: left;
}

И замените на:

#header-top .topheader-right .sns-quickaccess {
	float: right;
}

5. В самый конец шаблона main.css добавьте код:

.contact-us-now {
	line-height: 14px !important;
}

#logo img {
	margin-top: 3px;
}


#5 Sergey1988

Sergey1988

    Пользователь

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

Отправлено 25 Август 2018 - 05:19

Просмотр сообщенияstasia (24 Август 2018 - 18:04) писал:

1. Зайдите в шаблон HTML и найдите строки с 84 по 90:

<form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
<div class="form-search">
<input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину...">
<input type="hidden" name="goods_search_field_id" value="0">
<button type="submit" title="Искать" class="button search-submit"></button>
</div>
</form>

И удалите их.


2. Зайдите в шаблон main.css и найдите данный код:

#menu .nav-right {
text-align: right;
float: right;
margin-top: 14px;
}

И замените на:

#menu .nav-right {
text-align: right;
float: right;
margin-top: -26px;
}


3. Найдите код:

input.inputText {
padding: 0px 10px;
color: #c8c8c8;
background-color: #fff;
border: 1px solid #ccc;
display: inline-block;
vertical-align: middle;
height: 30px;
line-height: 20px;
width: 240px;
max-width: 350px;
}

И его замените на:

input.inputText {
padding: 0px 10px;
color: #c8c8c8;
background-color: #fff;
border: 1px solid #ccc;
display: inline-block;
vertical-align: middle;
height: 30px;
line-height: 20px;
width: 240px;
max-width: 350px;
margin-top: 6px;
}


4. Найдите код:

#header-top .topheader-right .sns-quickaccess {
float: left;
}

И замените на:

#header-top .topheader-right .sns-quickaccess {
float: right;
}

5. В самый конец шаблона main.css добавьте код:

.contact-us-now {
line-height: 14px !important;
}

#logo img {
margin-top: 3px;
}


вот что получилось в этот раз,уже ближе малость)))Scrin 4.png
а должно такScrin 2.png

#6 Sergey1988

Sergey1988

    Пользователь

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

Отправлено 25 Август 2018 - 10:04

:mellow:

#7 Sergey1988

Sergey1988

    Пользователь

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

Отправлено 26 Август 2018 - 07:28

Просмотр сообщенияSergey1988 (25 Август 2018 - 05:19) писал:

вот что получилось в этот раз,уже ближе малость)))Прикрепленный файл Scrin 4.png
а должно такПрикрепленный файл Scrin 2.png

Хотя бы помогите цвет корзины поменять,ее не видно на белом фоне :unsure:

#8 RayLi

RayLi

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

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

Отправлено 26 Август 2018 - 09:38

Просмотр сообщенияSergey1988 (26 Август 2018 - 07:28) писал:

Хотя бы помогите цвет корзины поменять,ее не видно на белом фоне :unsure:

Здравствуйте.
На данный момент иконка корзины на Вашем сайте уже изменена, в связи с чем просим Вас уточнить, Ваш вопрос всё ещё актуален?

#9 Sergey1988

Sergey1988

    Пользователь

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

Отправлено 26 Август 2018 - 10:20

Просмотр сообщенияRayLi (26 Август 2018 - 09:38) писал:

Здравствуйте.
На данный момент иконка корзины на Вашем сайте уже изменена, в связи с чем просим Вас уточнить, Ваш вопрос всё ещё актуален?
Добрый день, с иконкой справился с горем пополам, подскажите,как менять размер баннера

#10 Sergey1988

Sergey1988

    Пользователь

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

Отправлено 26 Август 2018 - 10:38

Просмотр сообщенияRayLi (26 Август 2018 - 09:38) писал:

Здравствуйте.
На данный момент иконка корзины на Вашем сайте уже изменена, в связи с чем просим Вас уточнить, Ваш вопрос всё ещё актуален?
И не могли бы вы подсказать,как перенести строку поиска левее?

#11 stasia

stasia

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

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

Отправлено 27 Август 2018 - 09:27

Здравствуйте. Зайдите в шаблон main.css и найдите данный код:

#header .header-right .header-right-inner {
	float: right;
}

И замените его на:


#header .header-right .header-right-inner {
	float: right;
	margin-right: 25px;
}





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

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