Slider Pro (Free Edition) Image Borders

Hi Mike,

Thank you for the compliment!

If you want the border to be around the whole slider/carousel, not just individual slides, you can use this CSS:

.sp-mask {
    border: 5px solid red;
    box-sizing: border-box;
}

If you want to add it around individual slides, you can use this:

.sp-image-container {
    border: 5px solid red;
    box-sizing: border-box;
}

Best,
David

• This reply was modified 3 years, 1 month ago by bqworks.

Hello David,

Thank you for the quick reply! Sorry to bother you again, but I’m pretty new to CSS so I have a few additional questions based off the answers provided above:

1) Where would I apply each of the snippets of CSS code above in each case?
a) I can’t find the spot to apply a border around the entire carousel

b) I’ve tried to apply the code above for “each slide” within both the “DIV” layer of the slide as well as the raw html aspect of the slide without any success.

2) Off topic, I’ve been creating some layers for one of my slides; in essence creating a “text over image” slide with animations; however, I can’t get paragraphing to work within the “div” layer. I’ve added the below into two separate “div” layers so that I can have a heading slide in, then have some text slide in afterwards which contains several paragraphs marked out in the code, but for some reason; the preview shows the paragraphs splitting / line breaking correctly, but the slider on the actual page does not have the paragraphing / line breaking correctly displayed:

Heading code: <h3 style="color:white; font-size:14px"">Testing Header</h3>
Text code: <p style="color:white; font-size:11px">This is the first paragraph I want to add in with a blank space underneath it</p> <p style="color:white; font-size:11px">This is the second paragraph I want to add in with some <b>bold text at the end</b></p>

I want the coding above to look something like this:
“Testing Header

This is the first paragraph I want to add in with a blank space underneath it.

This is the second paragraph I want to add in with some bold text at the end.”

Again – I really appreciate all of the help!
~Mike

• This reply was modified 3 years, 1 month ago by shukero.
• This reply was modified 3 years, 1 month ago by shukero.

Hi Mike,

You can add the CSS code in Appearance -> Customize -> Additional CSS.

Regarding the layers, differences between the preview and the published slider might be due to external CSS that affects the slider, but I can confirm this only if I take a look. As an alternative to using a DIV layer you could add the paragraphs into two separate paragraph layers.

Best,
David

Hi again David,

Thanks for all of the help. I can confirm that adding the CSS to the Additional CSS section of the customization menu did the trick.

I really appreciate all of the help; and you taking a look at the DIV problem. I can confirm that I don’t believe that their is any additional / external CSS (That I know of anyway) outside of the theme I’m using, which in “Nirvana”.

Thanks again for all the help!
~Mike

You’re welcome, Mike!