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


Добавить Меню

Автор Teraweb, 02 сент. 2016 14:20

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

#1 Teraweb

Teraweb

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

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

Отправлено 02 Сентябрь 2016 - 14:20

Подскажите как добавить меню на верх как на скриншоте над баннером? Оно должно быть на всех страницах. Помогите пожалуйста Аккаунт SL-388439

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

  • 321.png

#2 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 02 Сентябрь 2016 - 15:03

Просмотр сообщенияTeraweb (02 Сентябрь 2016 - 14:20) писал:

Подскажите как добавить меню на верх как на скриншоте над баннером? Оно должно быть на всех страницах. Помогите пожалуйста Аккаунт SL-388439

Здравствуйте.
Уточните, пожалуйста, Вам необходимо добавить новое горизонтальное меню или перенести то, что расположено внизу страницы: Главная, Доставка...

#3 Teraweb

Teraweb

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

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

Отправлено 02 Сентябрь 2016 - 16:04

Новое горизонтальное, что бы выборки были из настроек верхнего меню в админке.

#4 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 02 Сентябрь 2016 - 16:22

Просмотр сообщенияTeraweb (02 Сентябрь 2016 - 16:04) писал:

Новое горизонтальное, что бы выборки были из настроек верхнего меню в админке.

Создал Вам бэкап. В шаблоне HTML после кода:
	<!-- Основная часть -->
	<div id="main">

Добавил код:
	  <div id="top-block">
		<div class="top">
		  <div class="container">
			<div class="row">
			  <div class="col-xs-12">
				<ul class="links">
				  {% FOR menu %}
					{% FOR header %}
					  {% FOR links %}
						<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					  {% ENDFOR %}
					{% ENDFOR %}
				  {% ENDFOR %}
				</ul>
			  </div>
			</div>
		  </div>
		</div>
	  </div>

В конце main.css добавил Вам код:
/*** Верхнее меню ***/
#top-block {color: #808080;border-color: #343434;background-color: #272727;border-left: 1px solid #343434;}
#top-block.fixed {display: inline-block;position: absolute;width: 100%;bottom: 0;left: 0;padding-left: 250px;}
#top-block .top {padding: 0;text-align: center;}
#top-block .links {margin-bottom: 0px;}
#top-block .links li {display: inline-block;margin: 10px 15px;}
#top-block .links li a {color: #808080;line-height: 22px;}
#top-block .links li a:hover {color: #1c8a71;}

Проверьте, пожалуйста.

#5 Teraweb

Teraweb

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

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

Отправлено 02 Сентябрь 2016 - 16:31

Ну просто гранд респект. Единственное сделать шрифт белым и жирным. Поможете?

Сообщение отредактировал Teraweb: 02 Сентябрь 2016 - 20:08

#6 Vaccina

Vaccina

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

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

Отправлено 03 Сентябрь 2016 - 01:53

Утоните пожалуйста, ваш вопрос более не актуален, так как у верхнего меню уже присутствует белый цвет шрифта?

#7 Teraweb

Teraweb

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

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

Отправлено 03 Сентябрь 2016 - 21:56

С цветом разобрался. Как сделать жирным?

#8 Danil

Danil

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

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

Отправлено 04 Сентябрь 2016 - 09:45

Просмотр сообщенияTeraweb (03 Сентябрь 2016 - 21:56) писал:

С цветом разобрался. Как сделать жирным?
Здравствуйте.
#top-block .links li a {color: #FFFFFF;line-height: 22px;}
и замените на 

#top-block .links li a {color: #FFFFFF;line-height: 22px;font-weight: 900;}

#9 Teraweb

Teraweb

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

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

Отправлено 06 Сентябрь 2016 - 03:02

Просмотр сообщенияDanil (04 Сентябрь 2016 - 09:45) писал:

Здравствуйте.
#top-block .links li a {color: #FFFFFF;line-height: 22px;}
и замените на

#top-block .links li a {color: #FFFFFF;line-height: 22px;font-weight: 900;}
Спасибо

#10 bronko

bronko

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

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

Отправлено 13 Октябрь 2017 - 17:46

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

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

  • Untitled-1.png

#11 Vaccina

Vaccina

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

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

Отправлено 14 Октябрь 2017 - 08:38

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Основная часть -->
		<div id="main">
        
после него пропишите:
<div id="top-block">
				<div class="top">
				  <div class="container">
						<div class="row">
						  <div class="col-xs-12">
								<ul class="links">
								  {% FOR menu %}
										{% FOR footer %}
										  {% FOR links %}
												<li><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>
										  {% ENDFOR %}
										{% ENDFOR %}
								  {% ENDFOR %}
								</ul>
						  </div>
						</div>
				  </div>
				</div>
		  </div>
          
далее найдите и удалите:
<div class="contact col-md-6 col-xs-12">
				<h4 class="title">Контакты</h4>
				{% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p><i class="fa fa-phone">&nbsp;</i> <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></p>{% ENDIF %}
				{% IF SETTINGS_STORE_WORK_TIME %}<p><i class="fa fa-clock-o">&nbsp;</i> {SETTINGS_STORE_WORK_TIME}</p>{% ENDIF %}
				{% IF SETTINGS_STORE_REGION %}<p><i class="fa fa-map-marker">&nbsp;</i>{SETTINGS_STORE_REGION}</p>{% ENDIF %}
				{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p><i class="fa fa-phone">&nbsp;</i>Телефон: <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></p>{% ENDIF %}
				{% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p><i class="fa fa-fax">&nbsp;</i>Телефон: <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></p>{% ENDIF %}
				{% IF SETTINGS_STORE_EMAIL_MAIN %}<p><i class="fa fa-envelope">&nbsp;</i>Email: <a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></p>{% ENDIF %}
				{% IF SETTINGS_STORE_SKYPE %}<p><i class="fa fa-skype">&nbsp;</i>Skype: <a href="skype:{SETTINGS_STORE_SKYPE}?call">{SETTINGS_STORE_SKYPE}</a></p>{% ENDIF %}
			  </div>
              
              
далее найдите:
<!-- Меню -->
		  <div class="block-menu">
			<i class="fa fa-home"></i>
			<ul class="links">
			  {% FOR menu %}
				{% FOR header %}
				  {% FOR links %}
					<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				  {% ENDFOR %}
				{% ENDFOR %}
			  {% ENDFOR %}
			</ul>
		  </div>
		  <!-- Меню пользователя -->
          
перед ним вставьте:
<div class="contact">
				{% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p><i class="fa fa-phone">&nbsp;</i> <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></p>{% ENDIF %}
				{% IF SETTINGS_STORE_WORK_TIME %}<p><i class="fa fa-clock-o">&nbsp;</i> {SETTINGS_STORE_WORK_TIME}</p>{% ENDIF %}
				{% IF SETTINGS_STORE_REGION %}<p><i class="fa fa-map-marker">&nbsp;</i>{SETTINGS_STORE_REGION}</p>{% ENDIF %}
				{% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p><i class="fa fa-phone">&nbsp;</i>Телефон: <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></p>{% ENDIF %}
				{% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p><i class="fa fa-fax">&nbsp;</i>Телефон: <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></p>{% ENDIF %}
				{% IF SETTINGS_STORE_EMAIL_MAIN %}<p><i class="fa fa-envelope">&nbsp;</i>Email: <a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></p>{% ENDIF %}
				{% IF SETTINGS_STORE_SKYPE %}<p><i class="fa fa-skype">&nbsp;</i>Skype: <a href="skype:{SETTINGS_STORE_SKYPE}?call">{SETTINGS_STORE_SKYPE}</a></p>{% ENDIF %}
				<p><i class="fa fa-envelope">&nbsp;</i><a href="{FEEDBACK_URL}">Напишите нам</a></p>
			  </div>
          

          
далее зайдите в main.css - найдите:
/* Логотип */
#header .header-container .logo {margin-bottom: 20px;}

перед ним пропишите:
/*** Верхнее меню ***/
#top-block {color: #808080;border-color: #343434;background-color: #272727;border-left: 1px solid #343434;position: fixed;width: calc(100% - 250px);top: 0;left: 250px;z-index: 10;border-bottom: 2px solid #F1F2F4;}
#top-block .top {padding: 0;text-align: center;}
#top-block .links {margin-bottom: 0px;}
#top-block .links li {display: inline-block;margin: 10px 15px;}
#top-block .links li a {color: #808080;line-height: 22px;}
#top-block .links li a:hover {color: #1c8a71;}


далее найдите:
#footer .footer-top {padding: 30px 0;text-align: center;}

замените на:
#footer .footer-top {display: none;padding: 30px 0;text-align: center;}

далее найдите:
/* Меню */
.block-menu {display: inline-block;position: relative;}

перед ним пропишите:
/* Контакты */
.contact, .contact a {color: #fff;}

#12 bronko

bronko

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

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

Отправлено 15 Октябрь 2017 - 18:24

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

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

  • Untitled-2.png

#13 RayLi

RayLi

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

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

Отправлено 15 Октябрь 2017 - 20:58

Просмотр сообщенияbronko (15 Октябрь 2017 - 18:24) писал:

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

Здравствуйте.
В данном случае, попробуйте, пожалуйста, в шаблоне html найти следующий код:

			  <div class="callback col-md-6 col-xs-12">
				<h4 class="title">Обратный звонок</h4>
				<form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}"/>
				  <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
				  {ANTISPAM_CODE}
				  <div class="callback-input">
					<i class="fa fa-user"></i>
					<input id="callback_person" class="inputText callback_person required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Ваше имя" maxlength="50" title="Представьтесь, пожалуйста" autocomplete="off">
				  </div>
				  <div class="callback-input">
					<i class="fa fa-phone"></i>
					<input id="callback_phone" class="inputText callback_phone required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Номер телефона" maxlength="50" title="Введите номер телефона" autocomplete="off">
				  </div>
				  <button type="submit" title="Отправить" class="button button2">Отправить</button>
				</form>
				<!-- Соц. сети -->
				<h4 class="title">Мы в социальных сетях</h4>
				<div class="social-links">
				  <a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a>
				  <a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a>
				  <a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a>
				  <a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a>
				  <a class="instagram fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>instagram</span></a>
				</div>
			  </div>
			</div>
		  </div>
		</div>
		<div class="footer-bottom">

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

			  <div class="callback col-md-6 col-xs-12">
				<h4 class="title">Обратный звонок</h4>
				<form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data">
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}"/>
				  <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
				  {ANTISPAM_CODE}
				  <div class="callback-input">
					<i class="fa fa-user"></i>
					<input id="callback_person" class="inputText callback_person required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Ваше имя" maxlength="50" title="Представьтесь, пожалуйста" autocomplete="off">
				  </div>
				  <div class="callback-input">
					<i class="fa fa-phone"></i>
					<input id="callback_phone" class="inputText callback_phone required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Номер телефона" maxlength="50" title="Введите номер телефона" autocomplete="off">
				  </div>
				  <button type="submit" title="Отправить" class="button button2">Отправить</button>
				</form>
			  </div>
				<!-- Соц. сети -->
				<h4 class="title">Мы в социальных сетях</h4>
				<div class="social-links">
				  <a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a>
				  <a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a>
				  <a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a>
				  <a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a>
				  <a class="instagram fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>instagram</span></a>
				</div>
			</div>
		  </div>
		</div>
		<div class="footer-bottom">

#14 bronko

bronko

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

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

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

Блок социальных сетей переместил, спасибо.
А на первую часть вопроса все еще жду ответ:

Просмотр сообщенияbronko (15 Октябрь 2017 - 18:24) писал:

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

#15 Vaccina

Vaccina

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

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

Отправлено 17 Октябрь 2017 - 07:37

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/* Контакты */
.contact, .contact a {color: #fff;}

замените на:
/* Контакты */
.contact{text-align:left;}
.contact, .contact a {color: #fff;}

#16 bronko

bronko

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

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

Отправлено 18 Октябрь 2017 - 16:15

Здравствуйте.
После внесенных изменений с переносом нижнего меню наверх мобильная версия совсем перекосилась.
Нужно поправить, чтобы все было красиво. Сейчас вот так, как на фото:

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

  • Screenshot_20.jpg

#17 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 18 Октябрь 2017 - 16:27

Просмотр сообщенияbronko (18 Октябрь 2017 - 16:15) писал:

Здравствуйте.
После внесенных изменений с переносом нижнего меню наверх мобильная версия совсем перекосилась.
Нужно поправить, чтобы все было красиво. Сейчас вот так, как на фото:
Здравствуйте, найдите в файле main.css
@media all and (max-width: 767px) {

после вставьте
#top-block {
	display: none !important;
}

Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Инфинити
  5. → Изменение общей стилистики
  6. Privacy Policy