Post by goalsurfer » Sat Oct 06, 2018 2:21 am


Until here no problems but now I want to change the bottom margin of "<div class="swiper-viewport">...</div>" from 60px to 30px.
It is the block where a banner is displayed. With the "inspect elements" function I found next css that seems to be in a file "opencart.css":
".swiper-viewport {
margin: 0 0 60px;
background: #fff;
z-index: 1;
border: 4px solid #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
width: 100%;
position: relative;
overflow: visible;

Changing this in "stylesheet.css" of my custom theme doesn't change anything.
"Opencart.css" is not in the default theme as far as I could see and further I don't where to look for it.
If someone can localize it, how can I add overriding css?
Or maybe it doesn't even to be localized, just tell me how to override css that is not in the default theme.

New member


Thu Feb 02, 2012 7:04 pm

Post by kestas » Sat Oct 06, 2018 3:37 am


Hope this can help:


Custom OpenCart modules and solutions. You can write PM with additional questions... Extensions you can find here

Active Member


Tue Oct 12, 2010 2:23 am

Post by DigitCart » Sat Oct 06, 2018 4:52 am

It's here:

Code: Select all

You can override it in your stylesheet like this:

Code: Select all

.swiper-viewport {
  margin:0 0 10px !important;

My Extensions / DigitCart

User avatar
Active Member


Thu Jun 22, 2017 5:32 pm

Post by goalsurfer » Sun Oct 07, 2018 4:05 pm

Thanks. It' the "!important" that made the changement.

Also thanks for the youtube link that I can check out if I haven't forgotten to copy any file I need.

New member


Thu Feb 02, 2012 7:04 pm
Who is online

Users browsing this forum: No registered users and 5 guests