[AntiochHoustonParticipant]

Hi there,

I’m having two problems on my website http://242.347.myftpupload.com

1. When posting a button on the revolution slider, the button is showing up with a black border and orange text, even though the button class I set (.x-btn) is a white border with white text.

2. I used the following shortcode:
[button class=".x-btn" href="http://vimeo.com/52631139" title="Welcome Video"]Welcome Video[/button][lightbox selector=".x-btn"]
This is not having the video show up unfortunately.

Thanks for your help – you guys are incredible.

[ZeshanMember]

Hi there,

Thanks for writing in!

#1: Please add following CSS under Custom > CSS in the Customizer:

.rev_slider_wrapper .x-btn {
    color: #fff;
    border-color: #fff;
}

.rev_slider_wrapper .x-btn:hover {
  color: #ddd;
  border-color: #ddd;
}

#2: I’m seeing that you have already fixed this. However, for the future reference, it seems you are adding class to your [button] shortcode along with the period sign “.”. Please note that you don’t have to add dot/period before the class on [button] shortcode, it is only important when you add that class as a selector to your [lightbox] shortcode.

Apart from that, as you have targeted the lightbox for x-btn class, and as it’s a class for every button in your website, it’s going to be applied for all the buttons. So I’d advise using a unique class, for example, rs-video-btn.

Hope this helps. 🙂

Thank you.

[AntiochHoustonParticipant]

Cool. That helped! I also implemented your recommendation.

Two more questions:
1. How do I make the lightbox not have a copy of the video show up when I click on it?
2. Make the lightbox video not take up the whole screen (similar to the demo site http://theme.co/x/discover/)

[RadModerator]

Hi there,

1. Video is duplicated as lightbox gets duplicated too. Slider duplicate slide even if it’s a single slide. That is to create a loop when user preferred to display controls.

The only solution is placing your lightbox shortcode outside the slider’s slide. You can add it at your next content bands while the button is inside the slider.

Then the selector should be like this, selector=".current-sr-slide-visible .rs-video-btn"

2. There is a javascript error that could affect the size of your lightbox. How about providing your admin login in private reply so we could conduct some test.

Thanks!

[AntiochHoustonParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

The suggested selector is never added selector=".current-sr-slide-visible .rs-video-btn". I added it as a shortcode and change selector to this .tp-revslider-slidesli:first-child .rs-video-btn. It’s now display single video.

About the javascript issue, I can’t find what causes it. But you may add this css at your customizer’s custom css to override your video lightbox size.

.ilightbox-holder.light {
  top: 30px !important;
  bottom: 30px !important;
  left: 30px !important;
  right: 30px !important;
}
.ilightbox-holder div.ilightbox-container {
  width: 100% !important;
  height: 100% !important;
}

You may add your own values 🙂

Hope this helps.

[Author]

Posts