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


Как Сделать Страницы Шире И По 4 Товара В Ряд?

Автор Progmatik-vrn, 27 нояб. 2012 10:17

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

#1 Progmatik-vrn

Progmatik-vrn

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

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

Отправлено 27 Ноябрь 2012 - 10:17

Как сделать страницы шире и по 4 товара в ряд?

#2 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 27 Ноябрь 2012 - 10:37

Вам нужно искать вот такой код и менять цифру на нужное число колонок:
  {goods.index | is_divided("4","</tr><tr>","")}

Это в разделе "Товары" и на главной (раздел "ХТМЛ") в Новинках, Хитах.

#3 ais-83

ais-83

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

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

Отправлено 27 Ноябрь 2012 - 14:02

а как раздвинуть само поле, куда эти 4 товара потом встанут. т.к. они убегают за границы поля и их не видно, если просто поменять 3 на 4? спасибо

#4 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 27 Ноябрь 2012 - 14:59

это лучше к Vaccine Удачи!

#5 Vaccina

Vaccina

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

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

Отправлено 28 Ноябрь 2012 - 04:36

Цитата

а как раздвинуть само поле, куда эти 4 товара потом встанут. т.к. они убегают за границы поля и их не видно, если просто поменять 3 на 4?

В вашем случае необходимо менять размеры изображений. Это делается в разделе Настройки -> Основные -> Изображения товаров. После уменьшения размеров изображений можно будет уменьшить размеры самих блоков для корректного отображений 4х товаров в один ряд. Без этих изменений вывести 4 товара в один ряд - не получиться.
После уменьшения размера изображения вам необходимо будет в файле стилей main.css найти

.goodsListItem {
	overflow: hidden;
	padding: 0;
	text-align: center;
	vertical-align: top;
	width: 195px;
}

а так же найти

.goodsListItemBlock {
	border: medium none !important;
	height: 300px;
	margin: 5px;
	overflow: hidden;
	width: 210px;
}

в данных классах вам необходимо уменьшить свойство width(ширина). Изменяйте данное значение на то число, на которое вы уменьшили изображение в настройках.

#6 EkaSmi

EkaSmi

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

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

Отправлено 06 Февраль 2014 - 13:41

а у меня все равно не получается 4 в ряд. http://t14092.storeland.ru/ хелп?

#7 Vaccina

Vaccina

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

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

Отправлено 07 Февраль 2014 - 03:31

на данный момент у вас на главной странице, товары по 3 шт в ряд идут, где у вас не получается сделать тот же вид?

#8 EkaSmi

EkaSmi

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

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

Отправлено 07 Февраль 2014 - 14:14

Разобралась, спасибо

#9 ac-dream

ac-dream

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

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

Отправлено 14 Сентябрь 2015 - 23:45

Здравствуйте!
Как сделать 4 товара в ряд в каталоге без изменения размеров самого товара?
Если изменить границу вокруг товара до 1-2px, то 4 товара в ряд легко становятся СКРИН.
Без потери для адаптивности шаблона.
Аккаунт SL-343424

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

  • 50.jpg

#10 Danil

Danil

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

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

Отправлено 15 Сентябрь 2015 - 09:40

Просмотр сообщенияac-dream (14 Сентябрь 2015 - 23:45) писал:

Здравствуйте!
Как сделать 4 товара в ряд в каталоге без изменения размеров самого товара?
Если изменить границу вокруг товара до 1-2px, то 4 товара в ряд легко становятся СКРИН.
Без потери для адаптивности шаблона.
Аккаунт SL-343424
Здравствуйте.
Попробуйте сделать следующее:
в main.css найдите код
.product-list {
width: 100%;
margin: 5px 20px;
padding: 0px 20px;
text-align: center;
}
и замените на

.product-list {
width: 100%;
margin: 5px 20px;
padding: 0px 0px;
text-align: center;
}
так же найдите
.prod_hold {
margin: 15px 10px 0 15px;
}
и замените на 
.prod_hold {
margin: 15px 0px 0 0px;
}

#11 ac-dream

ac-dream

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

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

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

Просмотр сообщенияDanil (15 Сентябрь 2015 - 09:40) писал:

Здравствуйте.
Попробуйте сделать следующее:
в main.css найдите код
.product-list {
width: 100%;
margin: 5px 20px;
padding: 0px 20px;
text-align: center;
}
и замените на

.product-list {
width: 100%;
margin: 5px 20px;
padding: 0px 0px;
text-align: center;
}
так же найдите
.prod_hold {
margin: 15px 10px 0 15px;
}
и замените на 
.prod_hold {
margin: 15px 0px 0 0px;
}

Спасибо, товары встали в ряд по 4 штуки, но выходят за поле контента (Обозначено красной вертикальной полоской на СКРИНЕ).
Поэтому бордюр вокруг товара всё-таки требуется уменьшить. Как это сделать?
Аккаунт SL-343424

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

  • 52.jpg

#12 Vaccina

Vaccina

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

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

Отправлено 16 Сентябрь 2015 - 03:06

В main.css найдите:
.prod_hold {
	display: inline-block;
	border: 10px solid #DDD;
	margin: 15px 10px 0px 15px;
	position: relative;
}
в нем уменьшите значение стиля border, а именно 10px

#13 ac-dream

ac-dream

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

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

Отправлено 16 Сентябрь 2015 - 10:59

Просмотр сообщенияVaccina (16 Сентябрь 2015 - 03:06) писал:

В main.css найдите:
.prod_hold {
display: inline-block;
border: 10px solid #DDD;
margin: 15px 10px 0px 15px;
position: relative;
}
в нем уменьшите значение стиля border, а именно 10px

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

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

  • 54.jpg

#14 Vaccina

Vaccina

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

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

Отправлено 17 Сентябрь 2015 - 02:07

В main.css найдите:
.prod_hold {
	display: inline-block;
	border: 2px solid #DDD;
	margin: 15px 10px 0px 15px;
	position: relative;
}
замените на:
.prod_hold {
	display: inline-block;
	border: 2px solid #DDD;
	margin: 15px 10px 0px 15px !important;
	position: relative;
}

#15 ac-dream

ac-dream

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

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

Отправлено 17 Сентябрь 2015 - 02:43

Просмотр сообщенияVaccina (17 Сентябрь 2015 - 02:07) писал:

В main.css найдите:
.prod_hold {
display: inline-block;
border: 2px solid #DDD;
margin: 15px 10px 0px 15px;
position: relative;
}
замените на:
.prod_hold {
display: inline-block;
border: 2px solid #DDD;
margin: 15px 10px 0px 15px !important;
position: relative;
}

Изменила, расстояние между товарами уменьшила, но всё равно выходит за пределы горизонтальной зёленой полосы (где указан путь на страницу). Надо передвинуть контентный блок немного влево, как указано на СКРИНЕ.

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

  • 55.jpg

#16 Vaccina

Vaccina

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

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

Отправлено 17 Сентябрь 2015 - 02:51

В main.css найдите:
.product-list {
	width: 100%;
	margin: 5px 20px;
	padding: 0px;
	text-align: center;
}
попробуйте заменить на:
.product-list {
	width: 100%;
	margin: 5px 0px;
	padding: 0px;
	text-align: center;
}

#17 ac-dream

ac-dream

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

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

Отправлено 17 Сентябрь 2015 - 03:21

Просмотр сообщенияVaccina (17 Сентябрь 2015 - 02:51) писал:

В main.css найдите:
.product-list {
width: 100%;
margin: 5px 20px;
padding: 0px;
text-align: center;
}
попробуйте заменить на:
.product-list {
width: 100%;
margin: 5px 0px;
padding: 0px;
text-align: center;
}

Спасибо!
Ещё вопросик в СКРИНЕ.

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

  • 56.jpg

#18 Vaccina

Vaccina

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

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

Отправлено 17 Сентябрь 2015 - 03:42

В main.css найдите:
.name {
	text-align: left;
	margin: 10px 10px 0px;
	height: 75px;
	overflow: hidden;
}
уменьшите значение стиля height

#19 ac-dream

ac-dream

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

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

Отправлено 17 Сентябрь 2015 - 19:11

Просмотр сообщенияVaccina (17 Сентябрь 2015 - 03:42) писал:

В main.css найдите:
.name {
text-align: left;
margin: 10px 10px 0px;
height: 75px;
overflow: hidden;
}
уменьшите значение стиля height

Спасибо!
Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Пластик
  5. → Изменение общей стилистики
  6. Privacy Policy