Изменение Шапки Шаблона "вечность"
#1
Отправлено 18 Январь 2014 - 13:51
Можете подсказать, как сделать следующие изменения шапки сайта: (пример в приложении)
1. Блок "поиск" переместить вниз под меню 2го уровня и сделать чуть уже и короче
2. Блок "сравнение" переместить вниз под меню 2го уровня
3. Блок "телефон" сместить левее и ниже (разместить под логотипом)
4. Блок "логотип" сделать меньше и разместить над телефоном
5. Вставить большой баннер/фото "за подлицо", т.е. по границам верхнего и нижнего меню
Можете помочь с таким кол-ом вопросов?
Заранее спасибо...
#2
Отправлено 18 Январь 2014 - 14:51
#3
Отправлено 18 Январь 2014 - 15:16
#4
Отправлено 19 Январь 2014 - 06:34
Найдите данный код в шаблоне HTML:
<!-- Форма поиска --> <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search"> <div> <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> <input title="Искать" type="submit" value="Поиск" /> </div> </form> <!-- /Форма поиска -->Удалите его.
Далее сразу после данного блока:
<!-- Список новинок --> {% IFNOT index_page_new_goods_empty %} <section class="newsletter"> <div> <h3><b>Новинки</b></h3> </div> </section> <section role="main">Вставьте данный код:
<!-- Форма поиска --> <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search"> <div> <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> <input title="Искать" type="submit" value="Поиск" /> </div> </form> <!-- /Форма поиска -->
Далее редактируем шаблон style.css.
Найдите данный блок кода:
form[role="search"] {position: absolute; right: 2em;top: 2.5em;}замените его на:
form[role="search"] {position: absolute; right: 0em;top: -1.5em;}2.Перемещаем блок сравнения товаров.
В шаблоне HTML найдите данный код:
<!-- Если в тарифном плане подключен модуль сравнения товаров --> {% IF TARIFF_FEATURE_GOODS_COMPARE %} <!-- Если не выключен модуль сравнения товаров, то покажем этот блок --> {% IFNOT SETTINGS_COMPARE_DISABLE %} {% IF COMPARE_GOODS_COUNT=0 %} <div class="compare hide"> <p>Ваш список сравнения пуст</p> </div> {% ELSE %} <div class="compare"> <p><a href="{COMPARE_URL}">Сейчас на сравнении {COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}.</a></p> </div> {% ENDIF %} {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->Далее переместите его сразу после:
<!-- Форма поиска --> <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search"> <div> <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> <input title="Искать" type="submit" value="Поиск" /> </div> </form> <!-- /Форма поиска -->Редактируем шаблоне style.css
Находим данный код:
.compare {text-align: center;margin-bottom: 0px;bottom: 1%;position: absolute;right: 10%;padding:20px;}меняем его на:
.compare {text-align: center;margin-bottom: 0px;top: -1%;position: absolute;right: 30%;padding:20px;}
#5
Отправлено 19 Январь 2014 - 14:03
по первым 2м пунктам все сделал как написано, но получается что поиск и сравнение отображаются только когда есть новинки в отображении, т.е. если товар добавлен в новинки. Так же сравнение и поиск получаются на разных уровнях.
Вот http://stocktoys.storeland.ru
#6
Отправлено 25 Январь 2014 - 11:17
#7
Отправлено 25 Январь 2014 - 16:43
SDV (19 Январь 2014 - 14:03) писал:
по первым 2м пунктам все сделал как написано, но получается что поиск и сравнение отображаются только когда есть новинки в отображении, т.е. если товар добавлен в новинки. Так же сравнение и поиск получаются на разных уровнях.
Вот http://stocktoys.storeland.ru
B HTML блок:
<!-- Форма поиска --> <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search"> <div> <input class="search" name="q" type="search" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" /> <input title="Искать" type="submit" value="Поиск" /> </div> </form> <!-- /Форма поиска --> <!-- Если в тарифном плане подключен модуль сравнения товаров --> {% IF TARIFF_FEATURE_GOODS_COMPARE %} <!-- Если не выключен модуль сравнения товаров, то покажем этот блок --> {% IFNOT SETTINGS_COMPARE_DISABLE %} {% IF COMPARE_GOODS_COUNT=0 %} <div class="compare hide"> <p>Ваш список сравнения пуст</p> </div> {% ELSE %} <div class="compare"> <p><a href="{COMPARE_URL}">Сейчас на сравнении {COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}.</a></p> </div> {% ENDIF %} {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->перенесите после:
<!-- Каталог товаров --> <div class="conta">B style.css заменяем:
.conta { position: relative; width: 100%; max-width: 1280px; margin: 20px auto; z-index: 30; }на
.conta { height: 80px; position: relative; width: 100%; max-width: 1280px; margin: 20px auto; z-index: 30; }
form[role="search"] { position: absolute; right: 2em; top: 2.5em; }на
form[role="search"] { position: absolute; right: 2em; top: 4.5em; }и
.compare { text-align: center; margin-bottom: 0px; bottom: 1%; position: absolute; right: 10%; padding: 20px; }на
.compare { text-align: center; margin-bottom: 0px; bottom: -23%; position: absolute; right: 31%; padding: 20px; }
#8
Отправлено 25 Январь 2014 - 16:55
SDV (18 Январь 2014 - 13:51) писал:
Можете подсказать, как сделать следующие изменения шапки сайта: (пример в приложении)
1. Блок "поиск" переместить вниз под меню 2го уровня и сделать чуть уже и короче
2. Блок "сравнение" переместить вниз под меню 2го уровня
3. Блок "телефон" сместить левее и ниже (разместить под логотипом)
4. Блок "логотип" сделать меньше и разместить над телефоном
5. Вставить большой баннер/фото "за подлицо", т.е. по границам верхнего и нижнего меню
Можете помочь с таким кол-ом вопросов?
Заранее спасибо...
Снимок-экрана-2014-01-18-в-13.45.00.jpg
<header role="banner">на
<header role="banner" style=" height: 150px;">
в style.css
.contacts { float: left; position: relative; }на
.contacts { margin-top: -20px; margin-left: 30px; float: left; position: relative; }4) Чтобы изменить размер логотипа пропишите ширину и высоту в html:
<h1 title="{SETTINGS_STORE_NAME}"><a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}"><img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}" /><br />{SETTINGS_STORE_NAME}</a></h1>
<img src="http://design.stocktoys.ru/logo.png" alt="StockTOYS" style=" width:50 px; height: 30px; ">5) B HTML после кода:
<!-- Время работы магазина --> {% 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 %} <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}&img=27" alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} </div> {% ENDIF %} </div>вставляем:
<div class="baner"> <img src="{ASSETS_IMAGES_PATH}i.png" /> </div>и добавляем в style.css:
.baner { float: right; width: 1000px; height: 150px; }
i.png- название загруженной в бэкофис картинки
#10
Отправлено 26 Январь 2014 - 14:58
SDV (26 Январь 2014 - 14:36) писал:
www.stocktoys.ru
<header role="banner" style=" height: 150px;">на
<header role="banner" style=" height: 165px;">и в style.css
.contacts { float: left; position: relative; }на
.contacts { margin-top: 60px; margin-left: -120px; float: left; position: relative; }
#12
Отправлено 27 Январь 2014 - 10:13
SDV (26 Январь 2014 - 21:20) писал:
еще вопросик по этой теме Как немного сократить высоту между плашкой нижнего (второго) меню и картинкой (логотипом)? После всех изменений, меню немного спустилось.
Найдите код в шаблоне HTML -
<header role="banner" style=" height: 165px;">и замените на -
<header role="banner" style=" height: 150px;">
#13
Отправлено 27 Январь 2014 - 10:24
#14
Отправлено 27 Январь 2014 - 10:35
SDV (27 Январь 2014 - 10:24) писал:
#15
Отправлено 27 Январь 2014 - 10:36
SDV (27 Январь 2014 - 10:24) писал:
Возможно не заметили разницы в 10 пикселей, или не очистили кэш браузера.
Код -
<header role="banner" style=" height: 150px;">замените на -
<header role="banner" >
#16
Отправлено 27 Январь 2014 - 15:13
#17
Отправлено 28 Январь 2014 - 08:29
Подскажите по поводу отображения в браузерах... у меня в ИЕ8 карточки товара съезжают, кнопка заказать и кол-во, в сафари тоже глюк, постоянно на главной в ролинге два товара одни и теже. Или у меня браузеры старые? И как мне сделать товары на главной, чтоб отображались, как товары в каталоге, имею в виду название, цена, отзывы, кнопка заказа и т.д.?
#18
Отправлено 28 Январь 2014 - 09:03
SDV (28 Январь 2014 - 08:29) писал:
Подскажите по поводу отображения в браузерах... у меня в ИЕ8 карточки товара съезжают, кнопка заказать и кол-во, в сафари тоже глюк, постоянно на главной в ролинге два товара одни и теже. Или у меня браузеры старые? И как мне сделать товары на главной, чтоб отображались, как товары в каталоге, имею в виду название, цена, отзывы, кнопка заказа и т.д.?
Здравствуйте
Удалите эти строки
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]--> <!--[if lte IE 8]> <html class="ie8_all" lang="en"> <![endif]-->
Так же рекомендуем обновить браузеры и не использовать ИЕ, скачайте google chrome или другой современный браузер.
Разница между товарами на главной и в каталоге это положение названия товара, вы хотите чтобы оно было сверху или снизу?
#19
Отправлено 28 Январь 2014 - 19:59
#20
Отправлено 29 Январь 2014 - 01:27
<h3><a title="{index_page_goods.NAME}" href="{index_page_goods.URL_MIN_PRICE_NOW | url_amp}" style="height:100px;">{index_page_goods.NAME}</a></h3>переместите его поставив после:
<div style="width: 100%;position: relative;height: 100%;overflow:hidden;"> <a title="{index_page_goods.NAME}" href="{index_page_goods.URL_MIN_PRICE_NOW | url_amp}"> <img alt="{index_page_goods.NAME}" src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png{% ELSE %}{index_page_goods.IMAGE_SMALL}{% ENDIF %}" /> </a> </div>
Если имеются еще товары с подобным отображением, то изменения проводятся аналогично инструкции выше
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных