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


Верхнее Меню, Подвал,фон

Верхнее меню подвал фон

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

#1 balansinet

balansinet

    Новичок

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

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

Здравствуйте, есть вопросы которые хочется решить. b20608.storeland.ru
1.Как в шапке сайта сделать контакты, время работы магазина
2.Верхнее меню растянуть по границам сайта  и сделать каждый пункт меню как отдельный блок (кнопку) желательно с округлыми краями (на подобии как в подвале сайта)
3.Добавить под слайдер активные картинки (переход на другие страницы) 3-4 шт
4.Переместить контакты в подвале ближе к меню подвала
5.Информацию о магазине разместить рядом с контактами или чуть ниже
6.Убрать нижнюю полосу
7.Как регулировать ширину
8.Как изменить фон сайта, поставить изображение.

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

  • vlcsnap-2014-04-07-09h40m03s23.png
  • vlcsnap-2014-04-07-09h48m38s145.png


#2 MikDark

MikDark

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

  • Модераторы
  • 6 398 сообщений

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

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

Здравствуйте, есть вопросы которые хочется решить. b20608.storeland.ru
1.Как в шапке сайта сделать контакты, время работы магазина
2.Верхнее меню растянуть по границам сайта  и сделать каждый пункт меню как отдельный блок (кнопку) желательно с округлыми краями (на подобии как в подвале сайта)
3.Добавить под слайдер активные картинки (переход на другие страницы) 3-4 шт
4.Переместить контакты в подвале ближе к меню подвала
5.Информацию о магазине разместить рядом с контактами или чуть ниже
6.Убрать нижнюю полосу
7.Как регулировать ширину
8.Как изменить фон сайта, поставить изображение.

Давайте делать поэтапно.
1) Вам нужно найти в шаблоне HTML код:

<div id="header-logo">
	 <a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}">
	 <img class="logo" src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}. Перейти на главную" />
		 {SETTINGS_STORE_NAME}
	 </a>
</div>

и после него вставить:
<div class="contact"><h4>Контакты</h4>


<div class="block_content">
	 <!-- Контактный телефон -->
		 {% 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>
		 {% ENDIF %}



</div>

</div>


далее в шаблон style.css добавьте:
.contact {
margin-left:10px;
float:left;
}

2) Меню растянуть отдельно не получится. Только если растягивать вместе с шапкой.
3) Для начала загрузите нужные изображения в раздел Сайт -Редактор шаблонов. Далее Вам нужно в шаблоне HTML найти строки:
<div class="flexslider" id="autumn-slider">
	 <ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg"></a></li>
	 </ul>
	 </div>

и после них добавить:
<div class="images"><a href="Ссылка1"><img src="{ASSETS_IMAGES_PATH}image1.jpg"></a><a href="Ссылка2"><img src="{ASSETS_IMAGES_PATH}image2.jpg"></a><a href="Ссылка3"><img src="{ASSETS_IMAGES_PATH}image3.jpg"></a></div>

где image1.jpg image2.jpg и image3.jpg - имена загруженных изображений.
Ссылка1 Ссылка2 ссылка3 - ссылка на нужные страницы.

После этого в шаблон style.css добавляем:
.images img {
max-width: 300px;
margin: 5px;
}


#3 balansinet

balansinet

    Новичок

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

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

Спасибо. Пункт 1 сделал, всё здорово
2. 2) Меню растянуть отдельно не получится. Только если растягивать вместе с шапкой.
Помогите тогда сделать каждый пункт меню как отдельный блок (кнопку) желательно с округлыми краями (на подобии как в подвале сайта)
3.Тоже сделал всё здорово, вот только не понял где в  style.css добавляем:
.images img {
max-width: 300px;
margin: 5px;
}

#4 MikDark

MikDark

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

  • Модераторы
  • 6 398 сообщений

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

Просмотр сообщенияbalansinet (07 Апрель 2014 - 08:57) писал:

Спасибо. Пункт 1 сделал, всё здорово
2. 2) Меню растянуть отдельно не получится. Только если растягивать вместе с шапкой.
Помогите тогда сделать каждый пункт меню как отдельный блок (кнопку) желательно с округлыми краями (на подобии как в подвале сайта)
3.Тоже сделал всё здорово, вот только не понял где в  style.css добавляем:
.images img {
max-width: 300px;
margin: 5px;
}

Можно в самый низ шаблона.

По вашему вопросу. В шаблоне style.css найдите код:
#megamenu li.root_menu {
padding: 10px 8px 5px 8px;
float: left;
position: relative;
}

и замените его на:
#megamenu li.root_menu {
padding: 10px 8px 5px 8px;
float: left;
position: relative;
margin-right: 5px;
border: 1px solid #000;
border-radius: 5px;
}

где #000 - это цвет рамки. Его можно сгенерировать здесь
border-radius - это закругление, его значение можно менять.

#5 balansinet

balansinet

    Новичок

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

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

MikDark , спасибо за помощь, всё идёт как надо :) , есть ещё вопросы

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

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

  • vlcsnap-2014-04-08-08h42m57s182.png
  • vlcsnap-2014-04-08-08h43m21s103.png


#6 Alexey11

Alexey11

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

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

Отправлено 08 Апрель 2014 - 08:21

Просмотр сообщенияbalansinet (08 Апрель 2014 - 05:02) писал:

MikDark , спасибо за помощь, всё идёт как надо :) , есть ещё вопросы

1.Как меню разместить о центру
2.Как изменить фон сайта, залить его изображением
3.Как переместить контакты и название магазина под нижнее меню (чтобы они находились в одном блоке помеченном цифрой 4)
4.Как регулировать ширину
5.Убрать лишнее это картинки способов оплаты и два самых нижних блока
Здравствуйте,
1.
В файле "style.css".
Код:
#megamenu{position:absolute; height:35px; top:140px; border-top: 1px solid #c0c0c0; float: left;width: 100%;}
Заменить:
#megamenu{position:absolute; height:35px; left: 22%;top: 145px; float: left;width: 100%;}

2.
В файле "style.css".
Код:
#wrapper{background-color:#f2f2f2}
Заменить:
#wrapper{background:url('{ASSETS_IMAGES_PATH}background.jpg') #f2f2f2;}

далее загрузите картинку в ваш бэк-офис в раздел "Сайт" - "Редактор шаблонов" с помощью кнопки "добавить файлы"
Картинка должна называться background.jpg

3.В блоке с контактами находится также блок новостей, так что не желательно убирать центральную часть футера.
Копирайт перенсли вам в желаемое место.

4.Если вы хотите установить фиксированное значение данного блока то вам нужно найти данный код в шаблоне style.css

#footer-top{clear:both;background:#2a2a2a;border-bottom:1px solid #171717;}

заменить его на:
#footer-top{clear:both;background:#2a2a2a;border-bottom:1px solid #171717;height: 150px;}

и изменяя значение height на большее, т.е 150 вы можете отрегулировать высоту данного блока.

5.Центральный блок убирать не желательно , так как там находится блок новостей. Нижний блок убрал.

#7 balansinet

balansinet

    Новичок

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

Отправлено 10 Апрель 2014 - 06:55

Alexey11, спасибо за помощь. Подскажите ещё несколько вопросов
1.Как сделать что бы заливка фона была только по краям под цифрой 1
2.Шапку сайта залить другим цветом или поставить картинку
3.Центральная часть сайта (где размещён контент) осталась с белым фоном

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

  • vlcsnap-2014-04-10-10h00m23s130.jpg


#8 Castiel

Castiel

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

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

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

Просмотр сообщенияbalansinet (10 Апрель 2014 - 06:55) писал:

Alexey11, спасибо за помощь. Подскажите ещё несколько вопросов
1.Как сделать что бы заливка фона была только по краям под цифрой 1
2.Шапку сайта залить другим цветом или поставить картинку
3.Центральная часть сайта (где размещён контент) осталась с белым фоном


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

1. Можно убрать отступ между шапкой и основной частью сайта
В файле "main.css".
Найти:
.content.container {
margin-top: 25px;
margin-bottom: 50px;
min-height: 900px;
}

Заменить:
.content.container {
margin-bottom: 50px;
min-height: 900px;
}

2. В файле "main.css".
Найти:
.container {
width: 940px;
height: 180px;
margin: 0 auto;
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);
}

Заменить:
.container {
width: 940px;
height: 180px;
margin: 0 auto;
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);
background: #fff;
}

background: #fff;  цвет фона шапки или можно использовать картинку

3. На центральной части уже установлен белый фон
.container {
width: 940px;
height: 180px;
margin: 0 auto;
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);
background: #fff;
}


#9 balansinet

balansinet

    Новичок

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

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

Просмотр сообщенияCastiel (10 Апрель 2014 - 07:04) писал:

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

1. Можно убрать отступ между шапкой и основной частью сайта
В файле "main.css".
Найти:
.content.container {
margin-top: 25px;
margin-bottom: 50px;
min-height: 900px;
}

Заменить:
.content.container {
margin-bottom: 50px;
min-height: 900px;
}

2. В файле "main.css".
Найти:
.container {
width: 940px;
height: 180px;
margin: 0 auto;
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);
}

Заменить:
.container {
width: 940px;
height: 180px;
margin: 0 auto;
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);
background: #fff;
}

background: #fff;  цвет фона шапки или можно использовать картинку

3. На центральной части уже установлен белый фон
.container {
width: 940px;
height: 180px;
margin: 0 auto;
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);
background: #fff;
}

Спасибо, центральная часть сайта и шапка стали белые, но при замене цвета шапки меняется цвет и всей центральной части сайта (на скрине всё видно, специально "покрасил")), как сделать, что бы можно было заменить фон только в шапке?

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

  • vlcsnap-2014-04-10-23h58m03s193.png


#10 daria_dnk

daria_dnk

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

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

Отправлено 10 Апрель 2014 - 20:24

Просмотр сообщенияbalansinet (10 Апрель 2014 - 19:59) писал:

Спасибо, центральная часть сайта и шапка стали белые, но при замене цвета шапки меняется цвет и всей центральной части сайта (на скрине всё видно, специально "покрасил")), как сделать, что бы можно было заменить фон только в шапке?
Добрый день!
в шаблоне html найдите строку
<div class="content container">
замените на
<div style="background-color:blue" class="content container">

И замените в данном коде значение параметра background-color на тот цвет который должен быть у Вас в центральной части.

#11 balansinet

balansinet

    Новичок

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

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

Просмотр сообщенияdaria_dnk (10 Апрель 2014 - 20:24) писал:

Добрый день!
в шаблоне html найдите строку
<div class="content container">
замените на
<div style="background-color:blue" class="content container">

И замените в данном коде значение параметра background-color на тот цвет который должен быть у Вас в центральной части.

Спасибо





Темы с аналогичным тегами Верхнее меню подвал, фон

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

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