1

I am using Basel Theme on my OpenCart 3.0.3.2 store. I added Basel Carousel on my page but its showing margin on left and right side of the Carousel. Please help me with making it to full-screen and also I want to remove margin (space) between banners.enter image description here

I can provide you codes if you want. There is a twig, tpl and php file for this.

focus.style
  • 6,612
  • 4
  • 26
  • 38
WhiteDot Sports
  • 83
  • 6

1 Answers1

1

Each module in your theme wraps in .container, and this wrappers you can find in

/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>

Depends on which layout position your Carousel is. Just remove container from class. But in this case all modules in this position will be 100% width, know that.

Or you can do it with only CSS. Find and add at the end of a document

/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 */
}

UPDATED

All modules in this template are covered in <div class="content">...</div>, so we can release them by adding </div>..<div class="content"> around the module content. And this will be like 

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

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

On the beginning of the document you will find

<div class="widget ...

Change it to

</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 ...

On the end of the document add

<div class="container">

And you can do the same in catalog/view/theme/basel/template/extension/module/basel_product.twig

focus.style
  • 6,612
  • 4
  • 26
  • 38
  • /home//public_html/whitedotsports/system/library/template/Twig/Environment.php(312): Twig_Loader_Filesystem->getCacheKey('basel/template/...') #2 /home/darzixtq/public_html/whitedotsports/system/library/template/Twig/Environment.php(378): Twig_Environment->getTemplateClass('basel/template/...', NULL) #3 /home/darzixtq/public_html/whitedotsports/system/library/template/Twig/Template.php(286): Twig_Environment->loadTemplate('basel/template/...', NULL) #4 /home/public_html/wh in /home//public_html/whitedotsports/vqmod/vqcache/vq2-system_library_template_Twig_Loader_Filesystem.php on line 215 – WhiteDot Sports May 28 '20 at 13:07
  • This is the page where I have added this module. https://www.whitedotsports.com/CRICKET – WhiteDot Sports May 28 '20 at 13:10
  • About cache cleaning for .twig files update here https://stackoverflow.com/a/61524855/3187127 – focus.style May 28 '20 at 13:25
  • I tried through CSS, after clearing cache, it shows no change.Its same. – WhiteDot Sports May 28 '20 at 19:02
  • Try to add it in *Extensions - Basel Theme - Theme Settings - Custom CSS* – focus.style May 28 '20 at 19:18
  • Hey, I can provide you with FTP details if you can fix it. – WhiteDot Sports Jun 08 '20 at 07:12
  • And admin panel. You will find my email in my profile. – focus.style Jun 08 '20 at 07:49
  • You can send it. Then I will write down a solution here. – focus.style Jun 08 '20 at 11:54
  • Hey, I have sent you the details. Please check. – WhiteDot Sports Jun 09 '20 at 09:36