Kookaburra modal design question

Backlight 4, 5 & 6 Support
#1

Hi all,

how to design the modal without affecting the slideshow?
I tried the following e.g.:

HTML:

<a data-fancybox href="#tiltshift">Tilt/Shift-Objektivs</a>
<div id="tiltshift" style="display: none;"><p>text</p></div>

CSS:

.fancybox__container {
–fancybox-bg: rgba(0, 0, 0, 0.35);
–fancybox-content-bg: rgb(255, 255, 255);
–fancybox-content-color: #393939;
}
…
this is styling the Modal but affecting the slideshow.

then I tried CSS with . and # :

tiltshift .fancybox__container {
–fancybox-bg: rgba(0, 0, 0, 0.35);
–fancybox-content-bg: rgb(255, 255, 255);
–fancybox-content-color: #393939;
}

but nothing happend :thinking:

what am I doing wrong?
Best regards,
Oliver

#2

can you post a link to a page using the modal?

And try targeting the css to the specific page using a body selector. That way, you won’t affect anything else.

and the bottom of this post:

#3

Hi Rod,
thank you for your prompt reply.
here you will find the link which is triggering the modal:

Tilt/Shift-Objektivs

at BARCELONA PHOTO TOURS & WORKSHOPS - Valencia Fototouren

#4

In CSS, . denoted a class name, and # denotes an id.

So in this case, you should target using:

#tiltshift {
  --fancybox-content-bg: rgb(255, 255, 255);
  --fancybox-content-color: #393939;
}

Worth noting also that #tiltshift .fancybox__container would do nothing, as the selectors are in the wrong sequence. And I think it won’t be possible to set --fancybox-bg here, because it’s used before the #tiltshift in the DOM tree.

Btw, did you check out the “Modals” control group for Kookaburra Page? It offers some color options.

Anyway, if you want to apply custom styling for this one modal, then you’d probably need to instantiate the modal specifically, rather than relying on the “generic” instantiation code, and then you’d be able to specify options, such as a custom class name for the container that would allow you to target styling. This is what I have to do for our slideshows.

#5

I got it and everything is working.
Thank you Rod and Matt for your help :smiley: