Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

1

Как Изменить Положение Телефона, Верхнего Меню И Удалить "поиск" И Кнопки.соц Сетей?

Автор Scou, 09 сент. 2015 22:42

Вперед

Авторизуйтесь для ответа в теме

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

#1 Scou

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

Пользователи
62 сообщений

Отправлено 09 Сентябрь 2015 - 22:42

Добрый день! Подскажите, пожалуйста, как:

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

2) переместить верхнее меню - главная|доставка... на линию ниже, под номер телефона(желательно по нижнему бортику как на изображении) и убрать тогда ту пустующую белую линию совсем?

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

Наверх

#2 Андрей Кольченко

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

Пользователи
19 сообщений

ГородСанкт-Петербург

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

+1

Наверх

#3 Scou

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

Пользователи
62 сообщений

Отправлено 16 Сентябрь 2015 - 17:44

Кто-нибудь может все-таки помочь с этим вопросом или же это не возможно?

Наверх

#4 Cupuyc

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

Пользователи
747 сообщений

Отправлено 16 Сентябрь 2015 - 18:59

Scou (09 Сентябрь 2015 - 22:42) писал:

Добрый день! Подскажите, пожалуйста, как:

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

2) переместить верхнее меню - главная|доставка... на линию ниже, под номер телефона(желательно по нижнему бортику как на изображении) и убрать тогда ту пустующую белую линию совсем?

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

			  <div class="header-right-inner">
				<ul class="connect-us">
				  <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>
				</ul>
				<form id="search_mini_form" 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>

Замените его на:

			  <div class="header-right-inner">
				<ul class="contact-us-now">
				   {% 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 %}
				  <li><a href="#" class="fa fa-facebook">Время работы с 10:00 до 20:00</a></li>
				</ul>			   
			  </div>

В админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:

#header-top {height: 41px;line-height: 36px;border-top: 5px solid #3cabda;position: relative;}

Замените его на:

#header-top {
	display: none;
	height: 41px;
	line-height: 36px;
	border-top: 5px solid #3cabda;
	position: relative;
}

Наверх

#5 Scou

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

Пользователи
62 сообщений

Отправлено 16 Сентябрь 2015 - 20:11

Cupuyc (16 Сентябрь 2015 - 18:59) писал:

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

			 <div class="header-right-inner">
			 <ul class="connect-us">
				 <li><a href="#" class="fa fa-facebook"></a></li>
				 <li><a href="#" class="fa fa-twitter"></a></li>
				 <li><a href="#" class="fa fa-youtube"></a></li>
				 <li><a href="#" class="fa fa-vk"></a></li>
			 </ul>
			 <form id="search_mini_form" 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>

Замените его на:

			 <div class="header-right-inner">
			 <ul class="contact-us-now">
				 {% 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 %}
				 <li><a href="#" class="fa fa-facebook">Время работы с 10:00 до 20:00</a></li>
			 </ul>			
			 </div>

В админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:

#header-top {height: 41px;line-height: 36px;border-top: 5px solid #3cabda;position: relative;}

Замените его на:

#header-top {
display: none;
height: 41px;
line-height: 36px;
border-top: 5px solid #3cabda;
position: relative;
}

Я наверное делаю что-то не то, но вместо того, чтобы верхнее меню сместилось(главная,доставка, корзина...), оно вообще исчезло и у телефона появились ненужные кружки и значок фейсбука.

Можно лучше по другому немного сделать тогда - оставить все как есть и убрать только кнопки с соц.сетями и поиском и заместо них чтобы можно было вставить картинку на то место?

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

Наверх

#6 Danil

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

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

Отправлено 18 Сентябрь 2015 - 15:22

Scou (16 Сентябрь 2015 - 20:11) писал:

Я наверное делаю что-то не то, но вместо того, чтобы верхнее меню сместилось(главная,доставка, корзина...), оно вообще исчезло и у телефона появились ненужные кружки и значок фейсбука.

Можно лучше по другому немного сделать тогда - оставить все как есть и убрать только кнопки с соц.сетями и поиском и заместо них чтобы можно было вставить картинку на то место?

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

ul.contact-us-now {
	display: none;
}

В шаблоне html найдите код

<ul class="connect-us">
				  <li><a href="#" class="fa fa-facebook"></a></li>
				  <li><a href="#" class="fa fa-twitter"></a></li>
				  <li><a href="#" class="fa fa-youtube"></a></li>
				  <li><a href="#" class="fa fa-vk"></a></li>
				</ul>
				<form id="search_mini_form" 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>

и замените на

<img src="{ASSETS_IMAGES_PATH}Название изображения">

Наверх

#7 Scou

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

Пользователи
62 сообщений

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

Danil (18 Сентябрь 2015 - 15:22) писал:

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

ul.contact-us-now {
display: none;
}

В шаблоне html найдите код

<ul class="connect-us">
				 <li><a href="#" class="fa fa-facebook"></a></li>
				 <li><a href="#" class="fa fa-twitter"></a></li>
				 <li><a href="#" class="fa fa-youtube"></a></li>
				 <li><a href="#" class="fa fa-vk"></a></li>
			 </ul>
			 <form id="search_mini_form" 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>

и замените на

<img src="{ASSETS_IMAGES_PATH}Название изображения">

Спасибо, теперь правда другая проблема - не отображается изображение. Сохранял в формате .png, разрешение делал такое же как у лого, пробовал даже поменьше

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

Наверх

#8 Vaccina

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

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

Отправлено 19 Сентябрь 2015 - 02:54

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

<img src="{ASSETS_IMAGES_PATH}telefon">

замените на:

<img src="{ASSETS_IMAGES_PATH}telefon.png" alt="" />

Наверх

#9 Scou

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

Пользователи
62 сообщений

Отправлено 19 Сентябрь 2015 - 03:39

Vaccina (19 Сентябрь 2015 - 02:54) писал:

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

<img src="{ASSETS_IMAGES_PATH}telefon">

замените на:

<img src="{ASSETS_IMAGES_PATH}telefon.png" alt="" />

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

Наверх

#10 Vaccina

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

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

Отправлено 19 Сентябрь 2015 - 06:04

В main.css после:

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

пропишите:

#header .header-right .header-right-inner {
	display: none;
}

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

#header-top .topheader-left {width: 36px;height: 36px;position: relative;border-right: 1px solid #e9e9e9;border-left: 1px solid #e9e9e9;}
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}
#header-top .topheader-left ul.contact-us-now {position: absolute;top: 35px;left: -1px;width: 200px;border: 1px solid #e9e9e9;background: #FFF;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-top .topheader-left:hover ul.contact-us-now {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-top .topheader-left ul.contact-us-now li {display: block;margin: 0 10px;border-top: 1px solid #e9e9e9;float: none;}
#header-top .topheader-left ul.contact-us-now li:first-child {border-top: none;margin-left: 10px;}
#header-top .topheader-right {width: 80%;float: right;}

замените на:

#header-top .topheader-left {width: 70%;height: 36px;position: relative;border-right: 1px solid #e9e9e9;border-left: 1px solid #e9e9e9;}
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}
#header-top .topheader-left ul.contact-us-now li {display: inline-block;margin: 0 10px;border-top: 1px solid #e9e9e9;float: none;}
#header-top .topheader-left ul.contact-us-now li:first-child {border-top: none;margin-left: 10px;}
#header-top .topheader-right {width: 30%;float: right;}

Наверх

#11 Scou

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

Пользователи
62 сообщений

Отправлено 19 Сентябрь 2015 - 06:51

Vaccina (19 Сентябрь 2015 - 06:04) писал:

В main.css после:

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

пропишите:

#header .header-right .header-right-inner {
display: none;
}

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

#header-top .topheader-left {width: 36px;height: 36px;position: relative;border-right: 1px solid #e9e9e9;border-left: 1px solid #e9e9e9;}
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}
#header-top .topheader-left ul.contact-us-now {position: absolute;top: 35px;left: -1px;width: 200px;border: 1px solid #e9e9e9;background: #FFF;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
#header-top .topheader-left:hover ul.contact-us-now {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#header-top .topheader-left ul.contact-us-now li {display: block;margin: 0 10px;border-top: 1px solid #e9e9e9;float: none;}
#header-top .topheader-left ul.contact-us-now li:first-child {border-top: none;margin-left: 10px;}
#header-top .topheader-right {width: 80%;float: right;}

замените на:

#header-top .topheader-left {width: 70%;height: 36px;position: relative;border-right: 1px solid #e9e9e9;border-left: 1px solid #e9e9e9;}
#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}
#header-top .topheader-left ul.contact-us-now li {display: inline-block;margin: 0 10px;border-top: 1px solid #e9e9e9;float: none;}
#header-top .topheader-left ul.contact-us-now li:first-child {border-top: none;margin-left: 10px;}
#header-top .topheader-right {width: 30%;float: right;}

Большое спасибо, все получилось! А можно еще как-нибудь сделать этот номер кликабельным на мобильных устройствах как раньше?

Наверх

#12 Vaccina

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

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

Отправлено 19 Сентябрь 2015 - 07:08

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

#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}

замените на:

#header-top .topheader-left:before {width:40px;font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}

Наверх

#13 Scou

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

Пользователи
62 сообщений

Отправлено 19 Сентябрь 2015 - 07:48

Vaccina (19 Сентябрь 2015 - 07:08) писал:

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

#header-top .topheader-left:before {font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}

замените на:

#header-top .topheader-left:before {width:40px;font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}

К сожалению, на телефоне по прежнему не кликабелен номер.

Наверх

#14 RayLi

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

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

Отправлено 19 Сентябрь 2015 - 10:10

Scou (19 Сентябрь 2015 - 07:48) писал:

К сожалению, на телефоне по прежнему не кликабелен номер.

Здравствуйте.
На данный момент номер телефона на вашем сайте как в шапке, так и в подвале является кликабельным.
Возможно вы просто не очистили кэш браузера, что советуем вам сделать, чтобы увидеть полученные результаты или же откройте ваш сайт в любом ином интернет-браузере.
Проверьте, пожалуйста.

Наверх

#15 Scou

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

Пользователи
62 сообщений

Отправлено 19 Сентябрь 2015 - 19:39

RayLi (19 Сентябрь 2015 - 10:10) писал:

Здравствуйте.
На данный момент номер телефона на вашем сайте как в шапке, так и в подвале является кликабельным.
Возможно вы просто не очистили кэш браузера, что советуем вам сделать, чтобы увидеть полученные результаты или же откройте ваш сайт в любом ином интернет-браузере.
Проверьте, пожалуйста.

На компьютере то и на планшете все изначально работало, в телефоне почистил кэш, но все равно как ссылка он не работает. И не только у меня.

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

Наверх

#16 Scou

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

Пользователи
62 сообщений

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

Кто-нибудь может все-таки помочь по этому вопросу, почему телефон с мобильного не нажимается? Вот домен, если что - http://xiaomi-you.ru . Вот аккаунт - SL-356373

Наверх

#17 Vaccina

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

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

Отправлено 24 Сентябрь 2015 - 03:50

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

Наверх

#18 Scou

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

Пользователи
62 сообщений

Отправлено 29 Сентябрь 2015 - 22:14

Vaccina (24 Сентябрь 2015 - 03:50) писал:

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

Да, пробовал на разных телефонах - результат один. Проблема точно не в кеше.

Наверх

#19 Vaccina

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

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

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

Попробуйте следующее, в main.css найдите и удалите:

#header-top .topheader-left:before {width:40px;font-family: FontAwesome;width: 100%;height: 100%;cursor: pointer;content: "\f0c0";position: absolute;font-size: 16px;left: 8px;top: 0px;}