Нужна Помощь В Оформлении Главной Страницы
#1
Отправлено 06 Сентябрь 2016 - 16:26
Помогите, пожалуйста, внести некоторые изменения в дизайн сайта:
1. Нужно удалить голубую полоску сверху.
2. Отмеченную область сделать светло-серой. Справа расположить: иконку лупы, корзины, "Личный кабинет".
Слева: надпись "Листать каталог" (попутный вопрос: куда и как можно загрузить флеш-каталог?).
3. Логотип расположить по центру. Слева от него: разделы меню "О нас"; "Возможности"; "Контакты". Справа: "Советы косметолога"; "Заказ. Доставка. Оплата".
4. Виджеты соцсетей и область поиска удалить.
5. Уменьшить ширину данной области НА 0,6 см.
6. Фон каталога сделать красным. Высота 1,4 см. Шрифт Arial, цвет белый.
Заранее огромное спасибо тому, кто откликнется!
#2
Отправлено 07 Сентябрь 2016 - 05:54
#header-top { height: 41px; line-height: 36px; border-top: 5px solid #3cabda; position: relative; }
замените на:
#header-top { height: 41px; line-height: 36px; position: relative; background: #eee; }
Распишите пожалуйста подробней, что за флеш каталог, имеется ли у вас исходный код или пример откуда вы его хотите перенести?
В шаблоне HTML найдите:
<div class="sns-quickaccess"> <div class="quickaccess-inner"> <span class="welcome">Добро пожаловать!</span> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div>
замените на:
<div class="block-search"> <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get"> <div class="form-search"> <input id="search" type="text" name="q" value="" class="inputText search-string" placeholder="Поиск по магазину..."> <button type="submit" title="Искать" class="button search-submit"></button> </div> </form> </div> <div class="block mini-cart {% IFNOT CART_COUNT_TOTAL = 0 %}have-items{% ENDIF %} {% IF MOD_LNAME = cart %}cart-page{% ENDIF %}"> <div class="block-title"> <a href="{CART_URL}" class="link-hide"></a> <div class="cart-status"> <span class="cart-count">{CART_COUNT_TOTAL}</span> </div> </div> <div class="block-content dropdown-cart"> <div class="block-inner"> {% IF cart_count_empty %} <p class="block-subtitle empty">Ваша корзина пуста</p> {% ELSE %} <p class="block-subtitle not-empty">В корзине:</p> {% ENDIF %} <ul id="cart-sidebar" class="mini-products-list"> {% FOR cart_items %} <li class="cart-item"> <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}" class="product-image"><img src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=azure{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon"></a> <div class="product-details"> <p class="product-name"> <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}">{cart_items.GOODS_NAME}</a> </p> <p class="product-mod"> {% IFNOT cart_items.distinctive_properties_empty %}<span title="({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})">({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %} </p> </div> <div class="product-details-bottom"> <div class="price-box"> <span class="price {CURRENCY_CHAR_CODE}" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span> </div> <p class="quantity-container"> <span class="label-qty">Количество:</span> <span class="qty inputText">{cart_items.ORDER_LINE_QUANTITY}</span> </p> </div> <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="product-remove btn-remove"></a> </li> {% ENDFOR %} </ul> <div class="bottom-action actions"> <a class="button remove-products" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}">Очистить</a> <a class="button" title="Перейти к оформлению заказа" href="{CART_URL}">В корзину</a> </div> </div> </div> </div>
далее найдите:
<!-- Logo --> <div id="logo" class="col-sm-4 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-8 col-xs-12"> <div class="header-right-inner"> <ul class="connect-us"> <li><a href="#" class="fa fa-facebook"></a></li> <li><a href="#" class="fa fa-twitter"></a></li> <li><a href="#" class="fa fa-youtube"></a></li> <li><a href="#" class="fa fa-vk"></a></li> </ul> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;"> <div class="form-search"> <input type="text" name="q" value="{SEARCH_QUERY}" class="inputText" placeholder="Поиск по магазину..."> <input type="hidden" name="goods_search_field_id" value="0"> <button type="submit" title="Искать" class="button search-submit"></button> </div> </form> </div> </div>
замените на:
<div class="col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- Logo --> <div id="logo" class="col-sm-4 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR header_right %} {% FOR links %} <li><a href="{menu.header_right.links.URL}" {% IF menu.header_right.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header_right.links.TITLE %}title="{menu.header_right.links.TITLE}"{% ENDIF %}>{menu.header_right.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div>
В разделе Сайт - Меню создайте новый блок менб с переменной header_right и в ней расположите пункты для правого меню
В main.css найдите и удалите:
#menu .nav-right .block-search { display: none; }
далее найдите:
#header .header-right .header-right-inner #search_mini_form, #menu .nav-right .block-search #search_mini_form2 {margin: 0 0 0 20px;float: left;line-height: normal;position: relative;} #header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText {font-size: 12px;height:auto;line-height:20px;width: 235px;padding: 10px 20px;border: 1px solid #d8d8d8;border-radius: 22px;-webkit-border-radius: 22px;-moz-border-radius: 22px;} #header .header-right .header-right-inner #search_mini_form .form-search input.inputText:focus {width: 250px;outline:none;} #header .header-right .header-right-inner #search_mini_form .button, #menu .nav-right .block-search #search_mini_form2 .button {padding: 0 0;width: 24px;height: 24px;border: none;position: absolute;top: 9px;right: 11px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;}
замените на:
#header #search_mini_form, #menu .nav-right .block-search #search_mini_form2 {margin: 0 0 0 20px;float: left;line-height: normal;position: relative;} #header #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText {font-size: 12px;height:auto;line-height:20px;width: 235px;padding: 10px 20px;border: 1px solid #d8d8d8;border-radius: 22px;-webkit-border-radius: 22px;-moz-border-radius: 22px;} #header #search_mini_form .form-search input.inputText:focus {width: 250px;outline:none;} #header #search_mini_form .button, #search_mini_form2 .button {padding: 0 0;width: 24px;height: 24px;border: none;position: absolute;top: 9px;right: 11px;background: url('{ASSETS_IMAGES_PATH}ico-search.png') no-repeat center center;cursor:pointer;}
далее найдите:
#menu .inner {width: 100%;background: #3cabda url("{ASSETS_IMAGES_PATH}breadcrumbs-bg.jpg") no-repeat center top;}
замените на:
#menu .inner { width: 100%; background: #C6301D; }
#3
Отправлено 07 Сентябрь 2016 - 16:24
1. В самом верху слева нужно убрать е-мэйл и телефон. Вместо них разместить надпись "Листать каталог" (с этим буду разбираться позже).
2. Справа сверху: Поиск, корзина, "Личный кабинет"
3. Пункты верхнего меню расположить с двух сторон от логотипа в строчку. Слева: "О нас", "Ваши возможности", "Контакты"; справа: "Советы косметолога", "Заказ. Доставка. Оплата". Шрифт: Arial, черный.
4. Высота шапки (белая часть) 3 см.
5. Из меню каталога убрать поиск и корзину.
6. Высота меню каталога 1,5 см.
7. Шрифт сделать более жирным.
Еще раз огромное спасибо за помощь!
#4
Отправлено 08 Сентябрь 2016 - 19:50
НатальяЯ (07 Сентябрь 2016 - 16:24) писал:
1. В самом верху слева нужно убрать е-мэйл и телефон. Вместо них разместить надпись "Листать каталог" (с этим буду разбираться позже).
2. Справа сверху: Поиск, корзина, "Личный кабинет"
3. Пункты верхнего меню расположить с двух сторон от логотипа в строчку. Слева: "О нас", "Ваши возможности", "Контакты"; справа: "Советы косметолога", "Заказ. Доставка. Оплата". Шрифт: Arial, черный.
4. Высота шапки (белая часть) 3 см.
5. Из меню каталога убрать поиск и корзину.
6. Высота меню каталога 1,5 см.
7. Шрифт сделать более жирным.
Еще раз огромное спасибо за помощь!
Изменения Вам произвел, проверьте.
#5
Отправлено 09 Сентябрь 2016 - 16:44
1. в верхней серой строке вместо "Вход" и "Регистрация" написать "Личный кабинет";
2. где можно заменить иконки корзины и лупы? не нашла данные файлы в изображениях;
3. красный кружочек с указанием числа товаров в корзине уменьшить;
4. шрифт надписей "Личный кабинет" и "Листать каталог" заменить на Arial, цвет черный.
5. пункты верхнего меню разместить в СТРОЧКУ по обе стороны логотипа;
6. красную строку сузить.
Еще раз спасибо за помощь и терпение!
#6
Отправлено 09 Сентябрь 2016 - 17:21
НатальяЯ (09 Сентябрь 2016 - 16:44) писал:
1. в верхней серой строке вместо "Вход" и "Регистрация" написать "Личный кабинет";
2. где можно заменить иконки корзины и лупы? не нашла данные файлы в изображениях;
3. красный кружочек с указанием числа товаров в корзине уменьшить;
4. шрифт надписей "Личный кабинет" и "Листать каталог" заменить на Arial, цвет черный.
5. пункты верхнего меню разместить в СТРОЧКУ по обе стороны логотипа;
6. красную строку сузить.
Еще раз спасибо за помощь и терпение!
2) В разделе Сайт - Редактор шаблонов, найдите изображение action-llist.png и отредактируйте его.
4) В main.css найдите код
#header-top .topheader-left ul.contact-us-now li {display: inline-block;float: left;line-height: 41px;font-size: 92%;color:#000;font-family:Arial;}изменяйте font-size(размер шрифта) и color(цвет).
По остальным пунктам изменения Вам произвел.
#7
Отправлено 16 Сентябрь 2016 - 16:52
Помогите, пожалуйста, еще чуть-чуть доработать:
1. Надписи "Листать каталог", "Поиск по магазину", "Личный кабинет" написать шрифтом Arial, 11 кегль, цвет серый.
2. Пункты верхнего меню (слева и справа) - написать черным.
3. Увеличить высоту белой шапки до 3-х см.
4. Уменьшить размер шрифта и расстояние от краев (все пункты каталога не входят). И саму красную полосочку сделать поуже (как выделено черной рамкой).
5. Подскажите, пожалуйста, возможно ли поменять слайдер. Разместить несколько слайдеров меньшего раздела (как на скрине).
Заранее огромное СПАСИБО!
#8
Отправлено 16 Сентябрь 2016 - 17:46
НатальяЯ (16 Сентябрь 2016 - 16:52) писал:
Помогите, пожалуйста, еще чуть-чуть доработать:
1. Надписи "Листать каталог", "Поиск по магазину", "Личный кабинет" написать шрифтом Arial, 11 кегль, цвет серый.
2. Пункты верхнего меню (слева и справа) - написать черным.
3. Увеличить высоту белой шапки до 3-х см.
4. Уменьшить размер шрифта и расстояние от краев (все пункты каталога не входят). И саму красную полосочку сделать поуже (как выделено черной рамкой).
5. Подскажите, пожалуйста, возможно ли поменять слайдер. Разместить несколько слайдеров меньшего раздела (как на скрине).
Заранее огромное СПАСИБО!
Здравствуйте,
1. В вашем бэк-офисе, в разделе Сайт-Редактор шаблонов, найдите файл main.css
В нем найдите код:
#header-top .topheader-left ul.contact-us-now li {display: inline-block;float: left;line-height: 41px;font-size: 132%;color:#000;font-family:Arial;}
Замените его на:
#header-top .topheader-left ul.contact-us-now li {display: inline-block;float: left;line-height: 41px;font-size: 16px;color:#909090;font-family:Arial;}
Далее найдите следующую строку:
.topheader-right.col-md-7.col-sms-3.col-smb-6 .block-content li a {font-size:16px;color: #000;font-family: Arial;}
И замените ее на:
.topheader-right.col-md-7.col-sms-3.col-smb-6 .block-content li a {font-size:16px;color: #909090;font-family: Arial;}
Затем перейдите в файл HTML
найдите в нем строку:
<input id="search" type="text" name="q" value="" class="inputText search-string" placeholder="Поиск по магазину...">
и замените ее на:
<input id="search" type="text" name="q" value="" class="inputText search-string" placeholder="Поиск по магазину..." style="font-size:16px; color:#909090; font-family:Arial;">
2. В файле main.css добавьте строчку:
.header-right-inner a {color:#000;}
3. В файле main.css найдите:
#header {position: relative;padding: 5px 0 5px;background:#fff;}
Замените на:
#header {position: relative;padding: 15px 0 5px;background:#fff;}
4.В файле main.css
Найдите строку:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 8px 10px;font-size: 150%;font-weight: 700;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;position: relative;color: #FFF;border: 1px solid transparent;}
Замените ее на:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 10px 8px;font-size: 100%;font-weight: 700;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;position: relative;color: #FFF;border: 1px solid transparent;}
Найдите строки:
#menu .inner { width: 100%; background: #ff0000; }
Замените их на:
#menu .inner { height:75%; width: 100%; background: #ff0000; }
5.Опишите более подробно, в каких местах должны быть слайдеры, а в каких просто баннеры (картинки).
#9
Отправлено 26 Сентябрь 2016 - 16:36
Теперь помогите, пожалуйста, сделать шапку более симметричной (скрин 1):
1. выровнять отступы слева и справа на сером фоне
2. пункты верхнего меню также выровнять (чтобы они располагались в одну строку и находились вровень с верхними надписями)
3. разделы каталога также расположить по центру, сместив немного вправо (чтобы отступ слева и справа также был равным)
4. логотип расположить по центру белой шапки.
5. По поводу слайдов (скрин 2). Возможно ли расположить слайды вместо всех четырех картинок? С синхронной сменой кадров?
Заранее спасибо!
#10
Отправлено 27 Сентябрь 2016 - 14:40
НатальяЯ (26 Сентябрь 2016 - 16:36) писал:
Теперь помогите, пожалуйста, сделать шапку более симметричной (скрин 1):
1. выровнять отступы слева и справа на сером фоне
2. пункты верхнего меню также выровнять (чтобы они располагались в одну строку и находились вровень с верхними надписями)
3. разделы каталога также расположить по центру, сместив немного вправо (чтобы отступ слева и справа также был равным)
4. логотип расположить по центру белой шапки.
5. По поводу слайдов (скрин 2). Возможно ли расположить слайды вместо всех четырех картинок? С синхронной сменой кадров?
Заранее спасибо!
1), 2), 3) Не уверена что правильно Вас поняла, но данного отступ будет разный на разных разрешениях экрана. Прикрепила скриншот, то как выглядит Ваш на широкоформатном экарне. Т.е. насколько я понимаю Вы просматриваете сайт с небольшого разрешения, соответственно отступы небольшие. Можно выровнять сайт с краев (по синим полоскам на скриншоте ). Если Вас устроит такой вариант, то мы вышлем Вам инструкцию
4) В шаблоне HTML найдите блок
<div class="col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- Logo --> <div id="logo" class="col-sm-3 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-5 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR vPravoe %} {% FOR links %} <li><a href="{menu.vPravoe.links.URL}" {% IF menu.vPravoe.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.vPravoe.links.TITLE %}title="{menu.vPravoe.links.TITLE}"{% ENDIF %}>{menu.vPravoe.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div>и замените его на
<div class="col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- Logo --> <div id="logo" class="col-sm-4 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR vPravoe %} {% FOR links %} <li><a href="{menu.vPravoe.links.URL}" {% IF menu.vPravoe.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.vPravoe.links.TITLE %}title="{menu.vPravoe.links.TITLE}"{% ENDIF %}>{menu.vPravoe.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div>
5) Вы можете загрузить свои изображения в разделе Сайт-> Редактор шаблонов в левой колонке Добавить файлы. Затем в шаблоне HTML найдите блок
<div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /> </div>В нем 5 слайдов замените названия slide1.png, slide2.png, slide3.png, slide4.png, slide5.png на названия своих изображений.
Далее чтобы убрать голубой фон слайдера Вам необходимо в файле main.css найти блок
#breadcrumbs:before, #slideshow:before { background-image: url(http://meitan59.storeland.net/sl-bg.jpg); background-color: #3cabda; background-position: top center; background-repeat: no-repeat; bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: -80px; z-index: -1; }и замените его на
#breadcrumbs:before, #slideshow:before { background-position: top center; background-repeat: no-repeat; bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: -80px; z-index: -1; }
По поводу синхронной смены слайдов, не совсем Вас поняла. Прошу Вас уточнить данный вопрос.
#11
Отправлено 28 Сентябрь 2016 - 16:18
Цитата
С этим я более-менее разобралась. Теперь только пункты верхнего меню стали в две строки. Помогите, пожалуйста, их разместить в одну строку и по возможности чтобы они симметрично располагались (т.е. чтобы отступ от логотипа был одинаковым).
И можно как-то зафиксировать красную строку, а то она при прокрутке страницы перемещается.
Цитата
<div class="col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- Logo --> <div id="logo" class="col-sm-3 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-5 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR vPravoe %} {% FOR links %} <li><a href="{menu.vPravoe.links.URL}" {% IF menu.vPravoe.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.vPravoe.links.TITLE %}title="{menu.vPravoe.links.TITLE}"{% ENDIF %}>{menu.vPravoe.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div>и замените его на
<div class="col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> <!-- Logo --> <div id="logo" class="col-sm-4 col-xs-12"> <a title="{SETTINGS_STORE_NAME}" href="http://{NET_DOMAIN}/"> <img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- END: Logo --> <div class="header-right col-sm-4 col-xs-12"> <div class="header-right-inner"> <ul class="links"> {% FOR menu %} {% FOR vPravoe %} {% FOR links %} <li><a href="{menu.vPravoe.links.URL}" {% IF menu.vPravoe.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.vPravoe.links.TITLE %}title="{menu.vPravoe.links.TITLE}"{% ENDIF %}>{menu.vPravoe.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div>
Логотип встал на место, только по-моему, чуть увеличился в размере. Возможно, из-за этого разделы верхнего меню так расположились?
Цитата
<div> <img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /> </div> <div> <img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /> </div>В нем 5 слайдов замените названия slide1.png, slide2.png, slide3.png, slide4.png, slide5.png на названия своих изображений.
Далее чтобы убрать голубой фон слайдера Вам необходимо в файле main.css найти блок
#breadcrumbs:before, #slideshow:before { background-image: url(http://meitan59.storeland.net/sl-bg.jpg); background-color: #3cabda; background-position: top center; background-repeat: no-repeat; bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: -80px; z-index: -1; }и замените его на
#breadcrumbs:before, #slideshow:before { background-position: top center; background-repeat: no-repeat; bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: -80px; z-index: -1; }
По поводу синхронной смены слайдов, не совсем Вас поняла. Прошу Вас уточнить данный вопрос.
Фон слайдера я убрала. Свои слайды добавлю чуть позже.
Я спрашивала про возможность установки нескольких слайдеров (как показано на скриншоте), картинки которых менялись бы синхронно.
Еще раз спасибо!
#12
Отправлено 04 Октябрь 2016 - 15:41
#13
Отправлено 04 Октябрь 2016 - 16:09
1)
Найдите
div#header ul.links li {display: inline-block;padding-left: 12px;font-size: 17px;}замените на
div#header ul.links li {display: inline-block;padding-left: 10px;font-size: 15px;}
Далее в самом конце файла main.css добавьте
#header .header-right-inner .links {padding: 0; margin: 0;}
#14
Отправлено 04 Октябрь 2016 - 16:24
НатальяЯ (28 Сентябрь 2016 - 16:18) писал:
Для запрета фиксации в файле main.js удалите блок
// Функция фиксации шапки jQuery(document).ready(function($){ if($('#menu')){ $('#menu').stick_in_parent({ sticky_class: 'keep-menu' }); } });
#15
Отправлено 28 Октябрь 2017 - 20:49
1. Изменить шрифт на Comic Sans MS
2. Приветствие опустить чуть ниже, чтоб не залазило на верхнее меню
3. Изменить шрифт на Comic Sans MS
4. Изменить цвет двух областей на цвет как на слайдере
5. И как сделать "Поиск" более видимым?
Аккаунт SL-424967
#16
Отправлено 30 Октябрь 2017 - 17:06
VladimirIvanushkin (28 Октябрь 2017 - 20:49) писал:
1. Изменить шрифт на Comic Sans MS
2. Приветствие опустить чуть ниже, чтоб не залазило на верхнее меню
3. Изменить шрифт на Comic Sans MS
4. Изменить цвет двух областей на цвет как на слайдере
5. И как сделать "Поиск" более видимым?
Аккаунт SL-424967
Здравствуйте.
1-3) Мы не можем найти вариант данного шрифта, поддерживающий кириллицу. Если у Вас есть ссылка, пришлите пожалуйста, ее
2) В шаблоне main.css Вам нужно заменить код:
.hi { clear: both; font-size: 15px; line-height: 5px; padding-top: 10px; text-align: right; font-weight: bold; }
на
.hi { font-size: 15px; line-height: 5px; padding-top: 10px; text-align: right; font-weight: bold; }
4) Вы имеете ввиду голубой цвет?
5) В шаблоне main.css замените код:
#header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText { font-size: 12px; height: auto; line-height: 20px; width: 235px; padding: 10px 20px; border: 1px solid #d8d8d8; border-radius: 22px; -webkit-border-radius: 22px; -moz-border-radius: 22px; }на
#header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText { font-size: 12px; height: auto; line-height: 20px; width: 235px; padding: 10px 20px; border: 1px solid #020202; border-radius: 22px; -webkit-border-radius: 22px; -moz-border-radius: 22px; }
#17
Отправлено 30 Октябрь 2017 - 19:16
MikDark (30 Октябрь 2017 - 17:06) писал:
1-3) Мы не можем найти вариант данного шрифта, поддерживающий кириллицу. Если у Вас есть ссылка, пришлите пожалуйста, ее
2) В шаблоне main.css Вам нужно заменить код:
.hi { clear: both; font-size: 15px; line-height: 5px; padding-top: 10px; text-align: right; font-weight: bold; }
на
.hi { font-size: 15px; line-height: 5px; padding-top: 10px; text-align: right; font-weight: bold; }
4) Вы имеете ввиду голубой цвет?
5) В шаблоне main.css замените код:
#header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText { font-size: 12px; height: auto; line-height: 20px; width: 235px; padding: 10px 20px; border: 1px solid #d8d8d8; border-radius: 22px; -webkit-border-radius: 22px; -moz-border-radius: 22px; }на
#header .header-right .header-right-inner #search_mini_form .form-search input.inputText, #menu .nav-right .block-search #search_mini_form2 .form-search input.inputText { font-size: 12px; height: auto; line-height: 20px; width: 235px; padding: 10px 20px; border: 1px solid #020202; border-radius: 22px; -webkit-border-radius: 22px; -moz-border-radius: 22px; }
1-3. http://allshrift.ru/...comicsansms.zip
4. светло-розовый, как фон первого слайдера
#18
Отправлено 31 Октябрь 2017 - 07:23
1,3. Инструкция по подключению шрифта:
https://forum.storel...дартные-шрифты/
Сам шрифт укажите тексту в разделе Сайт - Редактор шаблонов - main.css - блокам:
#custommenu ul.mainnav li.level0 > a {display: block;padding: -1px 10px;font-size: 150%;font-weight: bold;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;position: relative;color: #FFF;border: 6px solid transparent;}и
#header-top .topheader-right .sns-quickaccess ul.links li a { font-size: 17px; font-weight: bold; }
4. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#header-top { height: 41px; line-height: 36px; border-top: 5px solid #FFFFFF; position: relative; background: #FFFFFF; }
замените на:
#header-top { height: 41px; line-height: 36px; border-top: 5px solid #FFF4F9; position: relative; background: #FFF4F9; }
далее найдите:
#header {position: relative;padding: 30px 0 10px;}
замените на:
#header {position: relative;padding: 30px 0 10px;background: #FFF4F9;}
#19
Отправлено 01 Ноябрь 2017 - 18:17
Vaccina (31 Октябрь 2017 - 07:23) писал:
1,3. Инструкция по подключению шрифта:
https://forum.storel...дартные-шрифты/
Сам шрифт укажите тексту в разделе Сайт - Редактор шаблонов - main.css - блокам:
#custommenu ul.mainnav li.level0 > a {display: block;padding: -1px 10px;font-size: 150%;font-weight: bold;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;position: relative;color: #FFF;border: 6px solid transparent;}и
#header-top .topheader-right .sns-quickaccess ul.links li a { font-size: 17px; font-weight: bold; }
4. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#header-top { height: 41px; line-height: 36px; border-top: 5px solid #FFFFFF; position: relative; background: #FFFFFF; }
замените на:
#header-top { height: 41px; line-height: 36px; border-top: 5px solid #FFF4F9; position: relative; background: #FFF4F9; }
далее найдите:
#header {position: relative;padding: 30px 0 10px;}
замените на:
#header {position: relative;padding: 30px 0 10px;background: #FFF4F9;}
Спасибо за помощь)
Темы с аналогичным тегами шапка верхнее меню, логотип
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Маркетплейс →
Другое →
Заменить Логотип Соц СетейАвтор Гость_ya.r.ik_* , 21 февр. 2021 логотип, сойсети, заменить |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Рассвет →
Как Изменить Расположение Объектов На Первом ЭкранеАвтор Гость_DMC_* , 19 окт. 2018 шапка, слайдер, логотип |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Вопросы общие для всех шаблонов →
Главная →
Как Изменить Расположение Объектов В ШапкеАвтор Гость_DMC_* , 15 окт. 2018 шапка, логотип |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лето →
Изменение общей стилистики →
Расположение Объектов В ШапкеАвтор Гость_DMC_* , 14 окт. 2018 шапка, логотип, слайдер |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лето →
Изменение общей стилистики →
Расположение Объектов В ШапкеАвтор Гость_DMC_* , 14 окт. 2018 шапка, логотип, слайдер |
|
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных