Joomla template overrides gallery's CSS
8 years 3 months ago #778
by Julien
Joomla template overrides gallery's CSS was created by Julien
Hi,
I'm using Joomla and was able to display a responsive gallery with the thumbnails. Therefore, when wlicking them the fullscreen slideshow is launched but invisible (I can see it in the browser debugger) !
It seems that it is due to the template I use since using the default one, it works.
Does anyone knows how to force Joomla to use the module's properties (CSS etc...) instead of the template's ones ?
Thanking you for your support !
I'm using Joomla and was able to display a responsive gallery with the thumbnails. Therefore, when wlicking them the fullscreen slideshow is launched but invisible (I can see it in the browser debugger) !
It seems that it is due to the template I use since using the default one, it works.
Does anyone knows how to force Joomla to use the module's properties (CSS etc...) instead of the template's ones ?
Thanking you for your support !
Please Log in or Create an account to join the conversation.
Less
More
- Posts: 37
8 years 3 months ago #779
by forumsupport
Replied by forumsupport on topic Joomla template overrides gallery's CSS
Hello Julien,
this seems to be a template related issue, as you already guessed.
The slomo plugin loads the module output and all css files the module adds to the HTML, otherwise, it wouldn't work when you use the default template.
Maybe your template uses the same css class names (or at least some of them) than the gallery does and overwrites some styles, or it inherits some general definitions from your template, like e.g. a general div definition.
What you can do is to try to find out which classes get overwritten by the template, then you can create overrides for them and add them to a separate css file.
Some templates load a extra css file for custom css styles (often called custom.css), you can e.g. use this file, or maybe your template allows to add css styles via the backend - this depends of course on your template.
From what you describe (you can see the gallery html code in the browser debugger but it is invisible), its possibly the z-index property which is not correct. If your template uses relative/absolute container positioning, it is possible that the fullscreen gallery is displayed 'behind' the normal content, since its z-index property is too low, or the z-index of the 'normal' content is too high - this depends.
Regards
this seems to be a template related issue, as you already guessed.
The slomo plugin loads the module output and all css files the module adds to the HTML, otherwise, it wouldn't work when you use the default template.
Maybe your template uses the same css class names (or at least some of them) than the gallery does and overwrites some styles, or it inherits some general definitions from your template, like e.g. a general div definition.
What you can do is to try to find out which classes get overwritten by the template, then you can create overrides for them and add them to a separate css file.
Some templates load a extra css file for custom css styles (often called custom.css), you can e.g. use this file, or maybe your template allows to add css styles via the backend - this depends of course on your template.
From what you describe (you can see the gallery html code in the browser debugger but it is invisible), its possibly the z-index property which is not correct. If your template uses relative/absolute container positioning, it is possible that the fullscreen gallery is displayed 'behind' the normal content, since its z-index property is too low, or the z-index of the 'normal' content is too high - this depends.
Regards
Please Log in or Create an account to join the conversation.