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

Hello,

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

Posts

Joined
Thu Feb 02, 2012 7:04 pm

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

hi,

Hope this can help: https://www.youtube.com/watch?v=mqTstomXZiM

Cheers

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


Active Member

Posts

Joined
Tue Oct 12, 2010 2:23 am

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

Hi,
It's here:

Code: Select all

catalog/view/javascript/jquery/swiper/css/opencart.css
You can override it in your stylesheet like this:

Code: Select all

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

My Extensions


User avatar
Active Member

Posts

Joined
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

Posts

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

Users browsing this forum: No registered users and 14 guests