Модуль Basel Theme Carousel на всю ширину экрана в OpenCart 3 - PullRequest
Новая
       122

Модуль Basel Theme Carousel на всю ширину экрана в OpenCart 3

2 голосов
/ 28 мая 2020

Я использую тему Basel в своем магазине OpenCart 3.0.3.2. Я добавил Базельскую карусель на свою страницу, но она показывает поля слева и справа от карусели. Пожалуйста, помогите мне превратить его в полноэкранный режим, а также я хочу удалить поле (пространство) между баннерами. enter image description here

Я могу предоставить вам коды, если хотите. Для этого есть файл twig, tpl и php.

1 Ответ

1 голос
/ 28 мая 2020

Каждый модуль в вашей теме обернут в .container, и эти оболочки вы можете найти в

/ catalog / view / theme / basel / template / common / header.twig 

<div class="container">
{{ position_top }}
</div>

/ catalog / view / theme / basel / template / common / footer.twig 

<div class="container">
{{ position_bottom }}
</div>

Зависит от позиции макета вашей карусели. Просто удалите container из класса. Но в этом случае все модули в этой позиции будут иметь 100% ширину, знайте это.

Или вы можете сделать это только с CSS. Найдите и добавьте в конце документа

/ catalog / view / theme / basel / stylesheet / stylesheet. css

.widget.carousel-widget.contrast-bg {
  position: unset;
  min-height: 130px; /* you can change it according to your images height */
  background: none;
  padding: 0;
}

.widget.carousel-widget .slick-slider {
  position: absolute;
  background: #f7f7f7;
  left: 0;
  width: 100%;
  padding: 30px 0; /* you can change it any way you like */
}

.grid-holder .item.slick-slide {
    padding: 0 5px 20px 5px; /* 5px is for left and right padding between images, you can set in 0 if you like */
}

ОБНОВЛЕНО

Все модули в этом шаблоне покрыты <div class="content">...</div>, поэтому мы можем выпустить их, добавив </div>..<div class="content"> вокруг содержимого модуля. И это будет похоже на 

<div class="content"></div>
our module content
<div class="content"></div>

Go на catalog / view / theme / basel / template / extension / module / basel_carousel.twig

В начале документа вы найдете 

<div class="widget ...

Измените его на 

</div>
<style>
.full-width {
  padding-left: 40px !important; padding-right: 40px !important;
}
.grid-holder .item.slick-slide {
    padding: 0 0px 20px 0px; 
}
.grid-holder .slick-list {
    padding-right: 3px;
}
</style>
<div class="full-width widget ...

В конце документа добавьте 

<div class="container">

И вы можете сделать то же самое в каталог / просмотр / тема / basel / template / extension / module / basel_product.twig

...