LightSlider CSS

Archive
1

Question: I would like to eliminate the space between the top of the LightSlider and the bottom of the menubar (see attachment). This was somehow done in the Shop Site Template/Skeleton, but I cannot seem to locate it.

What might the CSS be so I can add it to my Custom.css file?

Capture

2

I could tell you for this instance, or i could ‘teach’ you how to do it yourself so you will always know in the future :slight_smile: I prefer the second approach…

Ok assuming you use Chrome (if your developing stuff, you should!) do this:

  1. Right-click on the page and select Inspect in the context menu. Below are now your developer tools!
  2. Click the top-left icon in to the developer tools, and then mouse over your page and select the highest level item in the HTML that relates to the lightslider. In this case it’s a <div ... class="grav-lightslider"> element.
  3. In the the styles inspector in the right, you should see all the CSS styling, you can play with this live!.
  4. You will see there is already some styling coming from _custom.scss:
#body > script:first-child + .grav-lightslider {
    margin-top: -3rem;
}

This is providing a negative margin to snug it up.

If you are not seeing this, then perhaps you change the HTML layout and don’t have a script tag with a sibling of class .grav-lightslider (the Div I mentioned).

Anyway, this file is an SCSS file and needs to be compiled to if you change it (see the docs about how to do that).

Another way to add/edit modify this is to simply put your CSS into css/custom.css of your template (assuming it’s loading a custom css via:

{% do assets.addCss('theme://css/custom.css', 100) %}

Hope that helps!

3

Sorry, I already tried that, and I already had a custom.css started (which is loading fine). However, I don’t have the div you specified. It is in the template css, but when I add it to my custom.css file and changed the setting nothing happens. I am using a child theme of Antimatter (if that matters; the child theme seems to be working fine.

4

The div comes from the output of the lightslider plugin. It really wouldn’t work at all without it.

5

As I said, the DIV is in the Custom.css files, but not showing in Chrome Inspector, any suggestions?