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


Нужна Помощь В Оформлении Главной Страницы

шапка верхнее меню логотип

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

#1 НатальяЯ

НатальяЯ

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

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

Отправлено 06 Сентябрь 2016 - 16:26

Добрый день!
Помогите, пожалуйста, внести некоторые изменения в дизайн сайта:
1. Нужно удалить голубую полоску сверху.
2. Отмеченную область сделать светло-серой. Справа расположить: иконку лупы, корзины, "Личный кабинет".
Слева: надпись "Листать каталог" (попутный вопрос: куда и как можно загрузить флеш-каталог?).
3. Логотип расположить по центру. Слева от него: разделы меню "О нас"; "Возможности"; "Контакты". Справа: "Советы косметолога"; "Заказ. Доставка. Оплата".
4. Виджеты соцсетей и область поиска удалить.
5. Уменьшить ширину данной области НА 0,6 см.
6. Фон каталога сделать красным. Высота 1,4 см. Шрифт Arial, цвет белый.
Заранее огромное спасибо тому, кто откликнется! :rolleyes:

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

  • Изменения в оформлении.jpg


#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Сентябрь 2016 - 05:54

В main.css найдите:
#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 НатальяЯ

НатальяЯ

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

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

Отправлено 07 Сентябрь 2016 - 16:24

Спасибо за оперативный ответ! Однако пока еще не все получилось.
1. В самом верху слева нужно убрать е-мэйл и телефон. Вместо них разместить надпись "Листать каталог" (с этим буду разбираться позже).
2. Справа сверху: Поиск, корзина, "Личный кабинет"
3. Пункты верхнего меню расположить с двух сторон от логотипа в строчку. Слева: "О нас", "Ваши возможности", "Контакты"; справа: "Советы косметолога", "Заказ. Доставка. Оплата". Шрифт: Arial, черный.
4. Высота шапки (белая часть) 3 см.
5. Из меню каталога убрать поиск и корзину.
6. Высота меню каталога 1,5 см.
7. Шрифт сделать более жирным.
Еще раз огромное спасибо за помощь!

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

  • 2. Изменения в оформлении.jpg


#4 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 08 Сентябрь 2016 - 19:50

Просмотр сообщенияНатальяЯ (07 Сентябрь 2016 - 16:24) писал:

Спасибо за оперативный ответ! Однако пока еще не все получилось.
1. В самом верху слева нужно убрать е-мэйл и телефон. Вместо них разместить надпись "Листать каталог" (с этим буду разбираться позже).
2. Справа сверху: Поиск, корзина, "Личный кабинет"
3. Пункты верхнего меню расположить с двух сторон от логотипа в строчку. Слева: "О нас", "Ваши возможности", "Контакты"; справа: "Советы косметолога", "Заказ. Доставка. Оплата". Шрифт: Arial, черный.
4. Высота шапки (белая часть) 3 см.
5. Из меню каталога убрать поиск и корзину.
6. Высота меню каталога 1,5 см.
7. Шрифт сделать более жирным.
Еще раз огромное спасибо за помощь!
Здравствуйте.
Изменения Вам произвел, проверьте.

#5 НатальяЯ

НатальяЯ

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

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

Отправлено 09 Сентябрь 2016 - 16:44

Спасибо огроменное! Хочется довести все до ума, поэтому попрошу помочь внести еще кое-какие изменения:
1. в верхней серой строке вместо "Вход" и "Регистрация" написать "Личный кабинет";
2. где можно заменить иконки корзины и лупы? не нашла данные файлы в изображениях;
3. красный кружочек с указанием числа товаров в корзине уменьшить;
4. шрифт надписей "Личный кабинет" и "Листать каталог" заменить на Arial, цвет черный.
5. пункты верхнего меню разместить в СТРОЧКУ по обе стороны логотипа;
6. красную строку сузить.
Еще раз спасибо за помощь и терпение!

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

  • 3. Изменения в оформлении.jpg


#6 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 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 НатальяЯ

НатальяЯ

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

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

Отправлено 16 Сентябрь 2016 - 16:52

Добрый день! Всё замечательно, спасибо!
Помогите, пожалуйста, еще чуть-чуть доработать:
1. Надписи "Листать каталог", "Поиск по магазину", "Личный кабинет" написать шрифтом Arial, 11 кегль, цвет серый.
2. Пункты верхнего меню (слева и справа) - написать черным.
3. Увеличить высоту белой шапки до 3-х см.
4. Уменьшить размер шрифта и расстояние от краев (все пункты каталога не входят). И саму красную полосочку сделать поуже (как выделено черной рамкой).
5. Подскажите, пожалуйста, возможно ли поменять слайдер. Разместить несколько слайдеров меньшего раздела (как на скрине).
Заранее огромное СПАСИБО!

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

  • 4. Изменения в оформлении.jpg
  • 4.2. Изменения в оформлении.jpg


#8 Razon

Razon

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

  • Модератоpы
  • 321 сообщений

Отправлено 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 НатальяЯ

НатальяЯ

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

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

Отправлено 26 Сентябрь 2016 - 16:36

Все получилось, спасибо!
Теперь помогите, пожалуйста, сделать шапку более симметричной (скрин 1):
1. выровнять отступы слева и справа на сером фоне
2. пункты верхнего меню также выровнять (чтобы они располагались в одну строку и находились вровень с верхними надписями)
3. разделы каталога также расположить по центру, сместив немного вправо (чтобы отступ слева и справа также был равным)
4. логотип расположить по центру белой шапки.

5. По поводу слайдов (скрин 2). Возможно ли расположить слайды вместо всех четырех картинок? С синхронной сменой кадров?

Заранее спасибо!

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

  • 5.1. Изменения в оформлении.jpg
  • 5.2. Изменения в оформлении.jpg


#10 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 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 НатальяЯ

НатальяЯ

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

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

Отправлено 28 Сентябрь 2016 - 16:18

Цитата

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;
}

По поводу синхронной смены слайдов, не совсем Вас поняла. Прошу Вас уточнить данный вопрос.

Фон слайдера я убрала. Свои слайды добавлю чуть позже.
Я спрашивала про возможность установки нескольких слайдеров (как показано на скриншоте), картинки которых менялись бы синхронно.

Еще раз спасибо!

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

  • 6 Изменения в оформлении.jpg


#12 НатальяЯ

НатальяЯ

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

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

Отправлено 04 Октябрь 2016 - 15:41

Ответьте уже кто-нибудь, пожалуйста!

#13 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 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 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 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 VladimirIvanushkin

VladimirIvanushkin

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

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

Отправлено 28 Октябрь 2017 - 20:49

Здравствуйте, нужно изменить:
1. Изменить шрифт на Comic Sans MS
2. Приветствие опустить чуть ниже, чтоб не залазило на верхнее меню
3. Изменить шрифт на Comic Sans MS
4. Изменить цвет двух областей на цвет как на слайдере
5. И как сделать "Поиск" более видимым?


Аккаунт SL-424967

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

  • Безымянный232.png


#16 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 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 VladimirIvanushkin

VladimirIvanushkin

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

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

Отправлено 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 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 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 VladimirIvanushkin

VladimirIvanushkin

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

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

Отправлено 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;}



Спасибо за помощь)





Темы с аналогичным тегами шапка верхнее меню, логотип

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

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