Аккаунт SL-458861
Шаблон "Рассвет"
Проплатил первый месяц тарифа "Базовый" дабы ваш сервис очень понравился, хочу в дальнейшем пользоваться всеми вашими услугами
Здравствуйте! Пытался разобраться что к чему, что то получилось сделать самому, в итоге запутался в коде
Пожалуйста помогите расставить объекты на первом экране так, как указано на примере (Фото прилагается)
Или же подскажите что нужно прописывать в HTML, CSS
1. В шапке "КОРЗИНА" удалить, поскольку на ее место встанет "КОРЗИНА" из header-midle
2. Телефон удалить
1. Логотип сместить в центр верхней части шапки
3. Убрать вторую шапку "header-midle" но оставить Меню и сместить его в верхнюю часть шапки разделив его по сторонам от логотипа
4. Слайдер - привязать к нижней части шапки, а не к началу экрана(пытался сделать его дочерним к шапке, фиаско)
5. Прошу укажите где и в какой строке находится "расположение" кнопки и надписи на слайдере??? Хочу сместить их немного правее
6. Пожалуйста напишите код как добавить еще один "area текст" между "ТЕКСТОМ" и "КНОПКОЙ" в слайдере но меньшего размера (Под описание)
0
Как Изменить Расположение Объектов На Первом Экране
Автор DMC, 19 окт. 2018 02:29
шапка слайдер логотип
В теме одно сообщение
#1
Отправлено 19 Октябрь 2018 - 02:29
#2
Отправлено 26 Октябрь 2018 - 12:00
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
замените на:
далее зайдите в раздел Сайт - Меню - создайте блок меню с переменной header2 это будет правая часть меню и измените пункты меню на необходимые.
далее зайдитев main.css - найдите:
замените на:
далее найдите:
замените на:
далее найдите и удалите:
далее найдите:
замените на:
далее найдите:
замените на:
далее найдите:
замените на:
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Шапка --> <div id="header"> <div class="header-top"> <div class="container"> <div class="header-left"> <div class="logo col-md-2 col-xs-6"> <a href="{INDEX_PAGE_URL}" title="{SETTINGS_STORE_NAME}"> <img src="{ASSETS_IMAGES_PATH}logo.png?design=sunrise" alt="{SETTINGS_STORE_NAME}"> </a> </div> <!-- Телефон и Режим работы --> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_WORK_TIME %} <div class="block phone"> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}"><span>{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</span></a> <div class="time">{SETTINGS_STORE_WORK_TIME}</div> </div> {% ENDIF %} </div> <div class="header-right"> <!-- Меню --> <div class="block menu"> <div class="title" title="Меню"><i class="fa fa-home"></i></div> <div class="dropdown"> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%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 account"> <div class="title" title="Личный кабинет"><i class="fa fa-user"></i></div> <div class="dropdown"> <ul class="links"> {% IFNOT CLIENT_IS_LOGIN %} <li><a href="{USER_LOGIN_URL}" title="Вход в личный кабинет"><i class="fa fa-unlock-alt"></i>Вход</a></li> <li><a href="{USER_REGISTER_URL}" title="Регистрация"><i class="fa fa-user-plus"></i>Регистрация</a></li> {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a href="{COMPARE_URL}"><i class="fa fa-retweet"></i>Сравнение</a></li>{% ENDIF %} {% ELSE %} <li><a href="{USER_SETTINGS_URL}"><i class="fa fa-user"></i>Мой кабинет</a></li> <li><a href="{FAVORITES_URL}"><i class="fa fa-heart"></i>Избранное</a></li> <li><a href="{USER_HISTORY_LIST_URL}"><i class="fa fa-history"></i>История заказов</a></li> {% IF TARIFF_FEATURE_GOODS_COMPARE && SETTINGS_COMPARE_DISABLE=0 %}<li><a href="{COMPARE_URL}"><i class="fa fa-retweet"></i>Сравнение</a></li>{% ENDIF %} <li><a href="{USER_LOGOUT_URL}"><i class="fa fa-unlock-alt"></i>Выход</a></li> {% ENDIF %} </ul> </div> </div> <!-- Поиск --> <div class="block search"> <form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину"> <input type="hidden" name="goods_search_field_id" value="0"> <input type="text" name="q" value="{SEARCH_QUERY}" class="search-string" placeholder="Поиск по магазину..." autocomplete="off"> <span class="search-submit"><button type="submit" title="Искать" class="fa fa-search"></button></span> </form> </div> <!-- Корзина --> <div class="block cart {% IFNOT CART_COUNT_TOTAL = 0 %}have-items{% ENDIF %} {% IF MOD_LNAME = cart %}cart-page{% ENDIF %}"> <div class="title"> <a href="{CART_URL}" title="Перейти в корзину"><i class="fa fa-shopping-bag"> </i><span class="hide">Корзина</span> <span class="tc"><span class="hide">(</span><span class="cart-count" data-count="{CART_COUNT_TOTAL}">{CART_COUNT_TOTAL}</span><span class="hide">)</span></span></a> </div> <div class="dropdown-cart"> <div class="cart-content"> {% IF cart_count_empty %} <div class="cart-empty">Ваша корзина пуста</div> {% ELSE %} <ul class="cart-products-list"> {% FOR cart_items %} <li class="item"> <a data-href="{cart_items.ORDER_LINE_DELETE_URL}" data-count="{cart_items.ORDER_LINE_QUANTITY}" title="Удалить позицию" class="remove" onclick="removeFromCart($(this))"></a> <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=sunrise{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}" alt="{cart_items.GOODS_NAME}" class="goods-image-icon"></a> <div class="product-details"> <a href="{cart_items.GOODS_URL}" title="{cart_items.GOODS_NAME}" class="product-name">{cart_items.GOODS_NAME}</a> {% IFNOT cart_items.distinctive_properties_empty %}<div class="product-mod">({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</div>{% ENDIF %} <div class="product-price"> <span class="quantity">{cart_items.ORDER_LINE_QUANTITY} x </span> <span class="price {CURRENCY_CHAR_CODE}" data-price="{cart_items.GOODS_MOD_PRICE_NOW}">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span> </div> </div> </li> {% ENDFOR %} </ul> {% FOR cart_sum %} <div class="subtotal"> <span class="label">Скидка:</span> <span class="price">{CART_SUM_DISCOUNT_PERCENT}%</span> <br/> <span class="label">Итого:</span> <span class="price {CURRENCY_CHAR_CODE} total-sum">{cart_sum.NOW_WITH_DISCOUNT | money_format}</span> </div> {% ENDFOR %} <div class="actions"> <a class="button" title="Очистить корзину" data-href="{CART_TRUNCATE_URL}" onclick="removeFromCartAll($(this))">Очистить</a> <a class="button button2" title="Перейти к оформлению заказа" href="{CART_URL}">В корзину</a> </div> {% ENDIF %} </div> </div> </div> </div> </div> </div> <!-- Меню Каталог в шапке --> <div class="header-middle"> <div class="container"> <div id="custommenu" class="col-md-10 col-xs-12"> <!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} --> {% IF MENU_CATALOG %} <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_VISIBLE_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}" itemprop="url"><span>{catalog_full.NAME}</span></a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </ul> {% ELSE %} <!-- Меню в шапке --> <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> {% ENDIF %} </div> <!-- Адаптивный каталог --> <div id="mommenu" class="menu-offcanvas col-xs-6"> <span class="btn-navbar" title="Меню"><span class="title">Меню</span><i class="fa fa-bars"></i></span> </div> </div> </div> </div> <!-- /END Шапка --> <!-- Slider Слайдер --> {% IF index_page %} <div id="slideshow"> <div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div> <div class="slide"></div> <div class="text"> <div class="title">Новая коллекция</div> <a href="{CATALOG_URL}" class="button big">Перейти в каталог</a> </div> <div class="image"> <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/> </div> </div> {% ENDIF %} <!-- /END Slider Слайдер -->
замените на:
<!-- Шапка --> <div id="header"> <div class="header-middle"> <div class="container"> <div id="custommenu" class="col-md-3 col-xs-12"> <!-- Меню в шапке --> <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <div class="logo col-md-3 col-xs-6"> <a href="{INDEX_PAGE_URL}" title="{SETTINGS_STORE_NAME}"> <img src="{ASSETS_IMAGES_PATH}logo.png?design=sunrise" alt="{SETTINGS_STORE_NAME}"> </a> </div> <div id="custommenu" class="col-md-3 col-xs-12"> <!-- Меню в шапке --> <ul class="mainnav" itemscope itemtype="https://schema.org/SiteNavigationElement"> {% FOR menu %} {% FOR header2 %} {% FOR links %} <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %} itemprop="url">{menu.header2.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> <!-- Поиск --> <div class="search col-md-3 col-xs-12"> <form id="search_mini_form" action="{SEARCH_URL}" method="get" title="Поиск по магазину"> <input type="hidden" name="goods_search_field_id" value="0"> <input type="text" name="q" value="{SEARCH_QUERY}" class="search-string" placeholder="Поиск по магазину..." autocomplete="off"> <span class="search-submit"><button type="submit" title="Искать" class="fa fa-search"></button></span> </form> </div> <!-- Адаптивный каталог --> <div id="mommenu" class="menu-offcanvas col-xs-6"> <span class="btn-navbar" title="Меню"><span class="title">Меню</span><i class="fa fa-bars"></i></span> </div> </div> </div> </div> <!-- /END Шапка --> <!-- Slider Слайдер --> {% IF index_page %} <div id="slideshow"> <div class="preloading"><div class="folding-cube"><div class="cube1 cube"></div><div class="cube2 cube"></div><div class="cube4 cube"></div><div class="cube3 cube"></div></div></div> <div class="slide"></div> <div class="text"> <div class="title">Новая коллекция</div> <div class="inder_title">Описание баннера под заголовоком</div> <a href="{CATALOG_URL}" class="button big">Перейти в каталог</a> </div> <div class="image"> <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=sunrise"/> </div> </div> {% ENDIF %} <!-- /END Slider Слайдер -->
далее зайдите в раздел Сайт - Меню - создайте блок меню с переменной header2 это будет правая часть меню и измените пункты меню на необходимые.
далее зайдитев main.css - найдите:
/* Поиск */ .block.search #search_mini_form {position: relative;width: 200px;height: 40px;background: #fff;margin: 0 15px;} .block.search #search_mini_form .search-string {font-size: 14px;width: 100%;height: 100%;background: transparent;border: none;color: #22121e;padding: 0 30px 0 5px;border-bottom: 1px solid #e5e5e5;} .block.search #search_mini_form .search-string:focus {border-bottom: 1px solid #8C2C29;} .block.search #search_mini_form .search-submit {display: inline-block;position: absolute;top: 0;right: 0;height: 98%;background-color: #fff;z-index: 9;font-size: 20px;font-weight: normal;color: #9c9c9c;text-align: center;white-space: nowrap;cursor: pointer;} .block.search #search_mini_form .search-submit button {border: 0;outline: 0;background: transparent;color: #8C2C29;cursor: pointer;}
замените на:
/* Лого */ .logo img {max-height: 78px;display: block; margin: 0 auto;} /* Поиск */ .search #search_mini_form {position: relative;width: 200px;height: 40px;background: #fff;margin: 19px 15px 0 15px;} .search #search_mini_form .search-string {font-size: 14px;width: 100%;height: 100%;background: transparent;border: none;color: #22121e;padding: 0 30px 0 5px;border-bottom: 1px solid #e5e5e5;} .search #search_mini_form .search-string:focus {border-bottom: 1px solid #8C2C29;} .search #search_mini_form .search-submit {display: inline-block;position: absolute;top: 0;right: 0;height: 98%;background-color: #fff;z-index: 9;font-size: 20px;font-weight: normal;color: #9c9c9c;text-align: center;white-space: nowrap;cursor: pointer;line-height: 40px;} .search #search_mini_form .search-submit button {border: 0;outline: 0;background: transparent;color: #8C2C29;cursor: pointer;}
далее найдите:
#custommenu .mainnav {display: inline-block;position: static;vertical-align: middle;overflow: hidden;max-height: 80px;margin: 0;padding: 0;list-style: none;list-style-position: inside;}
замените на:
#custommenu .mainnav {display: inline-block;position: static;vertical-align: middle;overflow: hidden;max-height: 40px;margin: 0;padding: 0;list-style: none;list-style-position: inside;}
далее найдите и удалите:
.index #header {position: absolute;width: 100%;top: 0;right: 0;left: 0;background-color: rgba(220, 220, 220, 0.5);} .index #header .header-middle {background-color: transparent;}
далее найдите:
#header {position: absolute;border: 0;z-index: 99;-moz-transition: all 0.8s ease 0s;-webkit-transition: all 0.8s ease 0s;-ms-transition: all 0.8s ease 0s;-o-transition: all 0.8s ease 0s;transition: all 0.8s ease 0s;}
замените на:
#header {position: relative;}
далее найдите:
.header-middle {position: relative;background-color: #dcdcdc;padding: 10px 0;}
замените на:
.header-middle {position: relative;background-color: #ffffff;padding: 10px 0;}
далее найдите:
#slideshow .text {position: absolute;top: 60%;right: 10%;padding: 0 15px;width: 70%;text-align: right;} #slideshow .text .title {color: #fff;margin-bottom: 15px;font-weight: 500;font-size: 32px;text-transform: uppercase;}
замените на:
#slideshow .text {position: absolute;bottom: 10%;right: 10%;padding: 0 15px;width: 70%;text-align: right;} #slideshow .text .title {color: #fff;margin-bottom: 15px;font-weight: 500;font-size: 32px;text-transform: uppercase;} #slideshow .text .inder_title {color: #ffffff;margin-bottom: 10px;font-size: 18px;} #slideshow .text .button {border-color: #ffffff;color: #ffffff;}
Темы с аналогичным тегами шапка, слайдер, логотип
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных