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


Редактирование Шапки Осень


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

#1 darka

darka

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

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

Отправлено 02 Декабрь 2015 - 18:27

здравствуйте, вопрос такой: нужно подвинуть в шапке телефоны в "середину", т.е. на равное расстояние между логотипом и строкой поиска, так же возможно ли увелить шрифт и дополнить телефоны текстом. второй вопрос так же равноудаленно (по вертикали) разместить строку поиска и корзину (между черной полосой и слайдером) SL-364873

#2 Firefly

Firefly

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

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

Отправлено 02 Декабрь 2015 - 19:03

Просмотр сообщенияdarka (02 Декабрь 2015 - 18:27) писал:

здравствуйте, вопрос такой: нужно подвинуть в шапке телефоны в "середину", т.е. на равное расстояние между логотипом и строкой поиска, так же возможно ли увелить шрифт и дополнить телефоны текстом. второй вопрос так же равноудаленно (по вертикали) разместить строку поиска и корзину (между черной полосой и слайдером) SL-364873

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
		  <div style="float: left;"><!-- Контактный телефон -->
						{% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_ICQ || SETTINGS_STORE_SKYPE %}
						  <div class="contacts">
								<div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам">
								  <!-- Первый контактный телефон -->
								  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
										<a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}">
										  <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span>
										  {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %}
										  {SETTINGS_STORE_PHONE_NUMBER1}
										</a>
								  {% ENDIF %}
								  <!-- Второй контактный телефон -->
								  {% IF SETTINGS_STORE_PHONE_NUMBER2 %}
										<br />
										<a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}{SETTINGS_STORE_PHONE_CITY_CODE2}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}">
										<span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}</span>
										  {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %}
										  {SETTINGS_STORE_PHONE_NUMBER2}
										</a>
								  {% ENDIF %}
  
								  <!-- Третий контактный телефон -->
								  {% IF SETTINGS_STORE_PHONE_NUMBER3 %}
										<br />
										<a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}{SETTINGS_STORE_PHONE_CITY_CODE3}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}">
										  <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span>
										  {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %}
										  {SETTINGS_STORE_PHONE_NUMBER3}
										</a>
								  {% ENDIF %}
								
								</div>
						  
								<!-- Время работы магазина -->
								{% IF SETTINGS_STORE_WORK_TIME %}
								  <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}">
										{SETTINGS_STORE_WORK_TIME}
								  </div>
								{% ENDIF %}
								<!-- Контакт Skype -->
								{% IF SETTINGS_STORE_SKYPE %}
								  <a href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"><img src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" />&nbsp;<span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span></a>
								{% ENDIF %}
								<!-- Номер ICQ на сайте -->
								{% IF SETTINGS_STORE_ICQ %}
								  <div class="clear"></div>
								  <div class="icq-number left">
										<img src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" />
										<span>{SETTINGS_STORE_ICQ}</span>
								  </div>
								{% ENDIF %}
  
								<div class="clear"></div>
						  </div>
						{% ENDIF %}</div>

Переместите данный код перед:
		<!-- Блок навигации -->

Найдите код:
		  <div style="float: left;"><!-- Контактный телефон -->

Замените на:
		  <div style="float: right; margin-right: 15%;"><!-- Контактный телефон -->

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
#header .contacts {
margin-top: 50px;
}

Замените на:
#header .contacts {
margin-top: 50px;
font-size: 15px;
}

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
										</a>
								  {% ENDIF %}
								  <!-- Второй контактный телефон -->

Допишите необходимый текст перед данным кодом.

Найдите код:
										</a>
								  {% ENDIF %}
  
								  <!-- Третий контактный телефон -->

И аналогично дополните текстом для второго телефона перед кодом при необходимости.

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}

Замените на:
#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:40px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}

Найдите код:
#search_block_top{position:static;float:right;margin:26px 10px 0 0}

Замените на:
#search_block_top{position:static;float:right;margin:40px 10px 0 0}


#3 darka

darka

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

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

Отправлено 09 Декабрь 2015 - 05:11

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

Цитата

<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
и изменить название файла, получается что 3 фото есть, но ширина слайдера увеличивается в 3-4 раза, а сама картинка привязана к верней границе и внизу просто белый фон
3. повторю вопрос о телефонах и времени работы в шапке: нужно сделать одинаковый отступ этого блока от баннера и от строки поиска

#4 Юля123

Юля123

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

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

Отправлено 09 Декабрь 2015 - 09:58

Просмотр сообщенияdarka (09 Декабрь 2015 - 05:11) писал:

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

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


Добрый день!

1. ,3.)В style.css найдите код:

#megamenu{position:absolute;height:54px;top:0px;left:0px;}

и замените на код:

#megamenu{position:absolute;height:54px;top:0px;}

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

#header-fluid{position:relative;background: #FAFAFA url('{ASSETS_IMAGES_PATH}header-top-bg.png?design=autumn') repeat-x 0 0;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10}

и замените на код:

#header-fluid{position:relative;background: #FAFAFA url('{ASSETS_IMAGES_PATH}header-top-bg.png?design=autumn') 0 0;box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);z-index:10; height:45px;}


Так же и код:

#header-logo img{display: block;text-align: center;margin: 0 auto;}

Замените на код:

#header-logo img{display: block;text-align: center;	margin-top: 15px;}

И код:

#header .contacts {
margin-top: 50px;
font-size: 15px;
}

замените на код:
#header .contacts {
	margin-top: 56px;
	font-size: 15px;
	position: relative;
	left: 55px;
}


Затем код:

#search_block_top{position:static;float:right;margin:40px 10px 0 0}

замените на код:

#search_block_top{position:static;float:right;margin:55px 10px 0 0}


и наконец, код:

#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:40px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}


Замените на код:

#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:55px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}


2. Какие размеры у картинки, которую Вы загружаете? Размеры ее должны быть 1920px*400px.

#5 darka

darka

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

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

Отправлено 09 Декабрь 2015 - 16:43

размеры картинки 1920-400, так же, как уже загруженые в баннер. или нужно сперва залить картинку в файлы, а потом дописывать в html ?

#6 Ирина345

Ирина345

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

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

Отправлено 09 Декабрь 2015 - 19:39

Просмотр сообщенияdarka (09 Декабрь 2015 - 16:43) писал:

размеры картинки 1920-400, так же, как уже загруженые в баннер. или нужно сперва залить картинку в файлы, а потом дописывать в html ?
Здравствуйте, что бы добавить еще один слайдер найдите в шаблоне HTML
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
        
после вставьте

<li><a href="#"><img src="{ASSETS_IMAGES_PATH}имя вашего изображения"></a></li>
Изображение загрузите в раздел Сайт-Редактор шаблонов, не забудьте изменить имя имя изображения на своё.
Для начало загрузите изображения, а потом произведите изменения в шаблоне.

#7 darka

darka

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

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

Отправлено 10 Декабрь 2015 - 02:06

Просмотр сообщенияИрина345 (09 Декабрь 2015 - 19:39) писал:

Здравствуйте, что бы добавить еще один слайдер найдите в шаблоне HTML
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>

после вставьте

<li><a href="#"><img src="{ASSETS_IMAGES_PATH}имя вашего изображения"></a></li>
Изображение загрузите в раздел Сайт-Редактор шаблонов, не забудьте изменить имя имя изображения на своё.
Для начало загрузите изображения, а потом произведите изменения в шаблоне.
не помогает, та же самая история. появляется пустой слайд нереальной ширины

#8 Vaccina

Vaccina

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

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

Отправлено 10 Декабрь 2015 - 02:10

В шаблоне HTML у вас синтаксическая ошибка:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li><li>

замените на:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>

после него добавляйте необходимые слайды, например:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
		<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>


#9 darka

darka

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

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

Отправлено 10 Декабрь 2015 - 02:24

Просмотр сообщенияVaccina (10 Декабрь 2015 - 02:10) писал:

В шаблоне HTML у вас синтаксическая ошибка:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li><li>

замените на:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>

после него добавляйте необходимые слайды, например:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
та маленькая <li> только создает 3 картинку и больше ни на что не влияет, сейчас вид такой:

Цитата

<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=autumn"></a></li>
ну и ничего не изменилось

может дело в том, что на самом шаблоне нет файла slide3.jpg ? ну или что-то в этом роде

Сообщение отредактировал darka: 10 Декабрь 2015 - 02:29


#10 Vaccina

Vaccina

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

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

Отправлено 10 Декабрь 2015 - 03:37

У вас отсутствует slide3.jpg из-за этого происходит ошибка, если указать:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
			  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>

то работать слайдер будет корректно

#11 darka

darka

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

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

Отправлено 10 Декабрь 2015 - 04:07

Просмотр сообщенияVaccina (10 Декабрь 2015 - 03:37) писал:

У вас отсутствует slide3.jpg из-за этого происходит ошибка, если указать:
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
			 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>

то работать слайдер будет корректно
ок, а как заменить картинку ?

#12 Vaccina

Vaccina

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

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

Отправлено 10 Декабрь 2015 - 04:52

В последней строке slide1.jpg замените на имя вашего нового слайда\файла

#13 darka

darka

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

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

Отправлено 10 Декабрь 2015 - 05:16

Просмотр сообщенияVaccina (10 Декабрь 2015 - 04:52) писал:

В последней строке slide1.jpg замените на имя вашего нового слайда\файла
не помогло

#14 Vaccina

Vaccina

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

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

Отправлено 10 Декабрь 2015 - 05:19

Уточните пожалуйста, что именно не помогло? На данный момент у вас также третье строкой слайда идет slide3.jpg, а сам данный файл в редакторе шаблонов отсутствует.

#15 darka

darka

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

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

Отправлено 10 Декабрь 2015 - 06:06

Просмотр сообщенияVaccina (10 Декабрь 2015 - 05:19) писал:

Уточните пожалуйста, что именно не помогло? На данный момент у вас также третье строкой слайда идет slide3.jpg, а сам данный файл в редакторе шаблонов отсутствует.
да, залил в редактор шаблонов, все ок, ранее заливал в сайт-файлы

#16 darka

darka

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

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

Отправлено 12 Декабрь 2015 - 00:05

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

#17 Vaccina

Vaccina

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

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

Отправлено 12 Декабрь 2015 - 01:33

В main.css найдите:
#megamenu {
	position: absolute;
	height: 54px;
	top: 0px;
}
замените на:
#megamenu {
	position: absolute;
	height: 54px;
	top: 0px;
	z-index: 10;
}

Далее найдите:
#header .contacts {
	margin-top: 56px;
	font-size: 15px;
	position: relative;
	left: 55px;
}

замените на:
#header .contacts {
	margin-top: 56px;
	font-size: 15px;
	position: relative;
	left: 55px;
	width: 500px;
	z-index: 1;
}


#18 darka

darka

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

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

Отправлено 12 Декабрь 2015 - 01:48

Просмотр сообщенияVaccina (12 Декабрь 2015 - 01:33) писал:

В main.css найдите:[CODE]
main.js ? или где найти css

#19 Vaccina

Vaccina

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

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

Отправлено 12 Декабрь 2015 - 02:02

Простите за неточность, изменения производите в файле style.css

#20 darka

darka

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

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

Отправлено 01 Февраль 2016 - 21:28

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

Изображение




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

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