Slider with border

[davidcpa135]

I’m sure this has been answered in the past but I couldn’t find a post on it that wasn’t a few versions out.
Using current version of Alyeska and WP 4.2.2 with child theme.
My slides were created with a 940 width with one being a slightly different height which I can live with.
Due to an all white background, I’d like to eliminate the grey border around each slide.
Used the Chrome inspector but could not find what’s controlling this.
BTW-using the fade effect.

Topic

[Jason Bobich]

Hi,

Do you have a live link to your site where you’re trying to do this?

[davidcpa135]

Sure thing (this is a nonpublished development link and still very rough draft).

http://fa1.024.myftpupload.com/

[Jason Bobich]

In your chrome inspector, check out the DIV with class “slides-wrapper” — Here’s where you’ll find a border and padding applied, and what you’ll override from your custom CSS.

[davidcpa135]

After searching for a while, found and loaded this into the child theme style.css

Note: The parent theme does not include any CSS in
style.css, and so you don't need to @import it here.
*/

/* Add your custom CSS here. */
.slides-wrapper, .tb-nivo-slider-wrapper .slides-wrapper {
  background-color: #fff;
   border: 0px; 
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px; 
  border-radius: 0px; 
  padding: 20px;
}

seems this would cover all wrapper but it produces on change.

[Jason Bobich]

You selector is not specific enough to override other places the theme is styling this.

In order to make CSS customizations like this, you’ll really need to learn how to utilize an inspector. Getting over this hurdle will make your life so much easier.

So, inspect with your Chrome inspector, under the “Elements” tab, find and click on on the div with class “slides-wrapper”. Now, over in the right column, it shows you what CSS is applied. Whatever is at the top is the most specific selector, and what’s directly effecting the element. And as you travel down, the styles are less specific and being overwritten.

See how what you did above is not specific enough? It’s too far down. Now what do you see there that the theme is doing, which you could copy and use in your style.css?

[davidcpa135]

Apologies for being slow but starting to get there. Based on the top-down idea that you mentioned I changed the first (top) occurrence as follows:

.standard-slider-wrapper .hide-full_nav .slides-wrapper, .tb-nivo-slider-wrapper .hide-full_nav .slides-wrapper {
  padding: 12;
  border: 0px;
}

This worked well in getting rid of the border but two events caused me to fumble with it for a couple of hours
1- I’ve always read that CSS applied in descending order so had assumed that the flow would be from the bottom up rather than the reverse.
2-In my first attempt, by unchecking the subsquent border box (in the inspector) it killed the border on screen and thus seemed to be the fix.

In any case, I really appreciate the help. I’ll try to figure out why the #2 works as it does.

[Jason Bobich]

Awesome, glad you figured it out. But now that you understand that, think of how many things you’ll be able to figure out. Should open up lots of doors for you.

[Author]

Replies