[Rayna CParticipant]

Wordpress v. 4.1
X v. 2.4.0
Shortcodes v. 2.4.0
Visual Composer v. 4.1.3
Browser: Chrome on Mac, latest version
Page with issue: http://fantasticrace-comp2.blissvilledesign.com/galveston-race/

Hello X Team,

I am building a site and am trying to use the Custom Slider Layout (as opposed to the more common Auto Responsive Layout) for the revolution slider on one of my pages. The problem is that the blue border I’ve created using the slider background color and padding settings in the Appearance settings of this slider are only showing up as a border around the slides on the top and the left side. There is no border on the right side or bottom, so it looks like the slides are hanging over the blue background. I cannot find a setting or a custom css adjustment to correct this. I can’t use the auto responsive layout because the images I have for the slides are too small/low res, and when I use auto responsive layout (or full width for that matter), it stretches them and they become blurry.

Yes, I am using an old version of X and its plugins on this site build. This is because when I updated them recently, it broke my homepage layout, as well as my main navigation design. And no, I am not using a caching plugin. Not sure what’s up with that, but I figured I’d finish building the site and then try and address those problems. I have another developer designing the homepage, so I also need to let them finish that, and then try to help me debug the issues that updating created. So please don’t tell me to update my stuff and then come back here, because I can’t update right now. I am hoping instead that you can give me a setting to adjust, or some custom css that will fix this problem. This happens with the fixed layout as well, but not with auto responsive or full width.

Thanks for you help!
Rayna

[ChristopherModerator]

Hi there,

Please delete background color and add this code under Customize -> Custom -> CSS :

#rev_slider_9_1 {
border: 10px solid rgb(0, 111, 186);
}

Hope it helps.

[Rayna CParticipant]

Thank you!! Worked like a charm 🙂

~Rayna

[ChristianModerator]

You’re welcome Rayna. Glad we could help. 🙂

[MaParticipant]

This reply has been marked as private.

[RupokMember]

Hi There,

Thanks for writing in!

#1 & #2 : I can’t see any border on your slider. It’s the background you have set for the slider wrapper. Let’s remove it to get rid of that border like background color. Also remove the 10px padding you have set.

If you can’t figure out then you can also add the CSS through Appearance> Customize > Custom > CSS

.rev_slider_wrapper {
  background: transparent none repeat scroll 0 0 !important;
  padding: 0 !important;
}

#3 : You can add the following CSS –

body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 40px;
}

Let’s change the value if needed.

Hope this helps.

Cheers!

[MaParticipant]

#1 Hi there, thank you for getting back to me. I just removed the background color and padding in Slider settings, I didn’t use the CSS provided. Is it possible to keep this settings but make it look like it look like a border goes all around with a color, let’s use red for now? When I go to Column, Border, Solid, in Cornerstone the border doesn’t go all around the slider. The slider wrapper gets closer to what I am trying to achieve but it doesnt go all the way around either. How can I make this happen?

#2 Thank you that worked great! 🙂

[Paul RModerator]

Hi,

Please remove the border in your column, then add the code below in your custom > css in the customizer.

body .rev_slider {
    border:10px solid #744288;
}

Hope that helps.

[MaParticipant]

That looks like it’s for all sliders, I need two different colors for different sliders. What should I use to differentiate them? I dont think sliders have class right?

[Paul RModerator]

Hi,

You can add a class to your column element where your slider resides.

eg. Add blue-border class in your column

http://screencast.com/t/Om5sGKVNaZ

Then add this css code in custom > css

body .blue-border .rev_slider {
    border:10px solid blue;
}

Hope that helps.

[MaParticipant]

Thank you!!

By the way I noticed it also works even without the class, and even though I go to another page with a revolution slider it doesn’t show up the same, even though I didn’t enter a class. Why does it work like this with Cornerstone? If I didn’t add a class there wouldn’t be any conflicts? Even if I entered the same code on different pages?

Can I also please ask for two more pieces of advice?

#1 For styling, is it possible to get the border on top, on right, on left, but not on bottom? So everywhere but the bottom?

#2 Also, what if I wanted to do the same thing for a section (borders around section?) Thank you!!

[Paul RModerator]

Hi,

Yes, this will work without a class as long as you added the code in cornerstone > settings > custom css and if you have only one slider on the page. All css code that was added in cornerstone will only affect that page so there will be no conflict with other pages.

#1 Yes it’s possible, you can change the code to this.

body .rev_slider {
    border-top:10px solid blue;
    border-left:10px solid blue;
    border-right:10px solid blue;
    border-bottom:0;
}

#2 You can add a class to your section then add this in custom css.

    .my-classname {
        border:10px solid blue;
    }

Please note that you need to enable advanced controls for the class field to appear under your section settings.

Hope that helps.

[MaParticipant]

A BIG THANK YOU!!

[Rue NelModerator]

You are most welcome!
We are glad we were able to help you out.

If there’s anything else, we can help you with, please let us know.

[Author]

Posts