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


Изменение Дизайна Главной Страницы.


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

#1 Алексей Ж.

Алексей Ж.

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

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

Отправлено 30 Апрель 2018 - 10:27

Добрый день. Мой аккаунт SL- 449581. Помогите пожалуйста изменить дизайн главной страницы. Как показано в скриншоте.

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

  • Главная страница.png


#2 metry

metry

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

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

Отправлено 30 Апрель 2018 - 19:40

Для внесения изменений зайдите в Редактор шаблонов-->main.css и найдите:
#header-top{background:rgba(255,255,255,0.05);height:40px;}

замените на:

#header-top{background:rgba(255,255,255,0.05);height:45px;}
#header-top .menuWrap{width:70%;float:left;max-height: 45px;}

далее зайдите в Редактор шаблонов-->HTML и найдите:

		 <div class="mainwidth">
		 <!-- Форма поиска -->
		 <div id="search">
			 <form id="search_mini_form" action="{SEARCH_URL}" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;">
			 <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = &#39;&#39;;" onkeydown="this.style.color = &#39;#fff&#39;;"/>
			 <button title="Искать" type="submit" value="Поиск" class="button-search icon-search"></button>			
			 </form>
		 </div>
		 <!-- /Форма поиска -->
		 </div>

замените на:

		 <div class="mainwidth">
			 <ul class="menuWrap">				
				 {%FOR catalog_full%}
				 <li class=" {% IF catalog_full.CURRENT %}selected{% ENDIF %}"><a class="menuparent {% IF catalog_full.CURRENT %}selected{% ENDIF %}" href="{catalog_full.URL}" {% IF catalog_full.TITLE %}title="{catalog_full.TITLE}"{% ENDIF %}>{catalog_full.NAME}</a></li>
				 {% ENDFOR %}
			 </ul>
		 <!-- Форма поиска -->
		 <div id="search">
			 <form id="search_mini_form" action="{SEARCH_URL}" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;">
			 <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = &#39;&#39;;" onkeydown="this.style.color = &#39;#fff&#39;;"/>
			 <button title="Искать" type="submit" value="Поиск" class="button-search icon-search"></button>			
			 </form>
		 </div>
		 <!-- /Форма поиска -->
		 </div>


далее найдите:

{%ENDIF%}
<li class="header-button w50"><a href="{COMPARE_URL}" title="Сравнение"><span class="icon-diamond"></span> Сравнение &nbsp;&nbsp;<span id="compareInfoBlock"><span class="compare-count" id="compareInfo"><span class="nb_goods">{COMPARE_GOODS_COUNT}</span></span></span></a></li>
<li class="header-button w50"><a href="{CART_URL}" title="Корзина"><span class="icon-cart3"></span> Корзина &nbsp; <span class="cart-count">

замените на:
					 {%ENDIF%}
					 <li class="header-button w50"><a href="{CART_URL}" title="Корзина"><span class="icon-cart3"></span> Корзина &nbsp; <span class="cart-count">

далее зайдите в Редактор шаблонов-->main.css и найдите:
.forbanners{margin:20px auto;}

замените на:
.forbanners{margin:20px auto;display:none;}

далее зайдите в раздел Товары -->Товары-->Особые разделы и заполните их товарами.

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

  • 1.JPG


#3 Алексей Ж.

Алексей Ж.

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

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

Отправлено 02 Май 2018 - 18:00

Спасибо, но требуется маленькая доработка, 1. Добавить в меню раздел--Для дома и дачи.
2. Поменять местами меню.

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

  • Скрин форум.png


#4 metry

metry

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

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

Отправлено 04 Май 2018 - 14:40

Добрый день. Для внесения изменений зайдите в Редактор шаблонов-->HTML и найдите:
		<div id="header-top">
			 <div class="mainwidth">
						 <ul class="menuWrap">						  
								 {%FOR catalog_full%}
								 <li class=" {% IF catalog_full.CURRENT %}selected{% ENDIF %}"><a class="menuparent {% IF catalog_full.CURRENT %}selected{% ENDIF %}" href="{catalog_full.URL}" {% IF catalog_full.TITLE %}title="{catalog_full.TITLE}"{% ENDIF %}>{catalog_full.NAME}</a></li>
								 {% ENDFOR %}
						 </ul>


замените на:
		<div id="header-top">
			<div class="mainwidth">
				<ul class="menuWrap">				
				 {% FOR menu %}
				   {% FOR header %}
					 {% FOR links %}
							   <li class="{% IF menu.header.links.SELECTED %}selected{%ENDIF%}"><a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}"  {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					 {% ENDFOR %}
				   {% ENDFOR %}
				 {% ENDFOR %}							
				</ul>


далее найдите:
				<div class="lrmenubutton">Меню</div>
				<ul class="menuWrap">				
				 {% FOR menu %}
				   {% FOR header %}
					 {% FOR links %}
							   <li class="{% IF menu.header.links.SELECTED %}selected{%ENDIF%}"><a class="menuparent {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" href="{menu.header.links.URL}"  {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					 {% ENDFOR %}
				   {% ENDFOR %}
				 {% ENDFOR %}							
				</ul>

замените на:
				<div class="lrmenubutton">Меню</div>
						 <ul class="menuWrap">						 
								 {%FOR catalog_full%}
								 <li class=" {% IF catalog_full.CURRENT %}selected{% ENDIF %}"><a class="menuparent {% IF catalog_full.CURRENT %}selected{% ENDIF %}" href="{catalog_full.URL}" {% IF catalog_full.TITLE %}title="{catalog_full.TITLE}"{% ENDIF %}>{catalog_full.NAME}</a></li>
								 {% ENDFOR %}
						 </ul>


#5 Алексей Ж.

Алексей Ж.

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

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

Отправлено 06 Май 2018 - 14:54

Спасибо. Всё получилось). Хочется дальше изменить дизайн главной страницы. На главной страницы сделать интерактивное меню, такого вида , как показано в скриншоте. Можно так сделать?помогите пожалуйста.

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

  • 3 скриншот.png


#6 Mr.Nito

Mr.Nito

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

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

Отправлено 11 Май 2018 - 16:37

Просмотр сообщенияАлексей Ж. (06 Май 2018 - 14:54) писал:

Спасибо. Всё получилось). Хочется дальше изменить дизайн главной страницы. На главной страницы сделать интерактивное меню, такого вида , как показано в скриншоте. Можно так сделать?помогите пожалуйста.
Здравствуйте.
Изменения произвёл
Текст вкладок можно изменить в шаблоне HTML
				  <h2 style="text-align: center;	margin: 10px 0;">Наши товары</h2>
				  <ul class="goods-list">
					{% IFNOT index_page_new_goods_empty %}<li class="goods-list__item"><h2 class="indexh2">Новинки</h2></li>{%ENDIF%}
					{% IFNOT index_page_favorites_goods_empty %}<li class="goods-list__item"><h2 class="indexh2">Хиты продаж</h2></li>{%ENDIF%}
					{% IFNOT index_page_goods_empty %}<li class="goods-list__item"><h2 class="indexh2">Товары на главной</h2></li>{%ENDIF%}


#7 Алексей Ж.

Алексей Ж.

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

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

Отправлено 12 Май 2018 - 15:35

Спасибо. Всё получилось. Помогите пожалуйста внести следующие изменения.
1. при открытии сайта он должен открываться на ГЛАВНОЙ странице сразу.
2. На главной странице хотелось бы внести изменения, как показано в скриншоте.(цвет и пункт в меню.)

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

  • Форум 3.png


#8 RayLi

RayLi

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

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

Отправлено 14 Май 2018 - 14:59

Просмотр сообщенияАлексей Ж. (12 Май 2018 - 15:35) писал:

Спасибо. Всё получилось. Помогите пожалуйста внести следующие изменения.
1. при открытии сайта он должен открываться на ГЛАВНОЙ странице сразу.
2. На главной странице хотелось бы внести изменения, как показано в скриншоте.(цвет и пункт в меню.)

Здравствуйте.
​В данном случае Вам необходимо в шаблоне main.css найти следующий код:


#header-top {
	background: rgba(255,255,255,0.05);
	height: 45px;
}

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

#header-top {
	background: #f2b528;
	height: 45px;
}


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

#header-container {
	background: #135C5D;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.04) inset;
}

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

#header-container {
	background: #f34d19;
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.04) inset;
}


Далее, всё там же, найдите, пожалуйста, следующий код:

.header-bottom {
	background: #14a395;
	min-height: 50px;
	overflow: hidden;
}

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

.header-bottom {
	background: #f1ee33;
	min-height: 50px;
	overflow: hidden;
}


Чтобы добавить нужный Вам пункт меню на Ваш сайт, Вам необходимо в разделе: "Сайт" -> "Меню" в верхнем блоке, просто добавить новый пункт существующей у Вас страницы: "О нас".

#9 Алексей Ж.

Алексей Ж.

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

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

Отправлено 17 Май 2018 - 16:52

Спасибо всё получилось.
Помогите пожалуйста сделать так, чтобы сайт открывался сразу на главной странице. И она будет такой, как на скриншоте, который мы сейчас будем переделывать------

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

  • Скрин4.png


#10 Mr.Nito

Mr.Nito

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

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

Отправлено 19 Май 2018 - 12:35

Просмотр сообщенияАлексей Ж. (17 Май 2018 - 16:52) писал:

Спасибо всё получилось.
Помогите пожалуйста сделать так, чтобы сайт открывался сразу на главной странице. И она будет такой, как на скриншоте, который мы сейчас будем переделывать------
main.css
цвет поиска измените в строке (2я строка цвет при наведении)
#search_mini_form input{background:#0D8676;border:none;color:#95a8a9;height:30px;width:210px;padding:0 5px;border-radius:2px;}
#search_mini_form:hover input,#search_mini_form input:focus{color:white;background:#14a395;outline:0;}
Цвет пунктов изменил в строке
.menuWrap li a{color: #86260b;font-weight: bold;font-size:16px;padding:10px 5px;}

цвет иконок
.header-button a{padding:15px;color: #f3b528;font-size:15px;}


#11 Алексей Ж.

Алексей Ж.

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

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

Отправлено 19 Май 2018 - 13:28

Напишите всё же пожалуйста, как мне поменять цвет в строке поиск товаров на сайте, пожалуйста..Можно сделать такой, как я показал в скриншоте? а при наведении чтоб светлым вставал. можно так? Я в скриншоте прямо специально подбирал, и не знаю какой у него код. Можно написать прямо что заменить на что, пожалуйста

#12 Mr.Nito

Mr.Nito

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

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

Отправлено 19 Май 2018 - 14:06

Просмотр сообщенияАлексей Ж. (19 Май 2018 - 13:28) писал:

Напишите всё же пожалуйста, как мне поменять цвет в строке поиск товаров на сайте, пожалуйста..Можно сделать такой, как я показал в скриншоте? а при наведении чтоб светлым вставал. можно так? Я в скриншоте прямо специально подбирал, и не знаю какой у него код. Можно написать прямо что заменить на что, пожалуйста
первый блок кода в предыдущем сообщении как раз для поиска
цвет #0D8676 по умолчанию и цвет при наведении #14a395 замените на свой
Нужные коды цветов лучше пишите в сообщении, а не на скриншоте.

#13 Алексей Ж.

Алексей Ж.

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

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

Отправлено 19 Май 2018 - 16:12

А всё ясно..Я менял же. Цвета такие сейчас и стоят. Нет не меняется. Остаётся зелёный

И я не знаю коды цветов. Поэтому показываю в скриншоте, котрый мне нужен.) можно так?)

#14 Алексей Ж.

Алексей Ж.

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

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

Отправлено 19 Май 2018 - 16:31

Или может гдето можно брать эти коды цветов, я просто незнаю?

#15 Mr.Nito

Mr.Nito

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

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

Отправлено 19 Май 2018 - 17:22

Просмотр сообщенияАлексей Ж. (19 Май 2018 - 16:31) писал:

Или может гдето можно брать эти коды цветов, я просто незнаю?
Можно взять таблицу из интернета
https://colorscheme....tml-colors.html
https://impuls-web.r...-cvet-na-sajte/

Сейчас в строках для поиска изменений по цветам не вижу

#16 Алексей Ж.

Алексей Ж.

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

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

Отправлено 19 Май 2018 - 18:29

За ссылки для определения цветов большое спасибо. Обязательно ознакомлюсь. Теперь давайте попробуем ещё раз друг друга правильно понять. Мне нужно изменить цвет, как указано в скриншоте. Вы можете помочь это сделать? Сейчас он на сайте зелёный верно же, а надо мне как в скриншоте я мазнул. Можете мне помочь?)

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

  • Скрин4-ув.png


#17 Mr.Nito

Mr.Nito

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

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

Отправлено 19 Май 2018 - 18:45

Просмотр сообщенияАлексей Ж. (19 Май 2018 - 18:29) писал:

За ссылки для определения цветов большое спасибо. Обязательно ознакомлюсь. Теперь давайте попробуем ещё раз друг друга правильно понять. Мне нужно изменить цвет, как указано в скриншоте. Вы можете помочь это сделать? Сейчас он на сайте зелёный верно же, а надо мне как в скриншоте я мазнул. Можете мне помочь?)
в main.css замените
#search_mini_form input{background:#0D8676;border:none;color:#95a8a9;height:30px;width:210px;padding:0 5px;border-radius:2px;}
#search_mini_form:hover input,#search_mini_form input:focus{color:white;background:#14a395;outline:0;}
на
#search_mini_form input{background:#e89222;border:none;color:#fff;height:30px;width:210px;padding:0 5px;border-radius:2px;}
#search_mini_form:hover input,#search_mini_form input:focus{color:white;background: #e89222;outline:0;}


#18 Алексей Ж.

Алексей Ж.

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

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

Отправлено 22 Май 2018 - 18:36

Хотелось бы внести следующие изменения на странице товара. 1 скриншот (форум 5)-схема как хочется сделать, можно так? И 2 скриншот там образец шрифта и фона, как хотелось бы. Можно пожалуйста так сделать.

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

  • Форум 5.png
  • Форум4.png


#19 Mr.Nito

Mr.Nito

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

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

Отправлено 23 Май 2018 - 11:16

Просмотр сообщенияАлексей Ж. (22 Май 2018 - 18:36) писал:

Хотелось бы внести следующие изменения на странице товара. 1 скриншот (форум 5)-схема как хочется сделать, можно так? И 2 скриншот там образец шрифта и фона, как хотелось бы. Можно пожалуйста так сделать.
Изменения по скриншоту произвёл
Размер текста под заголовком можно изменить в main.css
.prod-right .description-short{margin-bottom:10px;font-size: 15px;}
Текст описания во вкладке изменить в редакторе карточки товара

#20 Алексей Ж.

Алексей Ж.

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

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

Отправлено 23 Май 2018 - 14:46

В целом окей. Но только последовательность не та, которую я указал----ОПИСАНИЕ, ХАРАКТЕРИСТИКИ, УСЛОВИЯ ДОСТАВКИ, ОТЗЫВЫ

А сейчас вот так---Общее Отзывы-----Можно подправить и сделать , как я просил?




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

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