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


Вопросы По Оформлению


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

#1 ArtReal

ArtReal

    Новичок

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

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

Добрый день!

SL-385485

В шапке сайта стоят 2 телефона и кнопка входа в личный кабинет, необходимо телефоны поставить телефоны друг под другом, а значок трубки посередине.

Также надо меню, где Межкомнатные двери, напольные покрытия и т.д. центрировать.

Каким образом это сделать?

Спасибо!

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

  • Безымянный.jpg


#2 Danil

Danil

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

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

Отправлено 08 Май 2016 - 19:00

Просмотр сообщенияArtReal (07 Май 2016 - 19:12) писал:

Добрый день!

SL-385485

В шапке сайта стоят 2 телефона и кнопка входа в личный кабинет, необходимо телефоны поставить телефоны друг под другом, а значок трубки посередине.

Также надо меню, где Межкомнатные двери, напольные покрытия и т.д. центрировать.

Каким образом это сделать?

Спасибо!
Здравствуйте.
В main.css найдите код
#custommenu .mainnav {
	position: static;
	margin: 0;
	overflow: hidden;
}
и замените на
#custommenu .mainnav {
	position: static;
	margin: 0;
	overflow: hidden;
	text-align: center;
}
так же найдите

#custommenu .mainnav > li {
	float:left;
}
и замените на
#custommenu .mainnav > li {
	display: inline-block;
}
найдите
.block-phone a {
	font-size: 18px;
	margin-left: 5px;
}
и замените на

.block-phone a {
	font-size: 18px;
	margin-left: 5px;
	padding-left: 15px;
}
найдите
.block-phone i {
	font-size: 18px;
}
и замените на
.block-phone i {
	font-size: 20px;
	position: absolute;
	top: 16px;
}
найдите
.block-phone {
	display: inline-block;
	float: none;
	width: 200px;
	line-height: 40px;
	margin-left: 20px;
	text-transform: uppercase;
}
и замените на

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


#3 ArtReal

ArtReal

    Новичок

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

Отправлено 10 Май 2016 - 10:30

Danil, спасибо!

#4 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

Дабы не плодить новые темы, напишу сюда.

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

То, что мне нужно сделать отметил на скрине, а именно:

1. Перенести поиск с нижней строки меню на верхнюю.
2. Удалить нижнюю строку меню, дублирует верхнюю.
3. Отредактировать положение текста в верхних блоках.

screen.png

#5 Razon

Razon

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

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

Отправлено 14 Сентябрь 2016 - 15:58

Добрый день
1. Перенесите часть кода в файле Сайт - Шаблоны - HTML
<!-- Поиск -->
		 <div class="form-search">
		 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
			 <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину...">
			 <input type="hidden" name="goods_search_field_id" value="0">
			 <button type="submit" title="Искать" class="button search-submit fa fa-search"></button>
		 </form>
		 </div>

Вставьте его сразу после этого кода (После строки под номером 90):

<div class="row">
				 <ul class="menu-info">
								 {% FOR menu %}
								 {% FOR header %}
										 {% FOR links %}
												 <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
										 {% ENDFOR %}
								 {% ENDFOR %}
								 {% ENDFOR %}

У вас должно получиться:

<div class="row">
				 <ul class="menu-info">
								 {% FOR menu %}
								 {% FOR header %}
										 {% FOR links %}
												 <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
										 {% ENDFOR %}
								 {% ENDFOR %}
								 {% ENDFOR %}
								
								 <!-- Поиск -->
		 <div class="form-search">
		 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;">
			 <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину...">
			 <input type="hidden" name="goods_search_field_id" value="0">
			 <button type="submit" title="Искать" class="button search-submit fa fa-search"></button>
		 </form>
		 </div>

2. В том же файле найдите и удалите данный код:

<!-- Личный кабинет, Телефон, Поиск -->
	 <div class="header-top">
	 <div class="container">
		 <div class="block-account">
		 <div class="user-title">
			 <i class="fa fa-bars" title="Меню пользователя"></i><span class="label">Меню</span>
		 </div>
		 <ul class="dropdown-list">
			 {% 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>

3. Пожалуйста уточните,  в каких именно блоках вы хотите отредактировать текст и каким образом.

#6 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

Просмотр сообщенияRa1zon (14 Сентябрь 2016 - 15:58) писал:

3. Пожалуйста уточните,  в каких именно блоках вы хотите отредактировать текст и каким образом.

заметил что некорректно они отображаются только если меняется размер окна браузера, вот так текст съезжает

2016-09-14_21-07-07.png

а в развернутом окне все в порядке.

В общем дальше получается следующее.

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

2016-09-14_21-03-44.png

#7 Razon

Razon

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

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

Отправлено 15 Сентябрь 2016 - 10:12

1. В редакторе шаблонов в файле main.css
Найдите строку:
.form-search .input-text {width: 200px;padding-right: 25px;height: 30px;background: none;border: 0;color: #fff;}

И замените ее на:
.form-search .input-text {width: 200px;padding-right: 25px;height: 30px;background: none;border: 0;color: #000;}

2. В том же файле найдите строку:
.header-middle {position: relative;}

Замените ее на:
.header-middle {position: relative; background-color:#000;}

3. Найдите и удалите код в файле (Редактор шаблонов ->HTML):
  <!-- Логотип -->
				 <div class="col-xs-2">
						 <div class="logo">
						 <a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}">
								 <img src="{ASSETS_IMAGES_PATH}logo.png?design=urban" alt="{SETTINGS_STORE_NAME}">
						 </a>
						 </div>
				 </div>
<div class="col-xs-10">

Найдите код:
<!-- Каталог -->
		  <div class="container">
				 <div id="custommenu" class="col-lg-9 col-sm-8 col-sms-6 col-smb-6 col-left">
			{% IFNOT catalog_full_empty %}
			<ul class="mainnav">

После него вставьте код:
<!-- Логотип -->
			  
				  <div class="logo" style="float: left;">
						 <a href="http://kpkm.storeland.ru/" title="Мобильная электроника из Китая">
								 <img src="http://kpkm.storeland.net/logo.png?design=urban" alt="Мобильная электроника из Китая" style="width:120px; padding-right:30px; padding-top:5px">
						 </a>
						 </div>

Должно получиться:
<!-- Каталог -->
		  <div class="container">
				 <div id="custommenu" class="col-lg-9 col-sm-8 col-sms-6 col-smb-6 col-left">
			{% IFNOT catalog_full_empty %}
			<ul class="mainnav">
								 <!-- Логотип -->
			  
				  <div class="logo" style="float: left;">
						 <a href="http://kpkm.storeland.ru/" title="Мобильная электроника из Китая">
								 <img src="http://kpkm.storeland.net/logo.png?design=urban" alt="Мобильная электроника из Китая" style="width:120px; padding-right:30px; padding-top:5px">
						 </a>
						 </div>

4.В файле main.css найдите строки:
.container {width: 1200px;}

.container {width: 970px;}

.container {width: 750px;}


Замените их на:
.container {width: auto;}

И добавьте строчку:
.info-item {height:98px;}


#8 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

Отправлено 15 Сентябрь 2016 - 13:27

Отлично!

Еще подскажите, пожалуйста, как меню каталога, сдвинуть немного вправо, слишком близко оно к логотипу.

#9 Firefly

Firefly

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

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

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

Просмотр сообщенияseveryanin (15 Сентябрь 2016 - 13:27) писал:

Отлично!

Еще подскажите, пожалуйста, как меню каталога, сдвинуть немного вправо, слишком близко оно к логотипу.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<div class="logo" style="float: left;">

Замените на:
<div class="logo" style="float: left;margin-right: 10%;">


#10 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

Спасибо всем за помощь!

Едем дальше)

В карточке товара:

1. Цену необходимо увеличить, и, может жирным сделать, слишком мелкий шрифт.
2. Поле артикул удалить
3. Кнопку "в корзину" необходимо удалить, оставить только одну кнопку и надпись на ней поменять на "купить".

screen.png

#11 Razon

Razon

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

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

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

Просмотр сообщенияseveryanin (16 Сентябрь 2016 - 11:21) писал:

Спасибо всем за помощь!

Едем дальше)

В карточке товара:

1. Цену необходимо увеличить, и, может жирным сделать, слишком мелкий шрифт.
2. Поле артикул удалить
3. Кнопку "в корзину" необходимо удалить, оставить только одну кнопку и надпись на ней поменять на "купить".

Прикрепленный файл screen.png

1. В файле main.css найдите строчку:
.price {display: inline-block;color: #ffa500;font-size: 18px;letter-spacing: 0.5px;}

и замените на:

.price {display: inline-block;color: #ffa500;font-size: 28px;letter-spacing: 0.5px;font-weight:bold;}

Где font-size регулирует величину текста,  а font-weight:bold; делает текст жирным.

2. в файле Товар, найдите строки:

<!-- Артикул -->
	  {% IF GOODS_MOD_ART_NUMBER %}
	  <div class="goodsDataMainModificationArtNumber f-fix">
		Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
	  </div>
	  {% ENDIF %}

и замените их на:

<!-- Артикул -->
	  <!--{% IF GOODS_MOD_ART_NUMBER %}
	  <div class="goodsDataMainModificationArtNumber f-fix">
		Артикул: <span>{GOODS_MOD_ART_NUMBER}</span>
	  </div>
	  {% ENDIF %}-->

3. Снова в файле Товар найдите строки:

<button type="submit" class="add-cart button" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>В корзину</button>
		  <button type="submit" class="add-cart quick button" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>Быстрый заказ</button>
	   

и замените их на:

		  <!--<button type="submit" class="add-cart button" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>В корзину</button>-->
		  <button type="submit" class="add-cart quick button" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>Купить</button>


#12 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

Благодарю!

Нужно немного увеличить отступ между названием товара и ценой.
Кнопку с надписью "купить" увеличить, какая-то маленькая получилась.

screen2.png

#13 Razon

Razon

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

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

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

Просмотр сообщенияseveryanin (16 Сентябрь 2016 - 13:46) писал:

Благодарю!

Нужно немного увеличить отступ между названием товара и ценой.
Кнопку с надписью "купить" увеличить, какая-то маленькая получилась.

Прикрепленный файл screen2.png

В файле main.css
Найдите строку:

.product-view .product-shop .price-box {float: left;margin-bottom: 10px;}

и замените ее на:

.product-view .product-shop .price-box {float: left;margin-bottom: 10px; margin-top: 10px;}

Где  margin-top:10px; величина отступа сверху(цены), вы всегда сможете ее настроить под себя.

Увеличение кнопки Купить
В том же файле добавьте строку:

.add-to-cart .button {width:150px;}

Где width:150px; параметр для ширины данной кнопки.

#14 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

Просмотр сообщенияRa1zon (16 Сентябрь 2016 - 14:00) писал:

Увеличение кнопки Купить В том же файле добавьте строку:
 .add-to-cart .button {width:150px;} 
Где width:150px; параметр для ширины данной кнопки.

Отлично!
Теперь необходимо шрифт текста кнопки "купить" увеличить/выделить жирным.

#15 Razon

Razon

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

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

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

Просмотр сообщенияseveryanin (16 Сентябрь 2016 - 14:19) писал:

Отлично!
Теперь необходимо шрифт текста кнопки "купить" увеличить/выделить жирным.

В сообщении №11 вами были  произведены подобные изменения,  только для другого блока, используйте
параметры font-size:22px; и font-weight:bold;

.add-to-cart .button {width:150px;}

Для данной строки,  у вас должно получиться
.add-to-cart .button {width:150px;font-size:22px; font-weight:bold;}


#16 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

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

1. В корзине необходимо изменить надпись на кнопке на "оформить заказ"
2. У формы поиска не видно границ, попробовать сделать ей рамку черного цвета.
3. Меню сайта сдвинуть немного вправо.

на скрине отметил
screen4.png

#17 Razon

Razon

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

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

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

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

1. В файле Корзина,  найдите строку:
			 <a id="startOrder" class="button black" title="Перейти к быстрому оформлению заказа">Быстрый заказ</a>

И замените ее на:
			 <a id="startOrder" class="button black" title="Перейти к быстрому оформлению заказа">Оформить заказ</a>

2. В файле main.css найдите строку:
.form-search {display: inline-block;position: relative;float: right;right: 0.5px;top: 4px;z-index: 10;border: 1px solid rgba(255,255,255,0.2);padding: 0 5px;}

И замените на:
.form-search {display: inline-block;position: relative;float: right;right: 0.5px;top: 4px;z-index: 10;border: 2px solid
rgba(179, 179, 179, 0.81);padding: 0 5px;}

Рамка станет приятного серого цвета,  если вы все же хотите сделать ее черной,  вместо rgba(179, 179, 179, 0.81) вставьте #000

3.В файл main.css  вставьте строку:
.menu-info {margin-left:10%;}


#18 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

Благодарю!

Еще один момент, шрифт в сообщении о добавлении в корзину выделить жирным, аналогично цене.

screen5.png

#19 Razon

Razon

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

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

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

В файле main.css
Найти строку:
.red {color: #ffa500;}

Заменить на:
.red {color: #ffa500;font-weight: bold;}

Найти:
.cart-ajax .cart-txt .newCartCount {color: #ffa500;}

Заменить на:
.cart-ajax .cart-txt .newCartCount {color: #ffa500;font-weight: bold;}


#20 severyanin

severyanin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 118 сообщений
  • ГородМурманск

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

Отлично!

Еще подскажите, пожалуйста, где я могу поменять цвет текста расположенного на слайдах?

screen6.png




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

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