Shortcode-modal box/image size

Support Plugins
1

I am using this plugin shortcode-modal for some of my images see here for example

[modal name="dsd1"] 
![DSD Example](dsd65.png)
[/modal]
[modal-launch modal="dsd1"]![DSD examplet](dsd65.png?resize=200)[/modal-launch]

Want to make the pop up image bigger, ideally to show image at 100% but I would settle for scaling it or even a fixed width.

Do I need to create a class for the box, if so how?
Thanks in advance for your help.

2

Your jquery.modal.min.css has:

.jqmodal {
    max-width: 500px;
    width: 90%;
}

I guess it should instead of these two styles be

.jqmodal {
    max-width: 90%;
    max-height: 90%;
}
3

@Karmalakas
Thanks for that, its obvious when you know how.
I ended up just increasing to 700px which was better on the eye.

All I need to do know is work out how to create a custom css for a plugin so any changes don’t get over-written on every update.
Plugins don’t pick up from my theme custom.css

4

What’s your theme? Does it have custom.css included somewhere in base.html.twig? Eg.:

{% do assets.addCss('theme://css/custom.css') %}
5

I’m using my own custom theme based on A-learn.
It’s got a custom.css which works for most things. But seems to be ignored by the plugins as their own css seems to override it

6

Your max-width: 700px; now does the same thing as original style. It limits image size even if there’s plenty of room on screen and image is bigger. Also setting max-width: 700px; and leaving width: 90%; doesn’t make much sense.

Also I see your custom.css is added way before any plugins CSSes, so plugins just override your custom styles. Try changing custom.css priority to maybe 50 or even lower, so it would be included the last.

Also try in your custom CSS:

.jqmodal {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
}

Result should be much better for various sizes of images

7

Thanks again for your help, I’m still learning.
Slight error in info.
My own them A-Learn is using inheritance from Learn2
The custom.css is setup as per your example as generally works.
I set the priority to 50 (then 10) but still ignored by plugins.

As a test I added an extra css notice format to the modal-core (css which is simple and I know works) to see if that would get picked up. It didn’t.

Currently left the width to 700 modified in the plugin on the production version - it looks ok.

8

You can try in custom.css:

.jqmodal {
    max-width: 90%!important;
    max-height: 90%!important;
    width: auto!important;
    height: auto!important;
}

I actually don’t see other choice. I guess it’s some common practice to have custom.css in themes included with priority 100 (at least learn2 theme does that I see) and default is 10 (if I understand the ode correctly) when priority not defined, which is most plugins. So that’s why your custom.css is above all plugins.

9

You won’t see the other test alterations, I’m playing on a local testing server not the prduction version you can see.

Not sure exactly what you are saying re prioritys but if I understand it.
custom.css is priority 100
undefined plugins are 10.
In that case I set custom.css to 5 - still the same.

Even tried adding a test.css file link in the base twig file and setting that to 5
Still can’t work out why its being over ridden.
(Yes, I am clearing caches and reloading page at every change.)
Thanks again for your help, unfortunately I think its going to be a manual change of the plugin CSS file as a last resort.

10

Even adding !important doesn’t help? :confused:

11

@Karmalakas
Thank you for your assistance and patience.
I ended up adding a second custom css file with priority 10 just for plugin mods.
Suspect there was a caching issue somewhere as now managed to get modal and the notice changes to work.
Thanks again for your help hazardex

1 Like