巴塞尔主题旋转木马模块在OpenCart 3上的全屏宽度。

Question

我在我的OpenCart 3.0.3.2商店上使用巴塞尔主题。我在我的页面上添加了巴塞尔旋转木马，但它在旋转木马的左右两边都显示了空白。请帮我把它变成全屏，我也想删除横幅之间的空白（空间）。

如果你需要的话，我可以给你提供代码。有一个twig，tpl和php文件。

Answer 1

每个模块在你的主题包装 .container而这种包装纸你可以在

目录viewthemaseltemplatecommonheader.twig------。

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

catalogviewthembaseltemplatecommonfooter.twig。

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

要看你的Carousel在哪个布局位置。只要删除 container 从类。但在这种情况下，这个位置的所有模块都将是100%的宽度，知道吗。

---

或者你也可以只用CSS来做。在文档的最后找到并添加

目录viewthemaselstylesheetstylesheet.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>

前往 catalogviewthemaseltemplateextensionmodulebasel_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">

你也可以在 目录viewthemaseltemplateextensionmodulebasel_product.twig。