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


Изменения Шапки Сайта


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

#1 s-eye

s-eye

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

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

Отправлено 02 Март 2014 - 00:18

Добрый вечер, помогите переместить
фото прилагаю
.SL-271156

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

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


#2 Antiv

Antiv

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

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

Отправлено 04 Март 2014 - 20:05

Здравствуйте. Помогите внести следующие изменения.
1. Увеличить по ширине шапку (где-то в половину).
2. Перенести меню (Главная, Доставка итд) ниже как на скрине.
3. Помогите установить такой баннер.
Пробовал сделать по инструкцииот шаблона "Осень" -  что-то как-то не срастается.

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

  • Шапка.jpg


#3 Vaccina

Vaccina

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

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

Отправлено 05 Март 2014 - 04:34

Просмотр сообщенияs-eye (02 Март 2014 - 00:18) писал:

Добрый вечер, помогите переместить
фото прилагаю
.SL-271156

Подобный вопрос рассматривался в сл.ветке форума и имеет инструкции:
http://forum.storela...299#entry124299


Просмотр сообщенияAntiv (04 Март 2014 - 20:05) писал:

Здравствуйте. Помогите внести следующие изменения.
1. Увеличить по ширине шапку (где-то в половину).
2. Перенести меню (Главная, Доставка итд) ниже как на скрине.
3. Помогите установить такой баннер.
Пробовал сделать по инструкцииот шаблона "Осень" -  что-то как-то не срастается.
1.В main.css добавьте следующий блок:
#header>.inner {
height: 250px;
}
Значение height можете изменять по своему усмотрению.
2.В main.css найдите:
.header_top {
	background-color: #F5F5F5;
	margin: 0 auto;
	min-height: 40px;
	width: 100%;
}

замените на:
.header_top {
background-color: #F5F5F5;
left: 0;
margin: 0 auto;
min-height: 40px;
position: absolute;
top: 250px;
width: 100%;
}
3.В main.css найдите:
#header-banner {
height: 120px;
left: 440px;
position: absolute;
top: 50px;
width: 500px;
}
замените на:
#header-banner {
height: 120px;
left: 240px;
position: absolute;
top: 120px;
width: 670px;
}


#4 Antiv

Antiv

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

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

Отправлено 05 Март 2014 - 23:57

Спасибо, все получилось, но появилась новая проблема.
1. Если скрыть верхнюю часть шапки то получается, что
основной (большой) баннер закрывает меню и часть баннера в шапке (Рис.1).
Хотелось бы их (меню и баннеры) привязать к белой части шапки.
2. Помогите, пожалуйста установить еще 2 баннера, как показано на рис. 2

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

  • 1.jpg
  • 2.jpg


#5 Vaccina

Vaccina

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

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

Отправлено 06 Март 2014 - 05:41

Чтобы баннеры тоже двигались в зависимости от открытой\скрытой верхней плашки, в main.css найдите:
.inner {
	background-color: #FFFFFF;
	clear: both;
	margin: 0 auto;
	padding: 0;
	width: 1200px;
}
замените на:
.inner {
	background-color: #FFFFFF;
	clear: both;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 1200px;
}

А меню совтеую заранее выше расположить, чтобы не скрывалось в дальнейшем, то есть в main.css найдите:
.header_top {
	background-color: #F5F5F5;
	left: 0;
	margin: 0 auto;
	min-height: 40px;
	position: absolute;
	top: 250px;
	width: 100%;
}
и уменьшите значение top

Чтобы баннеры были сбооку в левой колонке, расположите их в шаблоне HTML после:
<div id="column-left">
или ниже если необходимо чтобы они имели определенное место в левой колонке.

#6 miniplaneta

miniplaneta

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

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

Отправлено 06 Март 2014 - 13:39

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

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

  • 06_03_6.png


#7 empty9228

empty9228

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

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

Отправлено 07 Март 2014 - 09:00

Здравствуйте, найдите в файле main.css код
#header #search {position: relative;float: right;top:9px;right:0px;margin-bottom: 9px;width: 225px;z-index: 15;}
замените его на
#header #search {position: relative;float: right;top: 116px;right: 233px;margin-bottom: 9px;width: 225px;z-index: 15;}

там же найдите код
#header #support {position: relative;float: right;top: 9px;margin-right: 11px;z-index: 30;width: 200px;}
замените его на
#header #support {position: relative;float: right;top: 116px;margin-right: 11px;z-index: 30;width: 200px;color: black;right: 243px;}

найдите код
#header #support a, #header #support a:hover{color: #fff;text-decoration: none;}
замените его на
#header #support a, #header #support a:hover{color: #000;text-decoration: none;}


#8 miniplaneta

miniplaneta

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

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

Отправлено 07 Март 2014 - 12:04

1. Когда сворачиваешь шапку Поиск и Контакты продолжают исчезать, а я хочу их постоянно отображать!

2. Теперь мне надо ширину установить 100%

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

  • 07_03_2.png
  • 07_03_3.png


#9 empty9228

empty9228

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

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

Отправлено 07 Март 2014 - 13:59

Нами были внесены изменения, проверьте сайт.

#10 miniplaneta

miniplaneta

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

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

Отправлено 07 Март 2014 - 14:11

Просмотр сообщенияempty9228 (07 Март 2014 - 13:59) писал:

Нами были внесены изменения, проверьте сайт.
видел! но как только сохранил свои изменения в редакторе HTML (в это время работаю), как все вернулось назад! :(  Теперь вышел из редактора.

#11 empty9228

empty9228

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

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

Отправлено 07 Март 2014 - 14:26

Ничего страшного, проверьте еще раз.

#12 miniplaneta

miniplaneta

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

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

Отправлено 07 Март 2014 - 14:36

Просмотр сообщенияempty9228 (07 Март 2014 - 14:26) писал:

Ничего страшного, проверьте еще раз.
Вроде все Ок!  Я в перспективе здесь хочу размещать бегущую строку. Это будет реально?

#13 empty9228

empty9228

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

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

Отправлено 07 Март 2014 - 14:47

Да, возможно.

#14 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 08 Март 2014 - 07:19

Просмотр сообщенияminiplaneta (07 Март 2014 - 14:36) писал:

Вроде все Ок!  Я в перспективе здесь хочу размещать бегущую строку. Это будет реально?

Подробнее о бегущей строке вы можете прочитать тут

#15 Ser

Ser

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

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

Отправлено 04 Апрель 2014 - 19:57

Всем привет.  Подскажите как сделать следующие изменения в шапке:

1. Контакты расположить строкой в самом верху. Рис приложен.

2. Сравнение перенести под корзину, а то слайдер съезжает.

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

  • Скрывающееся меню.jpg


#16 daria_dnk

daria_dnk

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

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

Отправлено 04 Апрель 2014 - 22:26

Добрый день!

В шаблоне HTML замените блок
<!-- Контакты -->
		 {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_ICQ || SETTINGS_STORE_SKYPE %}
			 <div id="support" title="Звоните, мы проконсультируем вас по любым вопросам">
			 <h4>Связаться с нами</h4>
			 <span class="sup_phone"></span>
			 <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 %}
на
<!-- Контакты -->
		 {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_ICQ || SETTINGS_STORE_SKYPE %}
			 <div id="support" title="Звоните, мы проконсультируем вас по любым вопросам">
			 <h4 style="display: inline;">Связаться с нами</h4>
			 <span class="sup_phone"></span>
			 <div style="display: inline;" class="contacts">
				 <div style="display: inline;" 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 %}
					
					 <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 %}
				
					 <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 style="display: inline;" 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>
			 </div>
		 {% ENDIF %}
В шаблоне main.css замените строчку
#header #support {position: absolute;float: right;top: 10px;right: 250px;z-index: 30;width: 200px;color:#000;}
на
#header #support {position: absolute;float: right;top: 10px;right: 250px;z-index: 30;width: 550px;color:#000;}

2) В шаблоне HTML строку
<!-- Если в тарифном плане подключен модуль сравнения товаров -->
		 {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}
		 <!-- Если не выключен модуль сравнения товаров, то покажем этот блок -->
		 <div class="inner" id="compareInfoBlock" {% IF COMPARE_GOODS_COUNT=0 %}style="display:none;"{% ENDIF %}>
			 <div id="compareInfo">Сейчас на <a href="{COMPARE_URL}">сравнении</a> <span class="nb_goods">{COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}</span>.</div>
		 </div>
		 {% ENDIF %}
		 <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->
переместите ее перед строкой
<div id="welcome"><a href="http://{NET_DOMAIN}/">Добро пожаловать на сайт!</a></div>


#17 Ser

Ser

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

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

Отправлено 04 Апрель 2014 - 22:38

Спасибо.

Осталось вставить тел трубку перед номером телефона

Перенести сравнение по корзину, а то слайдер съезжает.
Рисунок в первом запросе.

#18 Vaccina

Vaccina

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

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

Отправлено 05 Апрель 2014 - 03:52

1. В main.css найдите примерно сл.блок:
#header #support .sup_phone {
	background: url("http://design.tea-in-bed.ru/phone_circle.png") no-repeat scroll center center #191919;
	border-radius: 50%;
	display: block;
	height: 36px;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 0.5s ease 0s;
	width: 36px;
}
замените на:
#header #support .sup_phone {
	background: url("http://design.tea-in-bed.ru/phone_circle.png") no-repeat scroll center center #191919;
	border-radius: 50%;
	display: block;
	height: 36px;
	left: -50px;
	position: absolute;
	top: 0;
	transition: all 0.5s ease 0s;
	width: 36px;
}

2.сравнение на данный момент у вас под корзиной

#19 Ser

Ser

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

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

Отправлено 05 Апрель 2014 - 09:36

Просмотр сообщенияVaccina (05 Апрель 2014 - 03:52) писал:

1. В main.css найдите примерно сл.блок:
#header #support .sup_phone {
background: url("http://design.tea-in-bed.ru/phone_circle.png") no-repeat scroll center center #191919;
border-radius: 50%;
display: block;
height: 36px;
position: absolute;
right: 0;
top: 0;
transition: all 0.5s ease 0s;
width: 36px;
}
замените на:
#header #support .sup_phone {
background: url("http://design.tea-in-bed.ru/phone_circle.png") no-repeat scroll center center #191919;
border-radius: 50%;
display: block;
height: 36px;
left: -50px;
position: absolute;
top: 0;
transition: all 0.5s ease 0s;
width: 36px;
}

2.сравнение на данный момент у вас под корзиной



А точно, забыл проверить вчера, спасибо за помощь!!!

#20 Cybernetic

Cybernetic

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

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

Отправлено 18 Апрель 2014 - 07:40

Здравствуйте! Можно-ли сделать правее логотива надпись МАГАЗИН САНТЕХНИКИ:

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

  • Безымянный5467547.png





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

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