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


Изменение Внешнего Вида Главной Страницы


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

#1 dmitriy750

dmitriy750

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

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

Отправлено 11 Январь 2017 - 11:51

Доброго времени суток.
Прошу помочь с данными действиями:
1.Необходимо переместить блок ("Бесплатная доставка" "Прием заказов" и т.д.) под баннер.
2. Логотип разметить в верхнем левом углу, а телефон в верхнем правом углу.
3. Убрать значок "ЛК", и корзину переместить под номер телефона в верхний правый угол.
4. Как изменять цвет фона и текста в меню.

Надеюсь смог объяснить что необходимо сделать)

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

  • скрин.png


#2 dmitriy750

dmitriy750

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

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

Отправлено 12 Январь 2017 - 11:18

Добрый день, мне сможет кто то помочь в решении данных вопросов?

#3 dmitriy750

dmitriy750

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

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

Отправлено 15 Январь 2017 - 12:38

Аууу.. прошло уже 4 дня, может кто то из поддержки сможет мне помочь с решением вопроса?

#4 MikDark

MikDark

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

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

Отправлено 18 Январь 2017 - 12:39

Просмотр сообщенияdmitriy750 (11 Январь 2017 - 11:51) писал:

Доброго времени суток.
Прошу помочь с данными действиями:
1.Необходимо переместить блок ("Бесплатная доставка" "Прием заказов" и т.д.) под баннер.
2. Логотип разметить в верхнем левом углу, а телефон в верхнем правом углу.
3. Убрать значок "ЛК", и корзину переместить под номер телефона в верхний правый угол.
4. Как изменять цвет фона и текста в меню.

Надеюсь смог объяснить что необходимо сделать)

Здравствуйте. Для начала переместим баннеры. Для этого в шаблоне HTML Вам нужно вырезать код:
<div class="container">
		  <div class="row">
			<ul class="info-list">
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-truck"></i>
				  </div>
				  <div class="info-content">
					<h6>Бесплатная доставка</h6>
					<p class="text-italic">Доставка по городу Бесплатна!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-gift"></i>
				  </div>
				  <div class="info-content">
					<h6>Прием заказов 24/7</h6>
					<p class="text-italic">Оформите заказ прямо сейчас!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-money"></i>
				  </div>
				  <div class="info-content">
					<h6>100% гарантия возврата</h6>
					<p class="text-italic">Возврат товара в течение 30 дней!</p>
				  </div>
				</a>
			  </li>
			</ul>
		  </div>
		</div>

и поставить его перед:
<!-- Хлебные крошки -->
	{% IFNOT index_page %}
	<div class="breadcrumbs">
	  <div class="container">


#5 dmitriy750

dmitriy750

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

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

Отправлено 18 Январь 2017 - 14:03

Сделал. можно по следующим пунктам ?

#6 MikDark

MikDark

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

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

Отправлено 18 Январь 2017 - 15:02

Просмотр сообщенияdmitriy750 (18 Январь 2017 - 14:03) писал:

Сделал. можно по следующим пунктам ?

Изменения Вам произвели, посмотрите, пожалуйста

#7 dmitriy750

dmitriy750

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

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

Отправлено 18 Январь 2017 - 15:06

Посмотрел, только у меня все ниже слайдера куда то пропало?

#8 dmitriy750

dmitriy750

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

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

Отправлено 18 Январь 2017 - 15:15

Спасибо, уже сам все поправил.

#9 dmitriy750

dmitriy750

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

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

Отправлено 18 Январь 2017 - 16:04

И по этой же теме, можно внести пару изменений.
Сместить логотип ближе к левому краю
Номер телефона сделать вровень с корзиной ( убрать надпись телефон и оставить только иконку трубки, увеличить шрифт)
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.

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

  • Screenshot.png


#10 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 18 Январь 2017 - 16:14

Просмотр сообщенияdmitriy750 (18 Январь 2017 - 16:04) писал:

И по этой же теме, можно внести пару изменений.
Сместить логотип ближе к левому краю
Номер телефона сделать вровень с корзиной ( убрать надпись телефон и оставить только иконку трубки, увеличить шрифт)
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.

Здравствуйте.
В данном случае вам необходимо произвести следующие изменения:
В шаблоне main.css найдите, пожалуйста, данный код:

#header .logo {
	text-align: center;
}


И замените его во этим вот кодом:

#header .logo {
	text-align: left;
	margin-left: -4%;
}


После чего в том же шаблоне найдите, пожалуйста, вот этот код:

.block-phone {
	display: inline-block;
	float: none;
	width: 200px;
	line-height: 40px;
	margin-left: 30px;
	text-transform: uppercase;
}

И замените его вот этим кодом:

.block-phone {
	display: inline-block;
	float: none;
	width: 200px;
	line-height: 40px;
	margin-left: 75px;
	text-transform: uppercase;
}


Далее найдите, пожалуйста, данный код:

.block-cart {
	display: table-cell;
	position: relative;
	float: right;
	vertical-align: top;
	padding: 0 10px;
	text-align: left;
}

И замените его этим вот кодом:

.block-cart {
	display: table-cell;
	position: relative;
	float: right;
	vertical-align: top;
	padding: 0 10px;
	text-align: left;
	margin-right: -10px;
}


#11 dmitriy750

dmitriy750

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

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

Отправлено 18 Январь 2017 - 20:31

Сместить логотип ближе к левому краю
Номер телефона сделать вровень с корзиной ( убрать надпись телефон и оставить только иконку трубки, увеличить шрифт)
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
По этому списку можно еще подсказать по пунктам:
1.
убрать надпись телефон и оставить только иконку трубки, увеличить шрифт
2.
Сделать в шапке белый фон
3.И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.

#12 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 18 Январь 2017 - 20:50

Просмотр сообщенияdmitriy750 (18 Январь 2017 - 20:31) писал:

Сместить логотип ближе к левому краю
Номер телефона сделать вровень с корзиной ( убрать надпись телефон и оставить только иконку трубки, увеличить шрифт)
Сделать в шапке белый фон
И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.
По этому списку можно еще подсказать по пунктам:
1.
убрать надпись телефон и оставить только иконку трубки, увеличить шрифт
2.
Сделать в шапке белый фон
3.И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.

Здравствуйте.
В данном случае попробуйте, пожалуйста, произвести следующие изменения:
В шаблоне main.css найдите, пожалуйста, данный код, чтобы применить белый цвет к шапке вашего сайта:

#header {
	position: relative;
	background-color: #2e2f33;
}

И замените его во этим вот кодом:

#header {
	position: relative;
	background-color: #ffffff;
}


#13 dmitriy750

dmitriy750

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

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

Отправлено 18 Январь 2017 - 21:11

3.И так же под слайдером теперь имеется информативный блок, можно сделать так чтобы он отображался только на главной странице.

#14 Vaccina

Vaccina

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

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

Отправлено 19 Январь 2017 - 03:41

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

Обнаружила у вас синтаксическую ошибку, зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<a href="http://{NET_DOMAIN}/page/Доставка" title=Gucci"><strong>Gucci</strong></a>
		   

замените на:
<a href="http://{NET_DOMAIN}/page/Доставка" title="Gucci"><strong>Gucci</strong></a>

По вашему вопросу, в шаблоне HTML найдите:
<div class="header-info" style="{% IF USER_INTERACTION_HEADER_INFO_DISPLAY = open %}display: none;{% ELSE %}display: block;{% ENDIF %}">
		<div class="container">
		  <div class="row">
			<ul class="info-list">
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-truck"></i>
				  </div>
				  <div class="info-content">
					<h6>Бесплатная доставка</h6>
					<p class="text-italic">Доставка по городу Бесплатна!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-gift"></i>
				  </div>
				  <div class="info-content">
					<h6>Прием заказов 24/7</h6>
					<p class="text-italic">Оформите заказ прямо сейчас!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-money"></i>
				  </div>
				  <div class="info-content">
					<h6>100% гарантия возврата</h6>
					<p class="text-italic">Возврат товара в течение 30 дней!</p>
				  </div>
				</a>
			  </li>
			</ul>
		  </div>
		</div>
	  </div>

замените на:
{% IF index_page %}
<div class="header-info" style="{% IF USER_INTERACTION_HEADER_INFO_DISPLAY = open %}display: none;{% ELSE %}display: block;{% ENDIF %}">
		<div class="container">
		  <div class="row">
			<ul class="info-list">
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-truck"></i>
				  </div>
				  <div class="info-content">
					<h6>Бесплатная доставка</h6>
					<p class="text-italic">Доставка по городу Бесплатна!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-gift"></i>
				  </div>
				  <div class="info-content">
					<h6>Прием заказов 24/7</h6>
					<p class="text-italic">Оформите заказ прямо сейчас!</p>
				  </div>
				</a>
			  </li>
			  <li class="info-item">
				<a href="http://{NET_DOMAIN}/page/Доставка">
				  <div class="info-icon">
					<i class="fa fa-money"></i>
				  </div>
				  <div class="info-content">
					<h6>100% гарантия возврата</h6>
					<p class="text-italic">Возврат товара в течение 30 дней!</p>
				  </div>
				</a>
			  </li>
			</ul>
		  </div>
		</div>
	  </div>
{% ENDIF %}


#15 dmitriy750

dmitriy750

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

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

Отправлено 19 Январь 2017 - 10:00

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

#16 dmitry86

dmitry86

    Новичок

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

Отправлено 07 Май 2017 - 01:01

Здравствуйте!
Просьба внести похожие изменения либо сообщить как это сделать самому:
1. в верхнем левом углу разместить логотип, дальше поиск по магазину, телефон, корзину;
2. верхнюю шапку, содержащую меню  "Главная", "Доставка", "Корзина", "Каталог", "Контакты", "Войти в ЛК", удалить совсем;
3. в шапке, содержащей "Фрукты", "Техника", "Одежда", "Подарки" сделать фон белым, а шрифт черным;
4. логотип магазина оставить только в верхней шапке, из нижней просьба удалить.

#17 Danil

Danil

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

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

Отправлено 07 Май 2017 - 18:37

Просмотр сообщенияdmitry86 (07 Май 2017 - 01:01) писал:

Здравствуйте!
Просьба внести похожие изменения либо сообщить как это сделать самому:
1. в верхнем левом углу разместить логотип, дальше поиск по магазину, телефон, корзину;
2. верхнюю шапку, содержащую меню  "Главная", "Доставка", "Корзина", "Каталог", "Контакты", "Войти в ЛК", удалить совсем;
3. в шапке, содержащей "Фрукты", "Техника", "Одежда", "Подарки" сделать фон белым, а шрифт черным;
4. логотип магазина оставить только в верхней шапке, из нижней просьба удалить.
Здравствуйте.
Изменения Вам произвел, проверьте, пожалуйста.
Так же создал бэкапы до и после.

#18 dmitry86

dmitry86

    Новичок

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

Отправлено 08 Май 2017 - 12:47

Просмотр сообщенияDanil (07 Май 2017 - 18:37) писал:

Здравствуйте.
Изменения Вам произвел, проверьте, пожалуйста.
Так же создал бэкапы до и после.

Отлично! Спасибо!
Можно только логотип сдвинуть влево на уровень раздела "фрукты" ?!

Подскажите еще как сделать следующее:
1. Чтобы "Бесплатная доставка", "Прием заказов", "100% гарантия возврата" при наведении на них не меняли цвет;
2. изменить шрифт текста меню и названия товаров.

#19 metry

metry

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

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

Отправлено 08 Май 2017 - 13:25

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css:


1.Найдите:

.info-list .info-item a:hover {color: #fff;}
замените на:
.info-list .info-item a:hover {color: #aaa;}

2. Для изменения шрифта меню в main.css найдите:
#custommenu .mainnav > li > a {display: block;color: #000;line-height: 40px;padding: 0 22px 0 0;margin-right: 22px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 18px;font-weight: normal;text-transform: uppercase;}
и задайте свой font-family:

Для изменения шрифта в названии каталога в main.css найдите:
.products-grid .item .item-inner .item-info .product-name {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0;padding: 10px 0 5px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 20px;}
и задайте свой font-family:

Для изменения шрифта в названии в Карточке товара зайдите в main.css  и найдите:
h1, h2, h3, h4, h5, h6 {text-rendering: optimizelegibility;font-family: "agency", 'PT Sans Narrow', sans-serif;text-transform: uppercase;line-height:110%;margin:0;padding:0;font-weight:normal;}
и задайте свой font-family

Далее в конец кода main.css вставьте:
@media all and (min-width: 767px) {
#header .logo {text-align: center;margin-left:-50%;}
}


#20 dmitry86

dmitry86

    Новичок

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

Отправлено 09 Май 2017 - 22:14

Просмотр сообщенияmetry (08 Май 2017 - 13:25) писал:

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->main.css:


1.Найдите:

.info-list .info-item a:hover {color: #fff;}
замените на:
.info-list .info-item a:hover {color: #aaa;}

2. Для изменения шрифта меню в main.css найдите:
#custommenu .mainnav > li > a {display: block;color: #000;line-height: 40px;padding: 0 22px 0 0;margin-right: 22px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 18px;font-weight: normal;text-transform: uppercase;}
и задайте свой font-family:

Для изменения шрифта в названии каталога в main.css найдите:
.products-grid .item .item-inner .item-info .product-name {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0;padding: 10px 0 5px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 20px;}
и задайте свой font-family:

Для изменения шрифта в названии в Карточке товара зайдите в main.css  и найдите:
h1, h2, h3, h4, h5, h6 {text-rendering: optimizelegibility;font-family: "agency", 'PT Sans Narrow', sans-serif;text-transform: uppercase;line-height:110%;margin:0;padding:0;font-weight:normal;}
и задайте свой font-family

Далее в конец кода main.css вставьте:
@media all and (min-width: 767px) {
#header .logo {text-align: center;margin-left:-50%;}
}
Спасибо!




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

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