I have just added a content slider to my layout and set a link, which according to the little pop-up means it’s applied to the whole slide. I did not set a Link text or Button.
What’s more, I’ve set the URL to the source image file of the photo being used in the slide, so that the visitor can click on the slide to enlarge the image. This should obviously load in a lightbox and not the browser window itself. I realize that this is currently not possible out of the box with BB (I’ve also just added this as a feature request). However I am sure a JavaScript snippet could work wonders and make this possible right now. Could you maybe point me in the right direction as to what JS I could implement or do you know of a cool WP Plug-in to achieve this with?
But first of all, I need to get the slide to link to start with!
Thanks for getting in touch! I’ve already submitted a bug report regarding the Content Slider link. It’s currently only working with background-images, not background-colors.
The only plugin I could think of is Popup Maker. You can set the links in the content slider to # then target the anchor tag per slide on the Popup Maker.
ok I’ve added a second slider with a background image and indeed the link works there, if only on the right hand side due to another div covering up the left…can be sorted with z-index or repositioning though no doubt.
I guess I could improvise and set the CSS to background-size: initial, so that it doesn’t stretch it to cover the slider, and then use more CSS to position the heading and text above and below it, but obviously I would prefer to use the Content Layout for that kind of stuff as I have achieved on the 1st slide…
Realistically when do you think the bug would be sorted?
Custom CSS always works. Sorry but that would entirely depend on the when the guys have the time for it. It would also depend on the complexity of the changes that needs to be done.
here is the CSS code, with lots of hacky !important overrides. Looking forward to see your suggestions so that I can work out the selectors to use for other parts of the site:
right i’ve installed Popup Maker. I now need to set the following class=“popmake-78” to either the a or img element in the slide to trigger the popup. But there’s no way to set it in the BB module. I also don’t see a feature in Popup Maker to target the anchor as you suggested above. Any ideas?
Since you’ve assigned an ID to your content slider, you can just use that selector and it should override anything from the BB stylesheet without declaring them !important. We don’t use IDs and any CSS declared with an ID will always have a higher specificity than those without. I’d suggest simply placing #collection before each of your selectors and it should work. The only exception is the last one. Our stylesheet declares a margin for those elements important so the only way to override that is to have a more specific selector and declare it important as well.
There should be a setting on the right side for Extra CSS Selectors. You can place it there. Check the screenshot for reference. http://imgur.com/rljnO3m
many thanks for that answer. Ok but what happens if i DONT use the ID (as outlined in previous ticket), becausae I need to use the slider various times on one-page and it wouldn’t be W3C standard validated to use an element with the same ID various times on one page? So really I want to be changing the ID to a class called “collection”. How would I override the selector chain then?
You’re gonna have to place in as many CSS selectors as you can to have a higher specificity to override the default values. I use Chrome and the dev tool is really a great help when achieving this. You may also want to read more on CSS specificity. You can check the link below. http://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
thanks, I use the Firefox Dev Tools and I am struggling to figure it out because BB has some many nested divs and classes (despite being much better than other Visual Builders). I have read that guide on SM before thanks.
I was hoping there’s a “knack” to overriding the BB selectors, which you might know and be able to tell me without me having to figure it all out using the formula in the guide, but I guess I will have to dive into the deep end and get my head around it.
just one more question: I have set .fl-slide-bg-photo a as the target class in Popup Maker, but it doesnt work. Looking at the 2nd slide of the 1st slider on the link I’ve given you, what would be the correct selector for it to hook up?
Did you want the entire slide to be the link? You can target .fl-slide-0 or whatever the slide number is. I did quickly try it on my localhost and it works fine. Let us know how it goes for you!
ok well I figured out why it wouldnt work. I had set “Targeting Condition” to “On Pages” and then picked the “Collection” sub-page where the sliders are. For some reason it doesnt work with that setting. No wonder no selectors I was putting in were working!
If I then just enable “On Entire Site”, the pop-up works perfectly. What’s the reason for that? Something to do with BB and the way it’s integrated with WP?
Not really sure about that. I tried setting Targeting Conditions to a specific page and it works on my end. You actually have to click on the Add Selected button on the lower right to add the page.
