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


Отображение Изображений В Каталоге


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

#1 natishka

natishka

    Новичок

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

Отправлено 10 Июнь 2013 - 02:28

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

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

  • Безимени-1.jpg


#2 miyako

miyako

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

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

Отправлено 10 Июнь 2013 - 08:33

Просмотр сообщенияnatishka (10 Июнь 2013 - 02:28) писал:

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

Изменим на 20% ширину блоков

Найдите в style.css код:
.items .item-detail {
float: left;
width: 55.15427%;
margin-right: 2.1322314%;
margin-left: 2.1322314%;
}
и замените на:
.items .item-detail {
float: left;
width: 35.15427%;
margin-right: 2.1322314%;
margin-left: 2.1322314%;
}
- это описание

Найдите код в шаблоне Товары:
<!-- Если отображаем товары таблицей -->
	  {% ELSE %}
		<!-- Проходим по массиву списка товаров -->
		{% FOR goods %}
		  <div class="items" style="width:97%; margin: 10px; padding: 10px; clear: both; display:block;line-height: 1; position: relative;border-top: 1px solid #d5d5d5;background: #fff;">
			<figure style="width: 20%;height: 100%;float: left; clear: both; position: relative; overflow: hidden;">
и замените на:
<!-- Если отображаем товары таблицей -->
	  {% ELSE %}
		<!-- Проходим по массиву списка товаров -->
		{% FOR goods %}
		  <div class="items" style="width:97%; margin: 10px; padding: 10px; clear: both; display:block;line-height: 1; position: relative;border-top: 1px solid #d5d5d5;background: #fff;">
			<figure style="width: 40%;height: 100%;float: left; clear: both; position: relative; overflow: hidden;">
- это изображение

#3 natishka16

natishka16

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

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

Отправлено 15 Июнь 2013 - 13:38

Спасибо.
Появились еще вопросы:

1. Как уменьшить ширину полоски меню, нужно сделать ее такой же по ширине как и полоска каталога(см. картинку 1)

2. Я что-то нахимичила и у меня исчез поиск. Пыталась его убрать совсем. Нужно вернуть обратно и переместить в строку с каталогом в право. (см. рисунок 2)

3.Между меню и каталогом нужно вставить статичный баннер (зеленый прямоугольник на кратинке 2).

4. Как изменить цвет полоски на белый (выделено красным на рис.2)?

5. Нужно сделать цвет подвала таким  же кориченевым как и шапка.

6. Как изменить цвет корзины в правом верхнем углу (выделено синим на рис.2)?

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

  • 1.jpg
  • 2.jpg


#4 miyako

miyako

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

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

Отправлено 15 Июнь 2013 - 16:16

Просмотр сообщенияnatishka16 (15 Июнь 2013 - 13:38) писал:

Спасибо.
Появились еще вопросы:

1. Как уменьшить ширину полоски меню, нужно сделать ее такой же по ширине как и полоска каталога(см. картинку 1)

2. Я что-то нахимичила и у меня исчез поиск. Пыталась его убрать совсем. Нужно вернуть обратно и переместить в строку с каталогом в право. (см. рисунок 2)

3.Между меню и каталогом нужно вставить статичный баннер (зеленый прямоугольник на кратинке 2).

4. Как изменить цвет полоски на белый (выделено красным на рис.2)?

5. Нужно сделать цвет подвала таким  же кориченевым как и шапка.

6. Как изменить цвет корзины в правом верхнем углу (выделено синим на рис.2)?

1. Найдите код в style.css:
.global {
background: #5e4646;
padding: 10px;
}
и замените на:
.global {
background: #5e4646;
padding: 10px;
width: 88.6%;
margin: 0 auto;
}

2.
Измените код поиска на такой.:
<!-- Форма поиска -->
	  <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
		<div>
		  <input class="search" name="q" type="search"  value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
		  <input title="Искать" type="submit" value="Поиск" />
		</div>
	  </form> 
	  <!-- /Форма поиска -->

3. Найдите код в style.css:
header[role="banner"] {
position: relative;
min-height: 10em;
overflow: hidden;
z-index: 10;
}
и замените на:
header[role="banner"] {
position: relative;
min-height: 10em;
overflow: hidden;
z-index: 10;
background: green; /*цвет*/
}

4. В коде -
header.controls {
padding: 1em;
background: #F1F1F0 !important;
margin-bottom: 0em;
}
поменяйте код цвета - #F1F1F0

5. Найдите код:
footer {
clear: both;
background: #0f0f0f;
overflow: hidden;
padding: 1.5em 0;
color: #e6e4da;
width: 100%;
}
и замените на:
footer {
clear: both;
background: #5e4646;
overflow: hidden;
padding: 1.5em 0;
color: #e6e4da;
width: 100%;
}

6. В коде:
.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;
}


#5 natishka16

natishka16

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

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

Отправлено 16 Июнь 2013 - 09:47

Спасибо за ответ.

2. НЕ получилось переместить поиск и он как отсутствовал так и остался невидимым. Код вставила, но ничего не поменялось, не переместился.
3. Я не так выразилась мне в шапку нужно не цвет фона поменять, а именно вставить картинку, например на как во вложении. Как это сделать?

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

  • header.png


#6 miyako

miyako

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

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

Отправлено 16 Июнь 2013 - 11:55

Просмотр сообщенияnatishka16 (16 Июнь 2013 - 09:47) писал:

Спасибо за ответ.

2. НЕ получилось переместить поиск и он как отсутствовал так и остался невидимым. Код вставила, но ничего не поменялось, не переместился.
3. Я не так выразилась мне в шапку нужно не цвет фона поменять, а именно вставить картинку, например на как во вложении. Как это сделать?

2. Найдите код:
<!-- Форма поиска -->
		  <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
				<div>
				  <input class="search" name="q" type="search"  value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
				  <input title="Искать" type="submit" value="Поиск" />
				</div>
		  </form>
		  <!-- /Форма поиска -->
в шаблоне HTML
и удалите
Найдите код:
<div class="conta">
  
и замените на:
<div class="conta">
	 <!-- Форма поиска -->
		  <form action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;" role="search">
				<div>
				  <input class="search" name="q" type="search"  value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" />
				  <input title="Искать" type="submit" value="Поиск" />
				</div>
		  </form>
		  <!-- /Форма поиска -->

Найдите код в style.css:
form[role="search"] {
position: absolute;
right: 2em;
top: 2.5em;
}
и замените на:
form[role="search"] {
position: absolute;
right: 2em;
top: 0.5em;
z-index: 999;
}

Найдите код:
form[role="search"] input[type="search"], input#search-field, .search {
display: none;
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);
}

3. Найдите код в style.css:
.global {
background: #5e4646;
padding: 10px;
width: 88.6%;
margin: 0 auto;
}
и замените на:
.global {
background: url("путь до изображения");
padding: 10px;
width: 88.6%;
margin: 0 auto;
}
Не забудьте загрузить изображение в бэкофис и указать в коде путь до изображения

#7 natishka

natishka

    Новичок

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

Отправлено 20 Июнь 2013 - 07:10

Спасибо.

Еще несколько вопросов

По верхнему меню(.global):
1. Как в верхнем меню сделать нижнюю границу ?
2. Как менять положение вкладок в в верхнем меню (допустим я хочу чтобы вкладки"Главная", "Меню" и т.д. были выровнены по левому краю).
3. Как изменить цвет и размер шрифта в меню?
4. Как изменить размер корзины в верхнем меню?
5. Как изменить шрифт (размер и цвет) корзины в меню?

По меню каталога:
6. Необходимо растянуть вкладки по всей ширине меню.
7. Как сделать разделители между вкладками?
8. Могу ли я сделать подобное меню(см.вложение"меню каталога). Каким образом?


9. Как уменьшить расстояние между верхним меню и меню каталога?

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

  • меню каталога.jpg


#8 Koderhan

Koderhan

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

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

Отправлено 20 Июнь 2013 - 11:53

1.
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.global {
border-bottom: 1px solid black;
}
2. Можно просто перетаскивать пункты меню в разделе Сайт-> Меню.
ScreenShot 702.png
3.
В файле "main.css".
Добавить в конец файла код:
.global .head a {
	color: green;/*цвет*/
	font-size: 14px;/*размер*/
}
4.
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.summary a {
	width: 149px;/*ширина */
	height: 31px;/*высота*/
}
5.
Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.summary a {
	width: 149px;/*ширина */
	height: 31px;/*высота*/
	font-size: 10px;/*размер шрифта*/
	color: green;/*цвет шрифта*/
}
6, 7. К сожалению корректно расстянуть вкладки не получится.

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:
.nav > li {
	border-right: 1px solid white;/*цвет разделителя.*/
	margin-right: 3%;/*отступ справа*/
	padding-right: 1%;
}
8. С этим вопросом лучше обратиться в дизайн студию.
9.  
В файле "main.css".
Добавить в конец файла код:
header[role="banner"] {
	min-height: 9em;/*высота блока с банерами*/
}


#9 natishka

natishka

    Новичок

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

Отправлено 03 Июль 2013 - 04:08

Еще несколько вопросов,

1. На этих страницах
http://s779843.storeland.ru/cart
http://s779843.storeland.ru/feedback
http://s779843.store.../stage/contacts
подвал не сдвигается вниз

2. На продуктовых страницах
например
http://s779843.store...-s-shampinonami
Пропала кнопка "Заказать" и появилась второе поле "Количество"

#10 Сake

Сake

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

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

Отправлено 03 Июль 2013 - 05:14

Добавьте в ваш файл стилей main.css

.bg > .container {
min-height: 600px;
}

так же замените код вашего шаблона "Связь с администрацией" на следующий код шаблона (по умолчанию)

<div class="span7 breadcrumbs hidden-phone">
<ul>
<li><a href="http://{NET_DOMAIN}/" title="Перейти на главную">Главная</a><span>&nbsp;</span></li>
<li><strong>Связь с администрацией</strong></li>
</ul>
</div>

<div class="span7 col-main">
<div class="feedback">
<div class="page-title">
<h2>
{% IF FORM_SEND_OK %}
Ваше сообщение успешно отправлено администрации магазина
{% ELSE %}
Связь с администрацией
{% ENDIF %}
</h2>
</div>
{% IF FORM_NOTICE %}<ul class="messages"><li class="{% IF FORM_NOTICE_IS_GOOD %}success-msg{% ELSE %}error-msg{% ENDIF %}">{FORM_NOTICE | nl2br}</li></ul>{% ENDIF %}
<form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data">
{% IFNOT FORM_SEND_OK %}
<div class="fieldset">
<input type="hidden" name="hash" value="{HASH}" />

<!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
{ANTISPAM_CODE}

<h2 class="legend" title="Ваши персональные данные">Сообщение администрации магазина</h2>
<ul class="form-list">
<li class="fields">
<div class="customer-name">
<div class="field name-firstname">
<label for="feedback_name" class="required"><em>*</em>Представьтесь пожалуйста</label>
<div class="input-box">
<input id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="input-text required"/>
</div>
</div>
<div class="field name-lastname">
<label for="feedback_email" class="required"><em>*</em>Электронная почта</label>
<div class="input-box">
<input id="feedback_email" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="required email input-text"/>
</div>
</div>
</div>
</li>
<li class="wide">
<div class="clear"></div>
<label for="feedback_message" class="required"><em>*</em>Текст сообщения</label>
<div class="input-box">
<textarea id="feedback_message" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" class="required">{FORM_FEEDBACK_MESSAGE}</textarea>
</div>
<li>
<li class="wide">
<label for="feedback_file" class="required">Прикрепить файл</label>
<div class="input-box">
<input id="feedback_file" type="file" name="form[assets_file]" value="" style="height:auto;border:0px;" />
</div>
</li>
</ul>
</div>
{% ENDIF %}
<div class="buttons-set">
{% IFNOT FORM_SEND_OK %}<p class="required">* Обязательные поля</p>{% ENDIF %}
<p class="back-link"><a href="http://{NET_DOMAIN}/">Перейти на главную</a></p>
{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button"><span><span>Отправить</span></span></button>{% ENDIF %}
</div>
</form>
</div>
</div>

В файле стилей main.css найдите

.buy-item button {
background: url("http://s779843.storeland.net/icons.png") no-repeat scroll 10% -552px #13AF13;
border: medium none;
color: #FFFFFF;
display: inline-block;
font-size: 100%;
font-weight: normal;
letter-spacing: 1px;
line-height: 1;
margin: auto auto auto 870px;
overflow: visible;
padding: 0.714em 1em 0.714em 2.5em;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-transform: uppercase;
width: auto;
}

и замените на

.buy-item button {
background: url("http://s779843.storeland.net/icons.png") no-repeat scroll 10% -552px #13AF13;
border: medium none;
color: #FFFFFF;
display: inline-block;
font-size: 100%;
font-weight: normal;
letter-spacing: 1px;
line-height: 1;
margin: auto;
overflow: visible;
padding: 0.714em 1em 0.714em 2.5em;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
text-transform: uppercase;
width: auto;
}


#11 natishka

natishka

    Новичок

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

Отправлено 03 Июль 2013 - 06:05

1. Картинка на описание шага наехала (см вложение)http://s779843.store.../stage/delivery
2. Календарь некорректно отображается, фона нет. (см. вложение)
http://s779843.store.../stage/delivery
3. И также подвал наезжает на контент. http://s779843.store.../stage/delivery
4. Теперь кнопка тут поехала
http://s779843.store.../catalog/Salaty

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

  • ошибки.jpg


#12 miyako

miyako

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

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

Отправлено 03 Июль 2013 - 06:31

Просмотр сообщенияnatishka (03 Июль 2013 - 06:05) писал:

1. Картинка на описание шага наехала (см вложение)http://s779843.store.../stage/delivery
2. Календарь некорректно отображается, фона нет. (см. вложение)
http://s779843.store.../stage/delivery
3. И также подвал наезжает на контент. http://s779843.store.../stage/delivery
4. Теперь кнопка тут поехала
http://s779843.store.../catalog/Salaty

1) в каком браузере у Вас так отображается?

2) Возможно эта ошибка не только у Вас. Ошибка перенаправлена Разработчикам

3) Найдите код в style.css:
.bg > .container {
min-height: 600px;
}
и замените на:
.bg > .container {
min-height: 739px;
}

4. Где кнопка должна быть? Сверху? или между изображением и названием товара?

#13 natishka16

natishka16

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

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

Отправлено 10 Август 2013 - 05:44

4. Кнопка должна быть под ценой

#14 miyako

miyako

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

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

Отправлено 10 Август 2013 - 07:17

Просмотр сообщенияnatishka16 (10 Август 2013 - 05:44) писал:

4. Кнопка должна быть под ценой

4) Найдите код в style.css -
form {
position: absolute;
right: 2em;
top: 0.5em;
z-index: 999;
top: 50px;
left: 10px;
right: 20px;
}
и замените на -
form {
right: 2em;
top: 0.5em;
z-index: 999;
top: 50px;
left: 10px;
right: 20px;
}


#15 natishka16

natishka16

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

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

Отправлено 12 Август 2013 - 07:17

Шапка в IE  и на маленьких мониторах уползает в сторону.
На широкоформатном мониторе и в нормальном браузере все норм.

#16 miyako

miyako

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

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

Отправлено 12 Август 2013 - 10:40

Просмотр сообщенияnatishka16 (12 Август 2013 - 07:17) писал:

Шапка в IE  и на маленьких мониторах уползает в сторону.
На широкоформатном мониторе и в нормальном браузере все норм.

Не могу найти Ваш сайт, укажите пожалуйста Ваш номер аккаунта или адрес Вашего сайта

#17 natishka16

natishka16

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

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

Отправлено 12 Август 2013 - 23:50

http://gotovte-doma.storeland.ru/

#18 Сake

Сake

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

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

Отправлено 13 Август 2013 - 03:01

Попробуйте в ваш файл стилей style.css добавит

html, body {
   min-width: 980px;
   background: #FFFFFF !important;
}


#19 natishka16

natishka16

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

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

Отправлено 13 Август 2013 - 03:04

Поставила, ничего не произошло.

#20 Сake

Сake

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

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

Отправлено 13 Август 2013 - 03:10

Пожалуйста, приведите пример подобного отображения в виде прикрепленного скриншота сайта, а так же сообщите при каком разрешении экрана это происходит.




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

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