Media Element design

Hi Thomas,

1. MediaElemnt.js works, but is ugly. Where to change design of it?
2. I have design problem with WIDTH, now is 80% and not 100%. Also on Firefox are not displayed information about played sermon
3. my template use some design for <hr> tag, and it is ugly with medialement.js player. Solution would be not to have <hr> in player
4. more information is on attached images
5. how to use better design for MediaElemnt player?

Thank you very much,
Radovan

Hi Radovan

All of the HTML and CSS for SermonSpeaker is overrideable in your template. So you should be able to adjust the design to your needs.
If you don't like the <hr> tags around the player, you could either hide them using CSS like this: Or you can adjust the HTML in the JLayout. The file you need to override in your template would be components\com_sermonspeaker\layouts\plugin\player.php. You should be able to do that from the Joomla Template Manager. There is an additional JLayout for the info area in a subfolder there.
The above JLayout uses a Bootstrap class ("col-10 mx-auto") to get that 80% width. You can again use CSS to override that behavior or you adjust the JLayout and remove the class.

You can also override the player.css SermonSpeaker loads for the player.

It should even be possible to override the CSS from the player itself (media/plg_sermonspeaker_mediaelement/css/mediaelementplayer.min.css) in your template, but I haven't tried that myself.

Does that help?

Hi Thomas,

1. thank you for quick reply.
2. Yes, it was possible to create override. It was created in /templates/my_template/html/layouts/com_sermonspeaker/plugin/player.php (as copy from components/com_sermonspeaker/layouts/plugin/player.php)
3. In SermonSpeaker Options (Global) I have format of date "07. december 2024" but in MediaElement player on frontpage is date in "24-12-07" format. I want have same format as is in Options. Where to change it?
4. not everything is adjustable through Joomla overrides (player), it seems, that JavaScript is using some tags from PHP files to load information about date and played sermon. But for now I will leave it as it is.
5. I am using custom module with php code (attachment).
   So as source is used MP3 file with current date. Is possible somehow to use SermonSpeaker plugin to play mp3 files as is described on picture? I have it in module position. Reason is to have the same design of player on webpage.

Thank you
Radovan

3. I'm not sure I understand. What view or module do you have on the frontpage where the date shows wrong? How the date is formatted, depends also on the active language in Joomla (if set up multilingual). So maybe that plas a role?
4. The playlist for the player is created by the player plugin PHP code. That part isn't overrideable. You would have to create your own plugin to do that (which absolutely would be possible).
5. If you want to use the SermonSpeaker player for non-SermonSpeaker files, it could get a bit tricky. You would have to write your own $item object and pass that to the helper. Read more here:  SermonSpeaker - Advanced Layouts . Or you can just take the MediaElement player from  MediaElement.js - HTML5 video and audio unification framework  and implement it yourself. Maybe there is also already a plugin for it available on  Joomla! Extensions Directory

Hi Thomas,
3. there is different DATE format in backend than in frontend. Please see attached images.
5. I am not so good at programming, so I will have to leave it as it is. But if I will create Sermon Speaker category for daily MP3 files (daily thoughts or meditations) I can display them in Media Element player. Only problem is, that I will have to change manually date of publishing of records one by one every year. Year has 365 days, so 365 manual changes of "publishing date". Some bulk operation in database would be solution. Advantage of my current system is, that is handy to replace year in files (e.g. "2024-12-08.mp3" to "2025-12-08.mp3") on PC (e.g. by Total Commander) and upload to server. And PHP scrip on frontpage will generate correct date in script - HTML player (module position on frontpage) and therefore load correct mp3 record with sermon on current date.

Thank you,
Radovan

3. The image helped me. I'll have a look if I can change that date format in the info area so it matches the selection.

5. Did you try if it works with the "Latest Sermons" Module?
Eg set it to one sermon only, sort by date descending, filtered by that specific category and show only the player.
The sermons then should set to be published at that specific date.
I think that should work, but haven't tried.