Soliloquy Slider Styling on Outreach Pro

[palpatine]

Hello All,

So, since the installation directions for Outreach Pro said to either use Genesis Responsive Slider, or the slider of choice, I put the Soliloquy slider on the Home page of Outreach Pro.

The problem is, it doesn't style nearly as cool as the Genesis Responsive slider does. Especially the big white frame it puts around the slider.

Does anyone know what code I could use to get Soliloquy to look as cool as the Genesis Responsive slider does in that theme?

Thanks,
Aaron

http://oldcanyonranch.com

[AnitaC]

You can take the same styling for Outreach and apply them to the CSS of the Soliloquy slider.

---

Need help with customization or troubleshooting? Reach out to me.

[palpatine]

Hi Anitac,

I was thinking something like that... but taking the styling of Genesis Responsive Slider and using it for Soliloquy... I just don't know how to do that 🙁

Also, when you looked at the site, I had tweaked the css of home-top a little bit to try and remove the frame that I was referring to in my original post. Unfortunately that didn't work either. I just reverted it back to normal and it doesn't look good.

Have a tip on how to just remove that big ugly white border around the slider?

Thanks,
Aaron

[AnitaC]

Look for this. It's the padding in both of these. Adjust to your needs.

.home-top .widget:first-child {
    padding-top: 4rem;
}
.home-top .widget {
    margin: 0;
    padding: 0 4rem 4rem;
}

---

Need help with customization or troubleshooting? Reach out to me.

[palpatine]

Hi Anitac,

Here's what is there by default:

.home-top .widget {
margin: 0;
padding: 0 40px 40px;
padding: 0 4rem 4rem;
}

.home-top .widget:first-child {
padding-top: 40px;
padding-top: 4rem;
}

Would this work?:

.home-top .widget {
margin: 0;
padding: 0 0px 0px;
padding: 0 0rem 0rem;
}

.home-top .widget:first-child {
padding-top: 0px;
padding-top: 0rem;
}

Thanks,
Aaron

[AnitaC]

Do it this way - replace yours with mine.

.home-top .widget {
margin: 0;
padding: 0;
}

.home-top .widget:first-child {
padding: 0;
}

---

Need help with customization or troubleshooting? Reach out to me.

[palpatine]

Thanks Anita,

I did that, but I have a couple of questions:

1. Why is it that the child themes have both px and rem? Is this something I should be concerned about? I mean not addressing both?

2. Your fix worked pretty well, but there's a funky white line (sometimes dotted) that now appears right at the bottom of the text overlay shadow... Do you know how to fix that?

Thanks again for your time. I really appreciate it.

-Aaron

[AnitaC]

The px and rems are what they call Fallbacks for different browsers.

The dotted line is here:

.widget li {
    border-bottom: 1px dotted #494949;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}

---

Need help with customization or troubleshooting? Reach out to me.

[palpatine]

Ahhh, interesting. Originally I didn't think that the dotted line was there by default, but I guess it is... on every other slide? Sometimes the line is solid and sometimes its dotted. Weird?!?

In any case, it's just much more prominent now that I've removed that padding.

With regards to the Fallbacks...

Am I going to run into some cross-browser compatibility issues now that I just zeroed the padding out and didn't specify px and/or rem?

Thanks again for your assistance!!!

[AnitaC]

You shouldn't because 0 is 0 no matter what.

---

Need help with customization or troubleshooting? Reach out to me.

[palpatine]

Makes sense to me 😉

Thanks again Anita. Who needs Soliloquy support, who wasn't very helpful btw, when you've got pros here that are so willing to help a newbie out.

Give your doggie a kiss for me and have a good one.

[AnitaC]

🙂 Thanks and he will appreciate the extra kiss.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts