#1
Отправлено 07 Апрель 2014 - 07:03
1.Как в шапке сайта сделать контакты, время работы магазина
2.Верхнее меню растянуть по границам сайта и сделать каждый пункт меню как отдельный блок (кнопку) желательно с округлыми краями (на подобии как в подвале сайта)
3.Добавить под слайдер активные картинки (переход на другие страницы) 3-4 шт
4.Переместить контакты в подвале ближе к меню подвала
5.Информацию о магазине разместить рядом с контактами или чуть ниже
6.Убрать нижнюю полосу
7.Как регулировать ширину
8.Как изменить фон сайта, поставить изображение.
#2
Отправлено 07 Апрель 2014 - 07:38
balansinet (07 Апрель 2014 - 07:03) писал:
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" /> <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
Отправлено 07 Апрель 2014 - 08:57
2. 2) Меню растянуть отдельно не получится. Только если растягивать вместе с шапкой.
Помогите тогда сделать каждый пункт меню как отдельный блок (кнопку) желательно с округлыми краями (на подобии как в подвале сайта)
3.Тоже сделал всё здорово, вот только не понял где в style.css добавляем:
.images img {
max-width: 300px;
margin: 5px;
}
#4
Отправлено 07 Апрель 2014 - 09:13
balansinet (07 Апрель 2014 - 08:57) писал:
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
Отправлено 08 Апрель 2014 - 05:02
1.Как меню разместить о центру
2.Как изменить фон сайта, залить его изображением
3.Как переместить контакты и название магазина под нижнее меню (чтобы они находились в одном блоке помеченном цифрой 4)
4.Как регулировать ширину
5.Убрать лишнее это картинки способов оплаты и два самых нижних блока
#6
Отправлено 08 Апрель 2014 - 08:21
balansinet (08 Апрель 2014 - 05:02) писал:
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
Отправлено 10 Апрель 2014 - 06:55
1.Как сделать что бы заливка фона была только по краям под цифрой 1
2.Шапку сайта залить другим цветом или поставить картинку
3.Центральная часть сайта (где размещён контент) осталась с белым фоном
#8
Отправлено 10 Апрель 2014 - 07:04
balansinet (10 Апрель 2014 - 06:55) писал:
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
Отправлено 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; }
Спасибо, центральная часть сайта и шапка стали белые, но при замене цвета шапки меняется цвет и всей центральной части сайта (на скрине всё видно, специально "покрасил")), как сделать, что бы можно было заменить фон только в шапке?
#10
Отправлено 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
Отправлено 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 анонимных