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


Изменения В Дизайне


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

#1 arver

arver

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

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

Отправлено 17 Апрель 2013 - 20:50

Добрый день,возникли следующие проблемы в дизайне,помогите пожалуйста их решить.
1)Как изменить панель меню каталога например с черного прямоугольника на другую картинку?(раньше было проще была картинка шапка header_page.png)
2)Как решить проблему неровного отображения наименований в каталоге?(или достаточно просто одинаковых размеров картинок?)
3)Как изменить строку "0 товаров в корзине" на строку как в остальных шаблонах "в корзине товаров на: 0 рублей"(посколько следующая надпись состояния корзины например: 1,1 товаров в корзине абсолютна непонятна и не информативна)?
4)Как изменить картинку полоска-флажок(где написано новинки) на другой цвет,а лучше на другое изображение)?

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

  • проблемы_1.jpg
  • проблемы.jpg


#2 Vaccina

Vaccina

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

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

Отправлено 18 Апрель 2013 - 05:24

1) Вам необходимо в файле стилей style.css найти

.nav {
	background: #000000;
	list-style: none outside none;
	position: relative;
	z-index: 30;
}

в данном классе вам необходимо изменить свойство background а именно цвет #000000

2) Данный вопрос рассматривался тут http://forum.storela...__60#entry59705

3) Найдите в шаблоне "HTML"

<!-- Корзина -->
	  <div class="basket-info">
		<div class="summary">
		  <a href="{CART_URL}"><strong>{% IF cart_count_empty %}
			<span>0</span>
			{% ELSE %}
			  {% FOR cart_count %}
				{cart_count.COUNT}{% IFNOT cart_count.last %},{% ENDIF %}
			  {% ENDFOR %}
			{% ENDIF %}</strong> товаров в корзине</a>
		</div>
		<div class="basket-summary">
		  <table  {% IF cart_count_empty %}style="display: none;"{% ENDIF %}>
			<tbody>
			  <tr>
				<td>Сумма заказа:</td>
				<td>
					{% IF cart_count_empty %}
					  <span>0</span> {CURRENCY_NAME}
					{% ELSE %}
					  {% FOR cart_sum %}
						{cart_sum.NOW | money_format}<br />
					  {% ENDFOR %}
					{% ENDIF %}
				</td>
			  </tr>
			</tbody>
		  </table>
		  {% IF cart_count_empty %}
			<p>Ваша корзина пуста</p>
		  {% ENDIF %}
		</div>
	  </div>
	  <!-- end Корзина -->

и замените на

<!-- Корзина -->
	  <div class="basket-info">
		<div class="summary">
		  <a href="{CART_URL}">
			 в корзине товаров на: {% IF cart_count_empty %}
					  <span>0</span> {CURRENCY_NAME}
					{% ELSE %}
					  {% FOR cart_sum %}
						{cart_sum.NOW | money_format}<br />
					  {% ENDFOR %}
					{% ENDIF %}</a>
		</div>
		<span style="display: none;">
		<div class="basket-summary">
		  <table  {% IF cart_count_empty %}style="display: none;"{% ENDIF %}>
			<tbody>
			  <tr>
				<td>Сумма заказа:</td>
				<td>
					{% IF cart_count_empty %}
					  <span>0</span> {CURRENCY_NAME}
					{% ELSE %}
					  {% FOR cart_sum %}
						{cart_sum.NOW | money_format}<br />
					  {% ENDFOR %}
					{% ENDIF %}
				</td>
			  </tr>
			</tbody>
		  </table>
		  {% IF cart_count_empty %}
			<p>Ваша корзина пуста</p>
		  {% ENDIF %}
		</div>
		</span>
	  </div>
	  <!-- end Корзина -->

далее в файл стилей (в самый конец файла) style.css добавьте

.summary span {
  color: #FFE4AB;
  font-weight: normal;
  font-style: normal;
}
.summary:hover span {
  color: #D5D5D5;
}

далее в шаблоне "Быстрый заказ" найдите

<div style="display:none;" id="newCartData">
  <div class="summary">
	<a href="{CART_URL}"><strong>{% IF cart_count_empty %}
	  <span>0</span>
	  {% ELSE %}
		{% FOR cart_count %}
		  {cart_count.COUNT}{% IFNOT cart_count.last %},{% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}</strong> товаров в корзине</a>
  </div>
  <div class="basket-summary">
	<table  {% IF cart_count_empty %}style="display: none;"{% ENDIF %}>
	  <tbody>
		<tr>
		  <td>Сумма заказа:</td>
		  <td>
			  {% IF cart_count_empty %}
				<span>0</span> {CURRENCY_NAME}
			  {% ELSE %}
				{% FOR cart_sum %}
				  {cart_sum.NOW | money_format}<br />
				{% ENDFOR %}
			  {% ENDIF %}
		  </td>
		</tr>
	  </tbody>
	</table>
	{% IF cart_count_empty %}
	  <p>Ваша корзина пуста</p>
	{% ENDIF %}
  </div>
</div>

и замените на

<div style="display:none;" id="newCartData">
  <div class="summary">
		  <a href="{CART_URL}">
			 в корзине товаров на: {% IF cart_count_empty %}
					  <span>0</span> {CURRENCY_NAME}
					{% ELSE %}
					  {% FOR cart_sum %}
						{cart_sum.NOW | money_format}<br />
					  {% ENDFOR %}
					{% ENDIF %}</a>
		</div>
		<span style="display: none;">
		<div class="basket-summary">
		  <table  {% IF cart_count_empty %}style="display: none;"{% ENDIF %}>
			<tbody>
			  <tr>
				<td>Сумма заказа:</td>
				<td>
					{% IF cart_count_empty %}
					  <span>0</span> {CURRENCY_NAME}
					{% ELSE %}
					  {% FOR cart_sum %}
						{cart_sum.NOW | money_format}<br />
					  {% ENDFOR %}
					{% ENDIF %}
				</td>
			  </tr>
			</tbody>
		  </table>
		  {% IF cart_count_empty %}
			<p>Ваша корзина пуста</p>
		  {% ENDIF %}
		</div>
		</span>
</div>

4) Данную полоску вы можете изменить в файле стилей style.css найдите

section.newsletter {
	background: #F15941;
	color: #FFFFFF;
	font: 16px 'Lobster';
	height: 1.5em;
	left: -2%;
	margin: 1em 0;
	padding: 1em 2.5em;
	width: 98%;
}

и измените цвет #F15941

#3 arver

arver

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

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

Отправлено 18 Апрель 2013 - 09:12

Благодарю за столь быстрый ответ,спасибо.

#4 arver

arver

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

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

Отправлено 18 Апрель 2013 - 12:14

Добрый день,помогите реализовать следующее:перенести строку состояния корзину как показано на рисунке;и как добавить рисунок корзины,такой же как и на кнопках заказать?(поскольку думаю если я просто сделаю блок...то при разных разрешениях у меня значок будет перемещаться....)

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

  • проблема_2.JPG


#5 Stasya

Stasya

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

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

Отправлено 18 Апрель 2013 - 14:42

В шаблоне HTML найдите блок
<!-- Корзина -->
<div class="basket-info">
<div class="summary">
<a href="{CART_URL}"><img src="{ASSETS_IMAGES_PATH}cart.jpg" alt="{SETTINGS_STORE_NAME}" title="Оформить заказ в {SETTINGS_STORE_NAME}" /><strong>{% IF cart_count_empty %}
<span>0</span>
{% ELSE %}
{% FOR cart_count %}
{cart_count.COUNT}{% IFNOT cart_count.last %},{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}</strong> товаров в корзине</a>
</div>
<div class="basket-summary">
<table {% IF cart_count_empty %}style="display: none;"{% ENDIF %}>
<tbody>
<tr>
<td>Сумма заказа:</td>
<td>
{% IF cart_count_empty %}
<span>0</span> {CURRENCY_NAME}
{% ELSE %}
{% FOR cart_sum %}
{cart_sum.NOW | money_format}<br />
{% ENDFOR %}
{% ENDIF %}
</td>
</tr>
</tbody>
</table>
{% IF cart_count_empty %}
<p>Ваша корзина пуста</p>
{% ENDIF %}
</div>
</div>
<!-- end Корзина -->
копируйте и удалите его с прежнего место нахождения. Затем вставьте его сразу после строки
<!-- /Каталог товаров -->
Тоесть у Вас дожно получиться так
<!-- /Каталог товаров -->
<!-- Корзина -->
<div class="basket-info">
<div class="summary">
<a href="{CART_URL}"><img src="{ASSETS_IMAGES_PATH}cart.jpg" alt="{SETTINGS_STORE_NAME}" title="Оформить заказ в {SETTINGS_STORE_NAME}" /><strong>{% IF cart_count_empty %}<a href="{CART_URL}"><strong>{% IF cart_count_empty %}
<span>0</span>
{% ELSE %}
{% FOR cart_count %}
{cart_count.COUNT}{% IFNOT cart_count.last %},{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}</strong> товаров в корзине</a>
</div>
<div class="basket-summary">
<table {% IF cart_count_empty %}style="display: none;"{% ENDIF %}>
<tbody>
<tr>
<td>Сумма заказа:</td>
<td>
{% IF cart_count_empty %}
<span>0</span> {CURRENCY_NAME}
{% ELSE %}
{% FOR cart_sum %}
{cart_sum.NOW | money_format}<br />
{% ENDFOR %}
{% ENDIF %}
</td>
</tr>
</tbody>
</table>
{% IF cart_count_empty %}
<p>Ваша корзина пуста</p>
{% ENDIF %}
</div>
</div>
<!-- end Корзина -->
</div>
cart.jpg замените на имя своей картинки.

#6 arver

arver

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

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

Отправлено 18 Апрель 2013 - 20:53

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

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

  • рисунок.jpg


#7 Vaccina

Vaccina

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

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

Отправлено 19 Апрель 2013 - 03:46

Вам необходимо сделать изменения описанные в сообщении http://forum.storela...йне/#entry60925

После этого у вас будет надпись "в корзине товаров на". Перед данной надписью вы можете добавить ваше изображение корзины.

#8 arver

arver

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

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

Отправлено 19 Апрель 2013 - 10:21

Добрый день,
1)я имел ввиду как убрать этот черный блок,так чтобы это выглядело как указано выше на рисунке под цифрой 3 и чтобы текст был в одну строчку.
2)как увеличить шрифт каталога,на рисунке это под цифрой 2,и как изменить треугольники(сдела больше и другого цвета) под цифрой 1
3)как поменять цвет меню(под цифрой 6),а еще лучше заменить черную полосу на рисунок
4)не получается закруглить углы у поиска(под цифрой 8)
5)где у основного меню меняется цвет и шрифт(под цифрой 7)
6)как устранить момент,что товары почему то выравниваются по центру,а не идут как обычно слева-направо
Заранее благодарю за помощь

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

  • проблема_3.JPG
  • проблема_5.JPG
  • проблема_6.JPG


#9 miyako

miyako

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

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

Отправлено 19 Апрель 2013 - 10:32

Просмотр сообщенияarver (19 Апрель 2013 - 10:21) писал:

Добрый день,
1)я имел ввиду как убрать этот черный блок,так чтобы это выглядело как указано выше на рисунке под цифрой 3 и чтобы текст был в одну строчку.
2)как увеличить шрифт каталога,на рисунке это под цифрой 2,и как изменить треугольники(сдела больше и другого цвета) под цифрой 1
3)как поменять цвет меню(под цифрой 6),а еще лучше заменить черную полосу на рисунок
4)не получается закруглить углы у поиска(под цифрой 8)
5)где у основного меню меняется цвет и шрифт(под цифрой 7)
6)как устранить момент,что товары почему то выравниваются по центру,а не идут как обычно слева-направо
Заранее благодарю за помощь

Скажите пожалуйста ваш номер аккаунта или адрес вашего сайта

#10 arver

arver

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

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

Отправлено 19 Апрель 2013 - 10:48

http://werty145.storeland.ru/

#11 miyako

miyako

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

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

Отправлено 19 Апрель 2013 - 13:43

Просмотр сообщенияarver (19 Апрель 2013 - 10:21) писал:

Добрый день,
1)я имел ввиду как убрать этот черный блок,так чтобы это выглядело как указано выше на рисунке под цифрой 3 и чтобы текст был в одну строчку.
2)как увеличить шрифт каталога,на рисунке это под цифрой 2,и как изменить треугольники(сдела больше и другого цвета) под цифрой 1
3)как поменять цвет меню(под цифрой 6),а еще лучше заменить черную полосу на рисунок
4)не получается закруглить углы у поиска(под цифрой 8)
5)где у основного меню меняется цвет и шрифт(под цифрой 7)
6)как устранить момент,что товары почему то выравниваются по центру,а не идут как обычно слева-направо
Заранее благодарю за помощь

1) вам нужно поменять фон? Или вам не нужна навигация?

2) В файле main.css найдите код:
.nav > li > .parent {
background-image: url("http://werty145.storeland.net/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
и замените на:
.nav > li > .parent {
background-image: url("http://werty145.storeland.net/downArrow.png");
background-repeat: no-repeat;
background-position: right;
font-size: 15px; /*размер текста ссылок*/
background-size: 13px auto; /*размер треугольника*/

}

3) Найдите код:
.global {
background: #000;
padding: 10px;
}
и замените на:
.global {
background: url({ASSETS_IMAGES_PATH}название изображения) repeat;
padding: 10px;
}
при этом загрузите изображение через Сайт-Редактор тем-Файлы

#12 miyako

miyako

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

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

Отправлено 19 Апрель 2013 - 13:52

4)
Найдите код в style.css
form[role="search"] input[type="search"], input#search-field, .search {
vertical-align: middle;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
border: none;
width: 81% !important;
height: 2.429em;
font-size: 1.167em;
color: #8a8a8a;
position: absolute;
z-index: 1;
padding: 0 0.417em;
margin: 0;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
}
и замените на:
form[role="search"] input[type="search"], input#search-field, .search {
vertical-align: middle;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
border: none;
width: 81% !important;
height: 2.429em;
font-size: 1.167em;
color: #8a8a8a;
position: absolute;
z-index: 1;
padding: 0 0.417em;
margin: 0;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
border-radius: 5px; /*округление*/
}
Найдите код:
form[role="search"] input[type="submit"], input#search-submit {
position: absolute;
right: 0;
z-index: 2;
height: 2.833em;
background: #404040;
padding: 0 0.833em;
margin: 0;
line-height: 1;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
}
и замените на:
form[role="search"] input[type="submit"], input#search-submit {
position: absolute;
right: 0;
z-index: 2;
height: 2.833em;
background: #404040;
padding: 0 0.833em;
margin: 0;
line-height: 1;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-radius:5px; /*округление*/
}

5) Найдите код:
.head ul {
padding: 0;
margin: 0 auto;
height: 40px;
}
и замените на:
.head ul {
padding: 0;
margin: 0 auto;
height: 40px;
background: red; /*ваш цвет*/
}
Найдите код:
.head a {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 40px;
padding: 0px 10px 0px 10px;
}
и замените на:
.head a {
display: inline-block;
text-align: center;
text-decoration: none;
line-height: 40px;
padding: 0px 10px 0px 10px;
font-family: arial; /*можете изменить на нужный*/
}


#13 arver

arver

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

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

Отправлено 19 Апрель 2013 - 14:27

В моем сообщении "Отправлено Вчера, 21:53" (прикреплена картинка)   я там как раз и нарисовал чтобы выглядело не черным квадратом,а только текст белого цвета.

#14 support 2.0

support 2.0

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

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

Отправлено 19 Апрель 2013 - 19:42

Просмотр сообщенияarver (19 Апрель 2013 - 14:42) писал:

-

в файле style.css найдите строчки
summary a {color: #ffe4ab; background: #0f0f0f;padding: 1.75em 1em 1.5em; position: absolute; right: 0; top: -4.2em; display: block; text-align: center; width: 13.333em;}
.summary a:hover, .basket-info:hover .summary a {background: #4a4949; color: #d5d5d5}
.summary a:hover strong, .basket-info:hover .summary a strong {background: #0f0f0f;}
замените на
.summary a {color: rgb(255, 255, 255); padding: 1.75em 2em 1.5em; position: absolute; right: 0; top: -5.2em; display: block; text-align: center; width: 20.333em;font: bold 15px Verdana sans-serif;}
.summary a:hover, .basket-info:hover .summary a { }
.summary a:hover strong, .basket-info:hover .summary a strong { }



При наведении цвета меняются. Вам так оставить?

#15 arver

arver

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

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

Отправлено 19 Апрель 2013 - 20:10

Ох,огромное спасибо за помощь!Было бы лучше сделать при наведении одного цвета-синего.

#16 support 2.0

support 2.0

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

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

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

Просмотр сообщенияarver (19 Апрель 2013 - 20:10) писал:

Ох,огромное спасибо за помощь!Было бы лучше сделать при наведении одного цвета-синего.

измените блок
.summary span {
  color: #FFFFFF;
  /*color: #FFE4AB;*/
  font-weight: normal;
  font-style: normal;
}
.summary:hover span {
  color: #FF0000;
  /*color: #D5D5D5;*/
}
на этот
.summary span {
  color: #FFFFFF;
  /*color: #FFE4AB;*/
  font-weight: bold;
}
.summary:hover span {
color: #205F82;
  /*color: #D5D5D5;*/
}


#17 arver

arver

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

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

Отправлено 19 Апрель 2013 - 20:47

Да все получилось,благодарю

#18 arver

arver

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

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

Отправлено 21 Апрель 2013 - 11:37

Добрый день,прочитал тему,сделал все как там описано,но у меня до сих пор остаются проблемы,блоки товара по высоте разные...(цифра 1)
2)остается проблема,что товары выравниваются по центру,а не идут как обычно слева-направо(цифра 2)
3)как увеличить расстояние между контактами(цифра 3)


"Отправлено Сегодня, 12:36

Добрый день,прочитал тему"

http://forum.storela...__60#entry59705

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

  • проблемка.jpg


#19 Taisia

Taisia

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

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

Отправлено 21 Апрель 2013 - 16:57

Для одинаковой высоты блоков вам нужно добавить параметр  height

найдите в style.css код
.containers .items, .containers2 .items {
display: inline-block;
float: none !important;
vertical-align: top;
width: 170px !important;
}

и замените на

.containers .items, .containers2 .items {
display: inline-block;
float: none !important;
	 vertical-align: top;
width: 170px !important;
height: 274px;
}

Меняйте значение height: 274px; что бы задать нужную высоту у всех блоков

что бы товары выводились слева-направо найдите код в style.css

.containers, .containers2, .containers3 {
margin: 0 auto;
position: relative;
text-align: center;
}

и замените на

.containers, .containers2, .containers3 {
margin: 0 auto;
position: relative;
text-align: left;
}


изменить расстояние между контактами - добавьте в style.css в конце файла блок

.phone {
	padding-bottom: 14px;
}

меняя значение этого параметра можно увеличивать расстояние

#20 arver

arver

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

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

Отправлено 22 Апрель 2013 - 11:28

Внес изменения,спасибо за помощь,остается только проблема с выравниваем...блоки да регулируются,а вот кнопка заказать везде на разном уровне.....




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

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