How to get rid of the border of a module?

jennifer333 wrote:opencart 2x uses slick module structure by default with each module having white border and box shadow.
I want to get rid of that border from a module, lets say featured products module. Where that border styling is comming from and how to erase it?

.product-thumb {
border: none;
}

jennifer333 wrote:@opencarthow.com,
Thank you for the reply,
border-thumb:none; erases the border of the individual product. What i want is to erase the container border/box shadow of the featured products module. Modules come with the default box structure. I want to get rid of that box style.

jennifer333 wrote:@opencarthow.com, thank you for the reply.
Sorry for the confusion and misunderstanding. I am talking about front end/catalog featured.tpl. By default opencart 2.0.0.1 uses no border/box shadow, but i'm using owl-carousel to make the featured products slide, which is makig the border. I had to get rid of default bootstrap setting for individual products in featured.tpl(

Code: Select all

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

), otherwise each product showing as a thin and long pieces. and to get rid of the owl carousel border i surrounded the foreach loop with div of

Code: Select all

id="featured"

and in stylesheet.css i added

Code: Select all

#featured > .owl-carousel{
	margin: 0 0 60px; 
	background: #fff; 
	border:none;
	box-shadow: none;
	overflow: hidden;
}

The problem is now there is no gap between items and if i do

Code: Select all

#featured .item{
  margin-right: 10px;
}

the fourth item is comming off the edge.
I am setting more than 4 items, and showing only 4 visible items at once.
The code i'm using for featured.tpl is as below

Code: Select all

<h3>
  <?php echo $heading_title; ?>
  <span class="customNavigation">
    <a class="btn prev">Previous</a>
    <a class="btn next">Next</a>
    <a class="btn play">Autoplay</a>
    <a class="btn stop">Stop</a>
  </span>
</h3>

<div id="featured">
  <div id="owl-demo" class="owl-carousel"   >
  <?php foreach ($products as $product) { ?>
  
  <div class="item">
  <div class="product-thumb transition" > 

      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a></div>
      <div class="caption">
        <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4>
        <p><?php echo $product['description']; ?></p>
        <?php if ($product['rating']) { ?>
        <div class="rating">
          <?php for ($i = 1; $i <= 5; $i++) { ?>
          <?php if ($product['rating'] < $i) { ?>
          <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
          <?php } else { ?>
          <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
          <?php } ?>
          <?php } ?>
        </div>
        <?php } ?>
        <?php if ($product['price']) { ?>
        <p class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
          <?php } ?>
          <?php if ($product['tax']) { ?>
          <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
          <?php } ?>
        </p>
        <?php } ?>
      </div>
      <div class="button-group">
        <button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
        <button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>
        <button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>
      </div>
    </div>
  </div>
  <?php } ?>
</div>
</div>


<script>
  $(document).ready(function() {
 
  var owl = $("#owl-demo");
 
  owl.owlCarousel({
      items : 4, 
      autoPlay:3000,
      stopOnHover:true
  });
 
  // Custom Navigation Events
  $(".next").click(function(){
    owl.trigger('owl.next');
  })
  $(".prev").click(function(){
    owl.trigger('owl.prev');
  })
  $(".play").click(function(){
    owl.trigger('owl.play',1000); 
  })
  $(".stop").click(function(){
    owl.trigger('owl.stop');
  })
 
});
</script>

How to fix it? so that first and fourth items stay at the edge and gaps only between inside items ?