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


Отцентровать Каталог

Автор Art, 10 нояб. 2021 16:10

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

#1 Art

Art

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

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

Отправлено 10 Ноябрь 2021 - 16:10

Добрый день!
1) Скажите пожалуйста как сделать что бы каталог был крупней (товарные категории)?
2) как сделать что бы товарные категории были по центру?

#2 Vaccina

Vaccina

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

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

Отправлено 11 Ноябрь 2021 - 06:22

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

Зайдите в раздел Сайт - Редактор шаблонов - main.js - найдите:
// Функция показать больше для Каталога на главной странице
function pdtCatalog() {
  $('#catalog .owl-carousel').owlCarousel({
	items: 6,
	margin: 32,
	loop: false,
	rewind: true,
	lazyLoad: true,
	nav: true,
	navContainer: '#catalog .owl-nav',
	navText: [ , ],
	dots: false,
	autoHeight: false,
	autoHeightClass: 'owl-height',
	autoplay: false,
	autoplayHoverPause: true,
	smartSpeed: 500,
	mouseDrag: true,
	touchDrag: true,
	pullDrag: true,
	responsiveClass: true,
	responsiveRefreshRate: 100,
	responsive: {
	  0:{items:1},
	  320:{items:2},
	  481:{items:2},
	  641:{items:3},
	  768:{items:3},
	  992:{items:4},
	  1200:{items:6}
	}
  });
}

замените на:
// Функция показать больше для Каталога на главной странице
function pdtCatalog() {
  $('#catalog .owl-carousel').owlCarousel({
	items: 4,
	margin: 32,
	loop: false,
	rewind: true,
	lazyLoad: true,
	nav: true,
	navContainer: '#catalog .owl-nav',
	navText: [ , ],
	dots: false,
	autoHeight: false,
	autoHeightClass: 'owl-height',
	autoplay: false,
	autoplayHoverPause: true,
	smartSpeed: 500,
	mouseDrag: true,
	touchDrag: true,
	pullDrag: true,
	responsiveClass: true,
	responsiveRefreshRate: 100,
	responsive: {
	  0:{items:1},
	  320:{items:2},
	  481:{items:2},
	  641:{items:3},
	  768:{items:3},
	  992:{items:4},
	  1200:{items:4}
	}
  });
}

#3 Art

Art

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

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

Отправлено 15 Ноябрь 2021 - 15:22

Просмотр сообщенияVaccina (11 Ноябрь 2021 - 06:22) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - main.js - найдите:
// Функция показать больше для Каталога на главной странице
function pdtCatalog() {
$('#catalog .owl-carousel').owlCarousel({
items: 6,
margin: 32,
loop: false,
rewind: true,
lazyLoad: true,
nav: true,
navContainer: '#catalog .owl-nav',
navText: [ , ],
dots: false,
autoHeight: false,
autoHeightClass: 'owl-height',
autoplay: false,
autoplayHoverPause: true,
smartSpeed: 500,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
responsiveClass: true,
responsiveRefreshRate: 100,
responsive: {
	 0:{items:1},
	 320:{items:2},
	 481:{items:2},
	 641:{items:3},
	 768:{items:3},
	 992:{items:4},
	 1200:{items:6}
}
});
}

замените на:
// Функция показать больше для Каталога на главной странице
function pdtCatalog() {
$('#catalog .owl-carousel').owlCarousel({
items: 4,
margin: 32,
loop: false,
rewind: true,
lazyLoad: true,
nav: true,
navContainer: '#catalog .owl-nav',
navText: [ , ],
dots: false,
autoHeight: false,
autoHeightClass: 'owl-height',
autoplay: false,
autoplayHoverPause: true,
smartSpeed: 500,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
responsiveClass: true,
responsiveRefreshRate: 100,
responsive: {
	 0:{items:1},
	 320:{items:2},
	 481:{items:2},
	 641:{items:3},
	 768:{items:3},
	 992:{items:4},
	 1200:{items:4}
}
});
}

спасибо! А скажите как сделать отступ что бы не в притык к шапке сайта каталог был?
И еще как сделать что бы по 4 в ряд отображались все категории товарные? сейчас только 4((( и еще они почему отображаются разными размерами! как поправить?

#4 Vaccina

Vaccina

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

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

Отправлено 16 Ноябрь 2021 - 07:04

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

Уточните пожалуйста номер аккаунта и обновите информацию об аккаунте в профиле форума.

#5 Art

Art

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

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

Отправлено 16 Ноябрь 2021 - 19:02

Аккаунт SL-534981

Просмотр сообщенияVaccina (16 Ноябрь 2021 - 07:04) писал:

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

Уточните пожалуйста номер аккаунта и обновите информацию об аккаунте в профиле форума.

Аккаунт SL-534981

заранее благодарю за помощь

#6 Art

Art

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

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

Отправлено 17 Ноябрь 2021 - 02:23

Просмотр сообщенияVaccina (16 Ноябрь 2021 - 07:04) писал:

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

Уточните пожалуйста номер аккаунта и обновите информацию об аккаунте в профиле форума.

1) А скажите как сделать отступ что бы не в притык к шапке сайта каталог был? (фото во вложении)
2) И еще как сделать что бы по 4 в ряд отображались все категории товарные? сейчас только 4((( и еще они почему отображаются разными размерами! как поправить?\
3) в мобильной версии поплыли все категории как это исправить?
4) еще как заменить цвет подсветки на баннере? (фото во вложении)
5) в каталоге почему то категории разных размеров, как это исправить?

заранее спасибо за помощь и ответ!



Аккаунт SL-534981

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

  • уакку.JPG
  • WhatsApp Image 2021-11-15 at 19.39.12.jpeg

#7 Vaccina

Vaccina

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

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

Отправлено 17 Ноябрь 2021 - 08:26

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/*** Слайдшоу ***/
#slideshow {position: relative;margin-top: 2rem;}

замените на:
/*** Слайдшоу ***/
#slideshow {position: relative;margin: 2rem 0;}

далее найдите:
.button, button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {color: #fff;background:#00bbf3;box-shadow: 0 3px 0 #4d9a27;padding: 0 2.25rem;line-height: 56px;font-size: 1rem;font-weight: 400;font-family: 'Source Serif Pro', sans-serif;text-transform: none;border-width: 0;border-style: solid;border-color: transparent;border-radius: 1rem;overflow: visible;text-align: center;margin: 0;outline: 0;cursor: pointer;white-space: nowrap;text-shadow: none;backface-visibility: hidden;transform: translateZ(0);-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;position: relative;transition: all 0.3s ease;}

замените на:
.button, button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {color: #fff;background:#00bbf3;box-shadow: 0 3px 0 #00bbf3;padding: 0 2.25rem;line-height: 56px;font-size: 1rem;font-weight: 400;font-family: 'Source Serif Pro', sans-serif;text-transform: none;border-width: 0;border-style: solid;border-color: transparent;border-radius: 1rem;overflow: visible;text-align: center;margin: 0;outline: 0;cursor: pointer;white-space: nowrap;text-shadow: none;backface-visibility: hidden;transform: translateZ(0);-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;position: relative;transition: all 0.3s ease;}

далее найдите:
/*** Промо ***/
.promo__content {padding: 0;position: relative;overflow: hidden;}

замените на:
/*** Промо ***/
#promo {margin-top: 2rem;}
.promo__content {padding: 0;position: relative;overflow: hidden;}

далее найдите:
@media all and (max-width: 991px) {
#advantages {width: 100%;padding-left: 0;margin-top: 2rem;}
}

замените на:
@media all and (max-width: 991px) {
#advantages {width: 100%;padding-left: 0;margin-top: 2rem;}
#advantages .advantages__item {width: 100%;}
}

далее найдите:
.advantages__icon {font-size: 50px;width: 112px;height: 112px;border-radius: 20px;background-color: #FFFFFF;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);display: flex;align-items: center;justify-content: center;}
.advantages__icon img {max-width: 100px;}

замените на:
.advantages__icon {font-size: 50px;width: 112px;height: 112px;border-radius: 20px;background-color: #FFFFFF;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);display: flex;align-items: center;justify-content: center;}

В графическом редакторе измените некоторые иконки - уберите у них отступ с прозрачным фоном.

#8 Art

Art

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

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

Отправлено 23 Ноябрь 2021 - 22:56

Просмотр сообщенияVaccina (17 Ноябрь 2021 - 08:26) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/*** Слайдшоу ***/
#slideshow {position: relative;margin-top: 2rem;}

замените на:
/*** Слайдшоу ***/
#slideshow {position: relative;margin: 2rem 0;}

далее найдите:
.button, button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {color: #fff;background:#00bbf3;box-shadow: 0 3px 0 #4d9a27;padding: 0 2.25rem;line-height: 56px;font-size: 1rem;font-weight: 400;font-family: 'Source Serif Pro', sans-serif;text-transform: none;border-width: 0;border-style: solid;border-color: transparent;border-radius: 1rem;overflow: visible;text-align: center;margin: 0;outline: 0;cursor: pointer;white-space: nowrap;text-shadow: none;backface-visibility: hidden;transform: translateZ(0);-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;position: relative;transition: all 0.3s ease;}

замените на:
.button, button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {color: #fff;background:#00bbf3;box-shadow: 0 3px 0 #00bbf3;padding: 0 2.25rem;line-height: 56px;font-size: 1rem;font-weight: 400;font-family: 'Source Serif Pro', sans-serif;text-transform: none;border-width: 0;border-style: solid;border-color: transparent;border-radius: 1rem;overflow: visible;text-align: center;margin: 0;outline: 0;cursor: pointer;white-space: nowrap;text-shadow: none;backface-visibility: hidden;transform: translateZ(0);-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;position: relative;transition: all 0.3s ease;}

далее найдите:
/*** Промо ***/
.promo__content {padding: 0;position: relative;overflow: hidden;}

замените на:
/*** Промо ***/
#promo {margin-top: 2rem;}
.promo__content {padding: 0;position: relative;overflow: hidden;}

далее найдите:
@media all and (max-width: 991px) {
#advantages {width: 100%;padding-left: 0;margin-top: 2rem;}
}

замените на:
@media all and (max-width: 991px) {
#advantages {width: 100%;padding-left: 0;margin-top: 2rem;}
#advantages .advantages__item {width: 100%;}
}

далее найдите:
.advantages__icon {font-size: 50px;width: 112px;height: 112px;border-radius: 20px;background-color: #FFFFFF;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);display: flex;align-items: center;justify-content: center;}
.advantages__icon img {max-width: 100px;}

замените на:
.advantages__icon {font-size: 50px;width: 112px;height: 112px;border-radius: 20px;background-color: #FFFFFF;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);display: flex;align-items: center;justify-content: center;}

В графическом редакторе измените некоторые иконки - уберите у них отступ с прозрачным фоном.

скажите а как сделать так что бы они были одного замера? очень жду ответа!

#9 Art

Art

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

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

Отправлено 23 Ноябрь 2021 - 22:56

Просмотр сообщенияVaccina (17 Ноябрь 2021 - 08:26) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/*** Слайдшоу ***/
#slideshow {position: relative;margin-top: 2rem;}

замените на:
/*** Слайдшоу ***/
#slideshow {position: relative;margin: 2rem 0;}

далее найдите:
.button, button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {color: #fff;background:#00bbf3;box-shadow: 0 3px 0 #4d9a27;padding: 0 2.25rem;line-height: 56px;font-size: 1rem;font-weight: 400;font-family: 'Source Serif Pro', sans-serif;text-transform: none;border-width: 0;border-style: solid;border-color: transparent;border-radius: 1rem;overflow: visible;text-align: center;margin: 0;outline: 0;cursor: pointer;white-space: nowrap;text-shadow: none;backface-visibility: hidden;transform: translateZ(0);-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;position: relative;transition: all 0.3s ease;}

замените на:
.button, button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {color: #fff;background:#00bbf3;box-shadow: 0 3px 0 #00bbf3;padding: 0 2.25rem;line-height: 56px;font-size: 1rem;font-weight: 400;font-family: 'Source Serif Pro', sans-serif;text-transform: none;border-width: 0;border-style: solid;border-color: transparent;border-radius: 1rem;overflow: visible;text-align: center;margin: 0;outline: 0;cursor: pointer;white-space: nowrap;text-shadow: none;backface-visibility: hidden;transform: translateZ(0);-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;position: relative;transition: all 0.3s ease;}

далее найдите:
/*** Промо ***/
.promo__content {padding: 0;position: relative;overflow: hidden;}

замените на:
/*** Промо ***/
#promo {margin-top: 2rem;}
.promo__content {padding: 0;position: relative;overflow: hidden;}

далее найдите:
@media all and (max-width: 991px) {
#advantages {width: 100%;padding-left: 0;margin-top: 2rem;}
}

замените на:
@media all and (max-width: 991px) {
#advantages {width: 100%;padding-left: 0;margin-top: 2rem;}
#advantages .advantages__item {width: 100%;}
}

далее найдите:
.advantages__icon {font-size: 50px;width: 112px;height: 112px;border-radius: 20px;background-color: #FFFFFF;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);display: flex;align-items: center;justify-content: center;}
.advantages__icon img {max-width: 100px;}

замените на:
.advantages__icon {font-size: 50px;width: 112px;height: 112px;border-radius: 20px;background-color: #FFFFFF;box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.09);display: flex;align-items: center;justify-content: center;}

В графическом редакторе измените некоторые иконки - уберите у них отступ с прозрачным фоном.

скажите а как сделать так что бы они были одного замера? очень жду ответа!

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

  • увув.JPG
  • увув.JPG
  • ывфсм.JPG
  • ывфсм.JPG
  • ывфсм.JPG
  • ывфсм.JPG

#10 Vaccina

Vaccina

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

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

Отправлено 24 Ноябрь 2021 - 08:37

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

Почистите кэш браузера, на данный момент они одинакового размера:
Screenshot(7).png

Screenshot(8).png
Обратно в Каталог товаров


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

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

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