You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#107399 MediaBox Lightbox CSS styling

Posted in ‘Mediabox’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Friday, 16 April 2021 10:44 BST

sh-si
Hi, i'm looking for an ability to style special lightboxes via CSS. Normal Lightboxes are working well on the whole page. Now my customer wants a special styled popup (change of background color, change of text color, movement of cross / close button) on a special page. I'm able to: [list] [*] open a popup with an internal content page [*] set height and width [/list] There are always scrollbars no matter how much content is inside. This is due to

.wf-mediabox-content-ajax {
    overflow: auto;
}
and i would like to fix this with a kind of class or id to identify the special one (and not to change the existing ones). I see a wf-mediabox-theme-standard class. Is it possible to set a special parameter inside the popup link to add a special class to the wf-mediabox or change wf-mediabox-theme-standard to wf-mediabox-theme-custom? Inside this class i can change the overflow behaviour and background colors and so on. Or do you have another idea how to solve this? Would be great! Thanks, Stefan

Ryan
There are always scrollbars no matter how much content is inside.


Can you post a link to an example?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan
I"ve just a released a dev version with a slight change, so you can use a css selector to target a specific popup - https://www.joomlacontenteditor.net/downloads/mediabox/development So, to apply css to an individual popup, where for example the popup src is an image with the src images/nature.jpg, use a selector like this:

.wf-mediabox-body[data-mediabox-src$="images/nature.jpg"]
so you can target parts of the popup, eg:

.wf-mediabox-body[data-mediabox-src$="images/nature.jpg"] .wf-mediabox-container {

}
etc.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

sh-si
Very good idea! Thanks! I'll try it tomorrow.

sh-si
Unfortunately RC6 does weird things. I have to reset it...

sh-si
hmm. doesn't seem to get back to work with RC5 🙁

sh-si
With 2.1.1 it's working again...

sh-si
Also the scrollbars are gone with 2.1.1, behaviour is correct now.

Ryan
I have fixed the issue in RC6. You can get RC7 here - https://www.joomlacontenteditor.net/downloads/mediabox/development

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

sh-si
Hi Ryan,

thanks! Great! I appreciate your help everytime!
As you can see, it works.

Unfortunately i'm not able to post more here. Reply hangs...

sh-si
Let's try it in more messages What about having a parameter "custom" or "style" (instead of using src) and give there a value which we can use in the styling.

<a href="https://www.joomlacontenteditor.net/test-job-popup/2-allgemein/49-popup-jobs.html" type="text/html" class="noicon wfpopup" data-mediabox-src="https://www.joomlacontenteditor.net/index.php?option=com_content&view=article&id=49:popup-jobs&catid=2:allgemein" data-mediabox-custom="color" data-mediabox-type="text/html">Beitrag</a>

sh-si
With that new introduced "src", i have to style content instead of styling the "surrounding" popup / container. The styled popup should be able to load any content without adjusting css.

At the moment i always have to add / change css, if i'll change the content (src) of the popup.

This would be great and from an architectural perspective more clear.

Thanks a lot!

sh-si
An additional point / BUG: Having this Popup as an "autopopup" leads in a never ending loop of refreshs...

Ryan
Please try RC 8 - https://www.joomlacontenteditor.net/downloads/mediabox/development I have removed the src attribute and added an option to pass through a class name (class names seperated by a space) using a data-mediabox-css attribute on the popup link, eg:

<a href="https://www.joomlacontenteditor.net/image.jpg" class="jcepopup" data-mediabox-css="custom">Click</a>

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.