How to style a page inside s-box popup

Question

After an update of few components and Joomla some of front-end users noticed that when inside article's creation clicking on "Introduction image" shows a modal (/index.php?option=com_media&view=images&tmpl=component&asset=com_content&author=created_by&fieldid=jform_images_image_intro&folder=) with all messy stuff.

I don't get any console particular errors of missing CSS or other stuff, i would like to beautify that page, but would need to put some particular class on body class to override the background. How could I do that?

Answer 1

All of those key=value pairs in the url are available from the jinput thus you could use a system plugin to add a specific style sheet to add styles. Or you could modify your template's component.php file to add a body class and then use that in your regular style sheet. The later is fine if you never update that template.

Anyhow, read through both of these for useful examples:

Adding custom CSS styling on some of my pages

How to add custom JS/CSS file, without modifying the template (from extension)?

Answer 2

You can do it easy with the old Joomla Core Modal, Bootstrap modal script or the extension Modal from Regular Labs and a little template override in Templates > Templates > Your Template html/com_content/article/default.php If you want to have as an option you can rename it - ex modal.php

Regular Labs - Modal

Bootstrap - Modal

The old Joomla Core - with mootools - not expected to work in Joomla 4

Joomla - About Overrides