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


Исправления На Главной

Автор Silver, 29 нояб. 2015 20:10
шрифт размер и цвет шрифта

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

#41 n.rimsky

n.rimsky

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

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

Отправлено 13 Март 2016 - 19:09

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

Внести несколько изменений на сайте для разрешения 980px и выше  :

0)  Удалить вертикальную линию (из хэдера) разделяющую горизонтальное меню (о нас, монтаж и т.д.) с верхним блоком логотипа и объектов на главной (картинка и телефоны)
1) Поднятие поиска на сайте к логотипу (как показано на рисунке). Написание внтури поиска чёрным шрифтом "Поиск товаров на сайте"
2) Изменение отображения горизонтального меню (о нас, монтаж и т.д.) так же как и на рисунке.(на счет цвета заливки не замарачивайтесь подберу сам главное реализуйте принцип при наведении смены цвета)
3) Подогнать блок контактов по высоте и ширине в плотную к вышеописанным блокам (как на рис)
4) Добавть блок в котором будет изображение по высоте и ширине соответсвующее пропорциям на картинке (возможно использовать то же изображение которое сейчас есть)

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

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

  • header.jpg

#42 Ирина345

Ирина345

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

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

Отправлено 17 Март 2016 - 10:07

Просмотр сообщенияn.rimsky (13 Март 2016 - 19:09) писал:

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

Внести несколько изменений на сайте для разрешения 980px и выше  :

0)  Удалить вертикальную линию (из хэдера) разделяющую горизонтальное меню (о нас, монтаж и т.д.) с верхним блоком логотипа и объектов на главной (картинка и телефоны)
1) Поднятие поиска на сайте к логотипу (как показано на рисунке). Написание внтури поиска чёрным шрифтом "Поиск товаров на сайте"
2) Изменение отображения горизонтального меню (о нас, монтаж и т.д.) так же как и на рисунке.(на счет цвета заливки не замарачивайтесь подберу сам главное реализуйте принцип при наведении смены цвета)
3) Подогнать блок контактов по высоте и ширине в плотную к вышеописанным блокам (как на рис)
4) Добавть блок в котором будет изображение по высоте и ширине соответсвующее пропорциям на картинке (возможно использовать то же изображение которое сейчас есть)

Прекрасно понимаю что работ много и прошу Вас разбить ответ на этапы (что бы вам легче было). Так же отдаю себе отчет в том что при изменениях будет потеряна адаптивность элементов, мы это поправим позже.
Здравствуйте,
0,3. в конец main.css добавьте
@media all and (min-width: 980px) {
#header-top {border-top:none;}
#header .header-right {
display: block;
float: left;
margin-left: -35px;
}
}

1. Найдите в шаблоне HTML
  <div id="header" class="wrap">
						 <div class="container">
								 <div class="row">
										 <!-- Logo -->
										 <div id="logo" class="col-sm-2 col-xs-12">
												 <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">
														 <img src="{ASSETS_IMAGES_PATH}logo2.jpg" alt="{SETTINGS_STORE_NAME}">
												 </a>
										 </div>
										 <!-- END: Logo -->
										 <!-- Logo -->
										 <div id="logo" class="col-sm-7 col-xs-12">
												 <a href="#">
														 <img src="{ASSETS_IMAGES_PATH}122.jpg" width="300" height="111" alt="">
												 </a>
										 </div>
										 <!-- END: Logo -->
									  <div class="header-right col-sm-3 col-xs-12">
<div class="header-right-inner">
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
<strong>Наш телефон:</strong>
8(343)379-83-83
<strong>Мы находимся:</strong>
г. Екатеринбург, Фрунзе 35а, литер Ш<br />
<span dir="rtl">
<strong>Наша почта</strong>: zakaz@airmoll.ru
</span>
</div>
</div>
</div>
								 </div>
						 </div>
				 </div>
		  <!-- /END Основная часть Шапки -->
		   <!-- Верхняя часть Шапки -->
		  <div id="header-top" class="wrap">
				<div class="container">
						<div class="topheader-left col-md-8 col-sms-9 col-smb-6">
						  <form id="search_mini_form" action="http://{NET_DOMAIN}/search" 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>
						<div class="topheader-right col-md-4 col-sms-3 col-smb-6">
						  <div class="inner">
								<div class="sns-quickaccess">
								  <div class="quickaccess-inner">
										<span class="welcome">Добро пожаловать!</span>
										<ul class="links">
										  {% FOR menu %}
												{% FOR header %}
												  {% FOR links %}
														<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%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>
		  </div>
замените на

  <div id="header" class="wrap">
						 <div class="container">
								 <div class="row">
										 <!-- Logo -->
										 <div id="logo" class="col-sm-2 col-xs-12">
												 <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/">
														 <img src="{ASSETS_IMAGES_PATH}logo2.jpg" alt="{SETTINGS_STORE_NAME}">
												 </a>
										 </div>
										 <!-- END: Logo -->
										 <!-- Logo -->
										 <div id="logo" class="col-sm-8 col-xs-12">
												 <a href="#">
														 <img src="{ASSETS_IMAGES_PATH}122.jpg" width="300" height="111" alt="">
												 </a>
												  <div id="header-top" class="wrap">
				<div class="container">
						<div class="topheader-left col-md-5 col-sms-9 col-smb-6">
						  <form id="search_mini_form" action="http://{NET_DOMAIN}/search" 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>
						<div class="topheader-right col-md-7 col-sms-3 col-smb-6">
						  <div class="inner">
								<div class="sns-quickaccess">
								  <div class="quickaccess-inner">
										<span class="welcome">Добро пожаловать!</span>
										<ul class="links">
										  {% FOR menu %}
												{% FOR header %}
												  {% FOR links %}
														<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%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>
		  </div>
										 </div>
										 <!-- END: Logo -->
									  <div class="header-right col-sm-2 col-xs-12">
<div class="header-right-inner">
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;">
<strong>Наш телефон:</strong>
8(343)379-83-83
<strong>Мы находимся:</strong>
г. Екатеринбург, Фрунзе 35а, литер Ш<br />
<span dir="rtl">
<strong>Наша почта</strong>: zakaz@airmoll.ru
</span>
</div>
</div>
</div>
								 </div>
						 </div>
				 </div>
в конец main.css добавьте
#header-top .conteiner {width:auto;}
#logo.col-sm-8.col-xs-12 img {
width: 100%;
}

2 найдите в файле main.css
#header-top .topheader-right .sns-quickaccess ul.links li {background: url("{ASSETS_IMAGES_PATH}separator.gif") no-repeat right center;padding: 8px 8px;display: block;line-height:20px;float:left;}
#header-top .topheader-right .sns-quickaccess ul.links li:first-child {padding-left: 0px;}
#header-top .topheader-right .sns-quickaccess ul.links li:last-child {background:none;padding-right: 0px;}

замените на
#header-top .topheader-right .sns-quickaccess ul.links li {border: 1px solid #000;padding: 8px 8px;display: block;line-height:20px;float:left;}
#header-top .topheader-right .sns-quickaccess ul.links li:first-child {}
#header-top .topheader-right .sns-quickaccess ul.links li:last-child {background:none;}
#header-top .topheader-right .sns-quickaccess ul.links li:hover {
background: #1A8CAE;
color: #FFFFFF;
}
#header-top .topheader-right .sns-quickaccess ul.links li a:hover {
color: #fff;
background: #1A8CAE;
}

#43 n.rimsky

n.rimsky

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

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

Отправлено 10 Май 2016 - 20:30

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

Необходимо исправления на баннере:
1. Пролистывание баннера стрелочками (баннер брал отсюда http://flexslider.woothemes.com)

2. Изменить вертикальный раскрывающийся список с "+" (при клике список открывается, подробнее на рис) на ">"

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

  • 2.jpg

#44 Firefly

Firefly

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

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

Отправлено 10 Май 2016 - 20:56

Просмотр сообщенияn.rimsky (10 Май 2016 - 20:30) писал:

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

Необходимо исправления на баннере:
1. Пролистывание баннера стрелочками (баннер брал отсюда http://flexslider.woothemes.com)

2. Изменить вертикальный раскрывающийся список с "+" (при клике список открывается, подробнее на рис) на ">"

Здравствуйте.
1. Вам необходимо загрузить отсутствующие шрифты для слайдера в редакторе шаблонов. Загрузил их Вам в архиве в приложение к сообщению.
2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.block-menu-content ul li .open-sub:before {content: "\f067";font-family: 'FontAwesome';font-size: 14px;float:right;}
.block-menu-content ul li.active .open-sub.active:before {content: "\f068";color: #3cabda;}

Замените на:
.block-menu-content ul li .open-sub:before {content: "\f054";font-family: 'FontAwesome';font-size: 14px;float:right;}
.block-menu-content ul li.active .open-sub.active:before {content: "\f078";color: #3cabda;}

Прикрепленные файлы

  • Прикрепленный файл  fonts.zip   4,61К   66 Количество загрузок:

#45 n.rimsky

n.rimsky

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

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

Отправлено 10 Май 2016 - 22:13

Firefly ваще всё слетело после установки шрифтов и вашего кода.

Слетело - значит - картинки все со слайдера пропали ни чего не изменилось. кнопок нет.
Сейчас забэкапил всё обратно

#46 Vaccina

Vaccina

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

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

Отправлено 12 Май 2016 - 01:41

1. В flexslider.css найдите:
.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
  content: '\f002';
}

замените на:
.flex-direction-nav a:before {
  font-family: 'FontAwesome';
  font-size: 40px;
  display: inline-block;
  content: '\f060';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  line-height: 40px;
}
.flex-direction-nav a.flex-next:before {
  content: '\f061';
}

2. В main.css найдите:
.block-menu-content ul li .open-sub:before {
	content: "\f067";
	font-family: 'FontAwesome';
	font-size: 14px;
	float: right;
}

замените на:
.block-menu-content ul li .open-sub::before {
	content: "\f063";
	font-family: 'FontAwesome';
	font-size: 14px;
	float: right;
}

далее найдите:
.block-menu-content ul li.active .open-sub.active:before {
	content: "\f068";
	color: #3cabda;
}

замените на:
.block-menu-content ul li.active .open-sub.active:before {
	content: "\f062";
	color: #3cabda;
}

#47 Наталья11111

Наталья11111

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

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

Отправлено 18 Июнь 2016 - 20:12

Добрый вечер!

Аккаунт SL-388852

Помогите сделать следующие изменения:

1. Убрать из верхнего меню значок корзины и сравнения.
2. Нужна дополнительная строчка в верхнем меню, а то все не вмещается.
3. Убрать из шапки поиск и значки соцсетей.

Промоблок под слайдером хотелось бы тоже переделать:

4. Картинки  увеличить, сделать прямоугольными, чтобы умещались в линию по 4 штуки на небольшом расстоянии друг от друга.
Всего должно получится 12 картинок расположенных в 3 ряда.

5. Можно ли сделать неподвижную плашку внизу страницы. Я хотела там разместить телефоны горячей линии  и ссылку на заказ звонка.

Заранее благодарю Вас

#48 Firefly

Firefly

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

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

Отправлено 19 Июнь 2016 - 09:55

Просмотр сообщенияНаталья11111 (18 Июнь 2016 - 20:12) писал:

Добрый вечер!

Аккаунт SL-388852

Помогите сделать следующие изменения:

1. Убрать из верхнего меню значок корзины и сравнения.
2. Нужна дополнительная строчка в верхнем меню, а то все не вмещается.
3. Убрать из шапки поиск и значки соцсетей.

Промоблок под слайдером хотелось бы тоже переделать:

4. Картинки  увеличить, сделать прямоугольными, чтобы умещались в линию по 4 штуки на небольшом расстоянии друг от друга.
Всего должно получится 12 картинок расположенных в 3 ряда.

5. Можно ли сделать неподвижную плашку внизу страницы. Я хотела там разместить телефоны горячей линии  и ссылку на заказ звонка.

Заранее благодарю Вас

Здравствуйте.
Создал Вам бэкап и произвел изменения по 4 пунктам.
По поводу 12 картинок промоблока: Вам нужно будет найти и загрузить в редакторе шаблонов новые иконки, затем прислать в новом сообщении их названия в том порядке, котором они должны размещаться.

По 5 вопросу пришлите, пожалуйста, скриншот того, как это должно выглядеть, либо ссылку на страницу сайта, где это уже реализовано (желательно указать место размещения на том же скриншоте).

#49 SAWO

SAWO

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

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

Отправлено 13 Февраль 2018 - 17:44

Здравствуйте. подскажите пожалуйста, как в верхнем меню увеличить и выделить шрифт? Как там-же  шрифт "каталог" выделить красным цветом?

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

  • Безымянный.jpg

#50 Vaccina

Vaccina

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

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

Отправлено 14 Февраль 2018 - 07:28

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.quickaccess-inner ul li a {
		color: #585050;
}

замените на:
.quickaccess-inner ul li a {color: #585050;font-weight: bold;font-size:14px;}
.quickaccess-inner ul li:first-child a {color: #F74444;}

Обратно в Главная


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

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

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