时间戳

首页 > 解决方案 > OpenCart 3上的巴塞尔主题轮播模块全屏宽度

css - OpenCart 3上的巴塞尔主题轮播模块全屏宽度

问题描述

我在我的 OpenCart 3.0.3.2 商店中使用巴塞尔主题。我在我的页面上添加了 Basel Carousel，但它在 Carousel 的左侧和右侧显示边距。请帮助我将其设为全屏，并且我想删除横幅之间的边距（空格）。在此处输入图像描述

如果你愿意，我可以给你代码。为此有一个 twig、tpl 和 php 文件。

标签： csstwigopencartopencart-3opencart-module

解决方案

主题中的每个模块都包含在 中.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>

取决于您的 Carousel 的布局位置。只是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>

转到目录/视图/主题/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">

你也可以在catalog/view/theme/basel/template/extension/module/basel_product.twig

推荐阅读