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


Как Изменить Расположение Объектов На Первом Экране

шапка слайдер логотип

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

#1 DMC

DMC

    Пользователь

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

Отправлено 19 Октябрь 2018 - 02:29

Аккаунт SL-458861
Шаблон "Рассвет"
Проплатил первый месяц тарифа "Базовый" дабы ваш сервис очень понравился, хочу в дальнейшем пользоваться всеми вашими услугами

Здравствуйте! Пытался разобраться что к чему, что то получилось сделать самому, в итоге запутался в коде
Пожалуйста помогите расставить объекты на первом экране так, как указано на примере (Фото прилагается)
Или же подскажите что нужно прописывать в HTML, CSS

1. В шапке  "КОРЗИНА" удалить, поскольку на ее место встанет "КОРЗИНА" из header-midle
2. Телефон удалить
1. Логотип сместить в центр верхней части шапки
3. Убрать вторую шапку "header-midle" но оставить Меню и сместить его в верхнюю часть шапки разделив его по сторонам от логотипа
4. Слайдер - привязать к нижней части шапки, а не к началу экрана(пытался сделать его дочерним к шапке, фиаско)
5. Прошу укажите где и в какой строке находится "расположение" кнопки и надписи на слайдере??? Хочу сместить их немного правее
6. Пожалуйста напишите код как добавить еще один "area текст" между "ТЕКСТОМ" и "КНОПКОЙ" в слайдере но меньшего размера (Под описание)

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

  • шаблон.jpg


#2 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 26 Октябрь 2018 - 12:00

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

Зайдите в раздел Сайт - Редактор шаблонов - 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">&nbsp;</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;}

DMC Design MIDI Controller.png





Темы с аналогичным тегами шапка, слайдер, логотип

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

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