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


Изменить Оформление Шапки, Верхнего Меню И Слайдера


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

#1 НатальяЯ

НатальяЯ

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

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

Отправлено 04 Август 2016 - 16:11

Добрый день! Помоги, пожалуйста, внести изменения в оформление шапки, верхнего меню и слайдера.
1. Перенести Меню на самый верх, поменять цвет на красный. Ну и по тексту и расположению пунктов данного меню в каких строках можно внести изменения?
2. Разместить свой логотип с ссылкой на главную страницу.
3. Убрать "Поиск" и Значок корзины (ну или видоизменить их) тоже в каких строках можно?
4. Удалить.
5. Слайдер опустить под шапку, и по ширине выровнять с шапкой (при этом чтобы вниз он не опускался, т.е. высота его станет меньше) и куда загружать картинки для слайдов?

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

  • Изменения в оформлении.jpg


#2 Danil

Danil

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

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

Отправлено 04 Август 2016 - 17:20

Просмотр сообщенияНатальяЯ (04 Август 2016 - 16:11) писал:

Добрый день! Помоги, пожалуйста, внести изменения в оформление шапки, верхнего меню и слайдера.
1. Перенести Меню на самый верх, поменять цвет на красный. Ну и по тексту и расположению пунктов данного меню в каких строках можно внести изменения?
2. Разместить свой логотип с ссылкой на главную страницу.
3. Убрать "Поиск" и Значок корзины (ну или видоизменить их) тоже в каких строках можно?
4. Удалить.
5. Слайдер опустить под шапку, и по ширине выровнять с шапкой (при этом чтобы вниз он не опускался, т.е. высота его станет меньше) и куда загружать картинки для слайдов?
Здравствуйте.
1) В style.css найдите код
.nav-container {background: #228B22;margin-bottom: 0px;position: relative;display: block;float: left;bottom: 0;width: 100%;margin-top: 230px;}
и замените на
.nav-container {background: #228B22;margin-bottom: 0px;position: relative;display: block;float: left;bottom: 0;width: 100%;}
2) В style.css найдите код
.logo {margin-top: 0;text-align: center;width: 270px;float: left;display: none;padding: 20px;background: none repeat scroll 0 0 #000;}
и замените на
.logo {margin-top: 0;text-align: center;width: 270px;float: left;padding: 20px;background: none repeat scroll 0 0 #000;}
Так же найдите
#header .container {background: url('{ASSETS_IMAGES_PATH}header-bg.png');height: 139px; }
и замените на
#header .container {background: url('{ASSETS_IMAGES_PATH}header-bg.png');}
3) Для начала опустим корзину и поиск(чтобы посмотреть как они будут отображаться на фоне остальных изменений), а после Вы напишите как лучше сделать, изменить значки или удалить совсем.
В style.css найдите  
#search {width: 300px;position:absolute;top:40px;right: 100px;z-index: 100;}
и замените на
#search {width: 300px;position:absolute;top:55px;right: 100px;z-index: 100;}
Найдите
.shopping_cart_block {position: absolute;right: 20px;top: 40px;z-index: 10;}
и замените на
.shopping_cart_block {position: absolute;right: 20px;top: 55px;z-index: 10;}
4) В шаблоне html найдите и удалите код
		  <div class="contacts">
			{% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_SKYPE || SETTINGS_STORE_ICQ %}
			  <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам">  
				<b>Контакты:</b><br />
				<!-- Первый контактный телефон -->
				{% IF SETTINGS_STORE_PHONE_NUMBER1 %}
				  {SETTINGS_STORE_PHONE_COUNTRY_CODE1}
				  {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE1})</span>{% ENDIF %}
				  {SETTINGS_STORE_PHONE_NUMBER1}<br />
				{% ENDIF %}
				
				<!-- Второй контактный телефон -->
				{% IF SETTINGS_STORE_PHONE_NUMBER2 %}
				  {SETTINGS_STORE_PHONE_COUNTRY_CODE1}
				  {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE2})</span>{% ENDIF %}
				  {SETTINGS_STORE_PHONE_NUMBER2}<br />
				{% ENDIF %}
						  
				<!-- Третий контактный телефон -->
				{% IF SETTINGS_STORE_PHONE_NUMBER3 %}
				  {SETTINGS_STORE_PHONE_COUNTRY_CODE3}
				  {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}<span class="phone_code">({SETTINGS_STORE_PHONE_CITY_CODE3})</span>{% ENDIF %}
				  {SETTINGS_STORE_PHONE_NUMBER3}
				{% ENDIF %}
						
				<!-- Skype номер -->
				{% IF SETTINGS_STORE_SKYPE %}
				  <div class="contentTableHeadMainSkype">
					<a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype">
					  <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" />
					  <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span>
					</a>
				  </div>
				{% ENDIF %}
					   
				<!-- ICQ номер -->
				{% IF SETTINGS_STORE_ICQ %}
				  <div class="contentTableHeadMainIcq">
					<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
					<span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
				  </div>
				{% ENDIF %}
			  </div>
			{% ENDIF %}
			
			<!-- Время работы магазина -->
			{% IF SETTINGS_STORE_WORK_TIME %}
			  <div class="time">
				<b>Время работы:</b><br />
				<span class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}">
				  {SETTINGS_STORE_WORK_TIME}
				</span>
			  </div>
			{% ENDIF %}
			<div class="clear"></div>
		  </div>
5) В style.css найдите код
.home #header{height: auto;text-align: left;position: absolute;background: none;z-index: 1000;left: 50%;margin-left: -600px;}
и замените на
.home #header{height: auto;text-align: left;background: none;z-index: 1000;}
Так же найдите и удалите несколько блоков с кодом
  .home #header {margin-left: -480px;}
  .home #header {margin-left: -384px;}
  .home #header {margin-left: -220px;}
  .home #header {margin-left: -150px;}


#3 НатальяЯ

НатальяЯ

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

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

Отправлено 05 Август 2016 - 15:29

Огромное спасибо за быстрый и подробный ответ. Но некоторые вопросы у меня все же остались:
1. Меню встало на место, а вот цвет его не изменился: хотелось бы поменять его с зеленого на красный и уменьшить высоту на 3 мм (уж простите, не знаю, сколько это в пикселях :rolleyes: ). А также поменять надписи "Главная", "доставка" и пр. на свои.
2. По логотипу разобралась, но вокруг него образовался черный фон - хотелось бы его убрать или сделать прозрачным (белый тоже потом уберу, это уже мой). И как сделать его не плавающим, т.е. чтобы он был прикреплен к шапке, а не перемещался по странице (это на второй картинке видно)?! И с шапкой тоже какая-то беда стряслась: рисунок как-то съехал...
3. Поиск по магазину никуда не переместился. Подскажите, как закрепить его над каталогом? И он тоже почему-то видоизменяется: сначала у него черный фон, потом белый... Можно его (фон этот) как-то вообще убрать? И как еще красную стрелку заменить на значок лупы? И поменять надпись с "Поиска по магазину" на "Поиск по каталогу"?
4. Со слайдами тоже беда какая-то: они стали еще бОльшую площадь занимать... я красной рамочкой выделила область, где они должны размещаться.

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

  • 2 Изменения в оформлении (с.1).jpg
  • 2 Изменения в оформлении (с.2).jpg


#4 Stasya

Stasya

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

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

Отправлено 08 Август 2016 - 11:06

Просмотр сообщенияНатальяЯ (05 Август 2016 - 15:29) писал:

Огромное спасибо за быстрый и подробный ответ. Но некоторые вопросы у меня все же остались:
1. Меню встало на место, а вот цвет его не изменился: хотелось бы поменять его с зеленого на красный и уменьшить высоту на 3 мм (уж простите, не знаю, сколько это в пикселях :rolleyes: ). А также поменять надписи "Главная", "доставка" и пр. на свои.
2. По логотипу разобралась, но вокруг него образовался черный фон - хотелось бы его убрать или сделать прозрачным (белый тоже потом уберу, это уже мой). И как сделать его не плавающим, т.е. чтобы он был прикреплен к шапке, а не перемещался по странице (это на второй картинке видно)?! И с шапкой тоже какая-то беда стряслась: рисунок как-то съехал...
3. Поиск по магазину никуда не переместился. Подскажите, как закрепить его над каталогом? И он тоже почему-то видоизменяется: сначала у него черный фон, потом белый... Можно его (фон этот) как-то вообще убрать? И как еще красную стрелку заменить на значок лупы? И поменять надпись с "Поиска по магазину" на "Поиск по каталогу"?
4. Со слайдами тоже беда какая-то: они стали еще бОльшую площадь занимать... я красной рамочкой выделила область, где они должны размещаться.

1) Изменить пункты меню Вы можете в разделе Сайт-> Меню. Там Вы сможете добавить свои пукнты меню и удалить существующие. Если Вам необходимо создать пункты, которые будут вести на какие-то новые текстовые страницы, то Вам необходимо сначала создать данные страницы в разделе Сайт-> Страницы и после этого добавить пункты, указав ссылку на эти страницы.

Чтобы изменить цвет меню с зеленного на красный, Вам необходимо в файле style.css найти блок
.nav-container {
background: #228B22;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
width: 100%;
}
и заменить его на
.nav-container {
background: #ff0000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
width: 100%;
}
Далее чтобы уменьшить высоту меню Вам необходимо там же найти блок
a.image-link, a:hover.image-link {
display: block;
background: url('http://meitan59.storeland.net/icon_home.png?design=movement') 17px 16px no-repeat;
width: 53px;
height: 49px;
padding: 0;
margin: 0;
}
и заменить его на
a.image-link, a:hover.image-link {
display: block;
background: url('http://meitan59.storeland.net/icon_home.png?design=movement') 17px 12px no-repeat;
width: 53px;
height: 40px;
padding: 0;
margin: 0;
}
и блок
.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover {
display: inline-block;
line-height: 1.3em;
text-decoration: none;
position: relative;
color: #FFF;
padding: 0 12px;
margin: 0;
text-decoration: none;
font: 12px Calibri;
text-transform: uppercase;
line-height: 49px;
}
заменить на
.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover {
display: inline-block;
line-height: 1.3em;
text-decoration: none;
position: relative;
color: #FFF;
padding: 0 12px;
margin: 0;
text-decoration: none;
font: 12px Calibri;
text-transform: uppercase;
line-height: 40px;
}

2) В том же самом файле найдите блок
.logo {
margin-top: 0;
text-align: center;
width: 270px;
float: left;
padding: 20px;
background: none repeat scroll 0 0 #000;
}
и замените его на
.logo {
margin-top: 0;
text-align: center;
width: 270px;
float: left;
padding: 20px;
}

Заметила у Вас не корректное отображение всплывающей фиксированной шапки - она не исчезает если подняться в самый верх сайта. Если это так не задуманно то Вам необходимо в файле main.js найти блок
if ($(window).scrollTop() > offset.top)
$('#header_bar').fadeIn();
else if ($(window).scrollTop() < offset.top)
$('#header_bar').fadeOut();
и заменить его на
if ($(window).scrollTop() > offset.top)
$('#header_bar').fadeIn();
else
$('#header_bar').fadeOut();

Чтобы убрать логотип из всплывабщей шапки Вам необходимо в шаблоне HTML найти блок
<div id="header_bar" class="header_bar">
	 <div class="container">
		 <div class="logo">
		 <a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=movement" alt="" title="" class="scale-with-grid"></a>		
		 </div>
и заменить его на
<div id="header_bar" class="header_bar">

Что касаемо картинки, не совсем Вас поняла. Прошу уточните, пожалуйста, в чем именно проблема.

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

#5 НатальяЯ

НатальяЯ

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

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

Отправлено 09 Август 2016 - 13:24

Просмотр сообщенияStasya (08 Август 2016 - 11:06) писал:

Что касаемо картинки, не совсем Вас поняла. Прошу уточните, пожалуйста, в чем именно проблема.

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

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

#6 НатальяЯ

НатальяЯ

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

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

Отправлено 10 Август 2016 - 16:42

Пока дожидалась ответа, кое с чем удалось разобраться самостоятельно. Но вот в некоторых вопросах видимо все же нужна помощь. На сегодня задачи стоят следующие:
1. Красную строку верхнего меню хотелось бы растянуть на всю ширину страницы.
2. Значок корзины перенести на красную строку и немного приподнять значок "Домик".
3. Не могу поправить картинку шапки: рисунок сбился по высоте.
4. Где можно поменять цвет фона всех страниц на светло-серый?
5. Нужно уменьшить размер слайдов (выровнять по ширине шапки, пропорционально).
5.1.Убрать серую полоску (я ее перечеркнула на скрине)
5.2. Убрать значки смены, паузы и ожидания загрузки слайдов (если можно, заменить их на такие вот кружочки, как на рисунке).
5.3. Сменить стиль смены слайдов.
6. Меню Каталог переместить вправо, поменять цвет рамки и шрифта на красный.
6.1. Над Каталогом поставить "Поиск по каталогу" (черный цвет фона поменять).  
Очень жду помощи!!!

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

  • 3 Изменения в оформлении (с.1).jpg
  • 3 Изменения в оформлении (с.2).jpg


#7 Vaccina

Vaccina

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

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

Отправлено 11 Август 2016 - 03:58

В style.css найдите:
#header .container {background: url('{ASSETS_IMAGES_PATH}header-bg.png');}

замените на:
#header .container {
	background: url('{ASSETS_IMAGES_PATH}header-bg.png') no-repeat bottom center;
	width: 100%;
	background-size: contain;
}

далее найдите:
a.image-link, a:hover.image-link{display: block;background: url('{ASSETS_IMAGES_PATH}icon_home.png?design=movement') 17px 16px no-repeat;width: 53px;height:40px;padding:0;margin:0;}

замените на:
a.image-link, a:hover.image-link{display: block;background: url('{ASSETS_IMAGES_PATH}icon_home.png?design=movement') 17px 11px no-repeat;width: 53px;height:40px;padding:0;margin:0;}

далее найдите:
body {background: #fff;color: #000;margin: 0px;font-family: Calibri;height: 100%;}

замените на:
body {background: #eee;color: #000;margin: 0px;font-family: Calibri;height: 100%;}

далее найдите и удалите:
.main_part_wrapper {
	float: right !important;
}

далее найдите:
#search {
	width: 300px;
	position: absolute;
	top: 55px;
	right: 100px;
	z-index: 100;
}

замените его на:
#search {
	width: 100%;
	position: relative;
}

В шаблоне HTML найдите:
{% IF index_page %}
	  <div class="fluid-container">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
			<div class="camera_caption moveFromLeft">
			 
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement">
			<div class="camera_caption moveFomRight">
			
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement">
			<div class="camera_caption moveFromLeft">
			
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
			<div class="camera_caption moveFomRight">
			
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
			<div class="camera_caption fadeFromLeft">
		   
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement">
			<div class="camera_caption fadeFromRight">
		   
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement">
			<div class="camera_caption fadeFromLeft">
			
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
			<div class="camera_caption fadeFromRight">
			
			</div>
		  </div>
		</div><!-- #camera_wrap_1 -->
		<div class="clear"></div>
	  </div><!-- .fluid_container -->
  {% ENDIF %}

замените на:
{% IF index_page %}
	  <div class="fluid-container">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement">
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement">
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
		  </div>
		</div><!-- #camera_wrap_1 -->
		<div class="clear"></div>
	  </div><!-- .fluid_container -->
  {% ENDIF %}

далее найдите:
<script>
	   jQuery(function(){	
	   jQuery('#camera_wrap_1').camera({
			minHeight: '400px',
			maxHeight: '600px',
			pagination: false,
		thumbnails: false,
			time: 3000
	   });
	  });
	 </script>

замените на:
<script>
	   jQuery(function(){	
	   jQuery('#camera_wrap_1').camera({
			minHeight: '400px',
			maxHeight: '600px',
			pagination: true,
	  thumbnails: false,
   navigation: false,
   playPause: false,
   loader: 'none',
			time: 3000
	   });
	  });
	 </script>

Список эффектов слайдера вы можете посмотреть по следующей ссылке:
http://www.pixedelic...plugins/camera/

Далее найдите:
<!-- Форма поиска -->
		  <div id="search">
			<form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if(jQuery(this).find('#search').val()=='Поиск по каталогу...') return false;">
			  <input type="text" name="q" id="Search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по каталогу...{% ENDIF %}" onfocus="if(this.value=='Поиск по каталогу...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по каталогу...';}" /> 
			  <input name="search" title="Искать" type="submit" value=""> 
			</form>
		  </div>
					   <!-- /Форма поиска -->

перенесите его поставив после:
<div id="columnLeft" class="product_info_page_left four columns alpha">


#8 НатальяЯ

НатальяЯ

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

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

Отправлено 11 Август 2016 - 15:35

Спасибо. Остались все же некоторые недоработки:
1. Красная полоса почему-то сильно ушла вправо. Как это можно исправить?
2. Мне бы хотелось, чтобы рисунок в шапке был меньше, а он тоже растянулся (я обозначила желаемую область рисунка черной рамкой).
3. Корзину все-таки хочется перенести на красную полосу.
4. Слайды никак не могу сделать меньше (по ширине рисунка в шапке, обозначила красной рамкой).
5. Этот элемент если можно перенести и сделать красным кружочек, обозначающий активный слайд.
6. "Поиск" поднять чуть выше, сделать жирную красную рамку. Стрелку убрать и внутрь поместить иконку лупы.
    "Каталог" тоже приподнять. И где можно менять цвет фона и текста в нем?

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

  • 4 Изменения в оформлении (с.1).jpg
  • 4 Изменения в оформлении (с.2).jpg


#9 Danil

Danil

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

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

Отправлено 11 Август 2016 - 16:42

Просмотр сообщенияНатальяЯ (11 Август 2016 - 15:35) писал:

Спасибо. Остались все же некоторые недоработки:
1. Красная полоса почему-то сильно ушла вправо. Как это можно исправить?
2. Мне бы хотелось, чтобы рисунок в шапке был меньше, а он тоже растянулся (я обозначила желаемую область рисунка черной рамкой).
3. Корзину все-таки хочется перенести на красную полосу.
4. Слайды никак не могу сделать меньше (по ширине рисунка в шапке, обозначила красной рамкой).
5. Этот элемент если можно перенести и сделать красным кружочек, обозначающий активный слайд.
6. "Поиск" поднять чуть выше, сделать жирную красную рамку. Стрелку убрать и внутрь поместить иконку лупы.
"Каталог" тоже приподнять. И где можно менять цвет фона и текста в нем?
Здравствуйте.
1-2) В style.css найдите код
#bodyWrapper {
	position: relative;
	height: 100%;
}
и замените на
#bodyWrapper {
	position: relative;
	height: 100%;
	max-width: 1180px;
	margin: 0 auto;
}
так же найдите код

.nav-container {
	background: #ff0000;
	margin-bottom: 0px;
	position: static;
	display: block;
	float: left;
	bottom: 0;
	width: 120%;
}
и замените на
.nav-container {
	background: #ff0000;
	display: block;
	overflow: hidden;
}
3) В style.css найдите код

.shopping_cart_block {
	position: absolute;
	right: 20px;
	top: 55px;
	z-index: 10;
}
и замените на
.shopping_cart_block {
	position: absolute;
	right: 20px;
	top: 0px;
	z-index: 10;
}
4-5) Возможно Вам подойдет вариант с установкой другого слайдера, с более корректным отображением слайдов?
6) Замените изображение "стрелочки"(arrow1.png) на изображение "лупы", в разделе Сайт - Редактор шаблонов - "Изображения".
Далее в style.css найдите код
#search input[type="submit"] {outline: none;padding: 0!important;margin: 0;border: none;position:absolute;z-index: 99999;cursor: pointer;top: 0;width:21px;height:40px;background-image:url('{ASSETS_IMAGES_PATH}arrow1.png?design=movement');background-position:1px 1px;background-repeat:no-repeat;background-color:#ff0000;position:absolute;right:-20px;text-indent:-2000px-moz-border-radius: 0px;-webkit-border-radius: 0px;-khtml-border-radius: 0px;border-radius: 0px;}
и замените на
#search input[type="submit"] {outline: none;padding: 0!important;margin: 0;border: none;position: absolute;z-index: 99999;cursor: pointer;top: 2px;width: 21px;height: 36px;background-image:url('{ASSETS_IMAGES_PATH}arrow1.png?design=movement');background-position: 1px 1px;background-repeat: no-repeat;background-color: #ffffff;position: absolute;right: 2px;text-indent: -2000px-moz-border-radius: 0px;-webkit-border-radius: 0px;-khtml-border-radius: 0px;border-radius: 0px;}
так же найдите

#search input[type=text] {width: 100%;padding:0 25px 0 10px;height:40px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
и замените на

#search input[type=text] {width: 100%;padding:0 25px 0 10px;height:40px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: 2px solid #f00;}


#10 autopards

autopards

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

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

Отправлено 10 Сентябрь 2016 - 17:32

Здравствуйте!
Помогите, пожалуйста, с оформлением главной страницы. Аккаунт SL-384147.
  • Сделать так, чтобы шапка уменьшилась в высоту на всех страницах и стала таким размером, как прямоугольник на скрине. Т. е. нужно убрать высоту картинки в шапке, а каталог и слайдер поднять на верх к шапке. Блок  "оплата, доставка..." уже убрала.

  • Если можно, то убрать пустое пространство под слайдером.

  • Подскажите, где вообще найти картинку с главной, чтобы заменить ее? На всех остальных страницах у меня другое изображение с именем slide4. Предпочтительно, чтобы было одно изображение и для главной, и для остальных страниц.

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

  • IMG_0140.jpg


#11 Firefly

Firefly

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

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

Отправлено 11 Сентябрь 2016 - 12:12

Просмотр сообщенияizyum (10 Сентябрь 2016 - 17:32) писал:

Здравствуйте!
Помогите, пожалуйста, с оформлением главной страницы. Аккаунт SL-384147.
  • Сделать так, чтобы шапка уменьшилась в высоту на всех страницах и стала таким размером, как прямоугольник на скрине. Т. е. нужно убрать высоту картинки в шапке, а каталог и слайдер поднять на верх к шапке. Блок  "оплата, доставка..." уже убрала.

  • Если можно, то убрать пустое пространство под слайдером.

  • Подскажите, где вообще найти картинку с главной, чтобы заменить ее? На всех остальных страницах у меня другое изображение с именем slide4. Предпочтительно, чтобы было одно изображение и для главной, и для остальных страниц.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
.home #header { position: relative; height: 400px; background: url('http://multibox.storeland.net/slide4.jpg') center center;}

Замените на:
.home #header { position: relative; height: 233px; background: url('http://multibox.storeland.net/slide4.jpg') center center;}

Здесь же Вы можете изменить путь к картинке на url('{ASSETS_IMAGES_PATH}slide4.jpg?design=movement')

Найдите код:
#bodyWrapper {position:relative;height: 400px;}

Замените на:
#bodyWrapper {position:relative;height: 240px;}

Найдите код:
.fluid-container  {position: relative;height:600px;/*min-height: 400px;background: url('http://auto-pards.storeland.net/slide4.jpg?design=movement') center center;*/}
.camera_wrap {height:600px !important;}

Замените на:
.fluid-container  {position: relative;height: 400px;/*min-height: 400px;background: url('http://auto-pards.storeland.net/slide4.jpg?design=movement') center center;*/}
.camera_wrap {height: 400px !important;}


#12 autopards

autopards

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

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

Отправлено 11 Сентябрь 2016 - 12:52

Просмотр сообщенияFirefly (11 Сентябрь 2016 - 12:12) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
.home #header { position: relative; height: 400px; background: url('http://multibox.storeland.net/slide4.jpg') center center;}

Замените на:
.home #header { position: relative; height: 233px; background: url('http://multibox.storeland.net/slide4.jpg') center center;}

Здесь же Вы можете изменить путь к картинке на url('{ASSETS_IMAGES_PATH}slide4.jpg?design=movement')

Найдите код:
#bodyWrapper {position:relative;height: 400px;}

Замените на:
#bodyWrapper {position:relative;height: 240px;}

Найдите код:
.fluid-container {position: relative;height:600px;/*min-height: 400px;background: url('http://auto-pards.storeland.net/slide4.jpg?design=movement') center center;*/}
.camera_wrap {height:600px !important;}

Замените на:
.fluid-container {position: relative;height: 400px;/*min-height: 400px;background: url('http://auto-pards.storeland.net/slide4.jpg?design=movement') center center;*/}
.camera_wrap {height: 400px !important;}

Спасибо Вам большое!
На главной все вышло как хотелось, но вот остальные страницы нужно подправить. Каталог и карточки товаров наползли на картинку в шапке. Можно и на остальных страницах ее урезать в высоту, как на главной?

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

  • Screenshot.jpg


#13 Firefly

Firefly

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

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

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

Просмотр сообщенияizyum (11 Сентябрь 2016 - 12:52) писал:

Спасибо Вам большое!
На главной все вышло как хотелось, но вот остальные страницы нужно подправить. Каталог и карточки товаров наползли на картинку в шапке. Можно и на остальных страницах ее урезать в высоту, как на главной?

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
#header {position: relative;height: 400px;background: url('{ASSETS_IMAGES_PATH}slide4.jpg?design=movement') center center;}

Замените на:
#header {position: relative;height: 233px;background: url('{ASSETS_IMAGES_PATH}slide4.jpg?design=movement') center center;}


#14 autopards

autopards

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

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

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

Просмотр сообщенияFirefly (11 Сентябрь 2016 - 14:30) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
#header {position: relative;height: 400px;background: url('{ASSETS_IMAGES_PATH}slide4.jpg?design=movement') center center;}

Замените на:
#header {position: relative;height: 233px;background: url('{ASSETS_IMAGES_PATH}slide4.jpg?design=movement') center center;}

Спасибо за оперативный ответ! Я Вам очень признательна! Теперь все именно так, как хотелось. :)

#15 admin@zb-international.com

admin@zb-international.com

    Новичок

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

Отправлено 14 Март 2019 - 18:20

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

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

  • Screenshot_1.jpg
  • Screenshot_2.jpg





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

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