CSS file loading in addon

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

heribertolugo
Posts: 9
Joined: Sun Sep 18, 2022 10:51 pm

CSS file loading in addon

Post by heribertolugo »

i cant seem to load a css file into my html file addon dialog. looking at an example in files already implemented in dlgFileTypes, i named the css file exactly as my html and js file and added a link reference as normally done in the html file. what am i missing? i looked through element inspector and i cannot see my css file referenced anywhere, not in the head, nor the css injected by MM, and the elements do not show the styles being applied in style inspector.

files:
dlgMyAddon.html
dlgMyAddon.js
dlgMyAddon.css

in dlgMyAddon.html:

Code: Select all

<html class="dialog">
<link rel="stylesheet" href="dlgMyAddon.css" type="text/css" />
<script src="dlgMyAddon.js"></script>
i have verified the js file is loaded as expected by console.log, although i do not see a reference to the file in element inspector.
heribertolugo
Posts: 9
Joined: Sun Sep 18, 2022 10:51 pm

Re: CSS file loading in addon

Post by heribertolugo »

think i figured out why. needs to be added to skin folder and then override/add to a existing skin file (skin_base_add.less). not sure why the built in dlgFileTypes uses a normal css reference with a normal css file.
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: CSS file loading in addon

Post by drakinite »

Yes, the best option is to override/add to the skinning system via .less files.

But if you still prefer to use raw CSS:
I'm not sure why, but the <link> element seems to get destroyed when it's placed outside the body. Might be some byproduct of the methods MM uses to reuse/share dialog windows. In my tests (modifying Undock Panels), this works:

dialogs/test.css:

Code: Select all

* {
    color: red!important;
}
dialogs/dlgUndockedControl.html

Code: Select all

<html class="dialog">
<script src="file:///mminit.js"></script>
<script src="dlgUndockedControl.js"></script>

<body data-posSaveName='dlgUndockedControl' data-defaultSize='1024,768'>
    <link rel="stylesheet" href="test.css" type="text/css" />  <!-- here -->
	<div class="fill flex column">
		<div class="fill flex row" data-id="contentContainer">
			<div data-id="parent" class="flex column animate noOverflow verticalPanel" data-control-class="Control" style="min-width: 100%">
				<div data-id="customControl" class="fill initialSize middleHighControl">
				</div>
			</div>
		</div>
	</div>
</body>

</html>
Dialogs from the addon (e.g. undocking Playing) then have their text show up in red, but opening other dialogs do not.
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
heribertolugo
Posts: 9
Joined: Sun Sep 18, 2022 10:51 pm

Re: CSS file loading in addon

Post by heribertolugo »

ahhh it needs to be in the body... im still stuck on why dlgFileTypes has it in the head.

i think it would be much better to have it in its own css file, rather than role it into the main skin css.

thanks for the reply/help. i'll give this a try tomorrow and post if i have any issues.

on a side note, think i found a small bug.
place some corrupt files in your library.
"add/rescan files to the library" and then click "view log". close the log. click "view log" again. the log is now empty, when logically it should have the same results as before.
heribertolugo
Posts: 9
Joined: Sun Sep 18, 2022 10:51 pm

Re: CSS file loading in addon

Post by heribertolugo »

drakinite wrote: Wed Sep 28, 2022 12:04 am Yes, the best option is to override/add to the skinning system via .less files.

But if you still prefer to use raw CSS:
I'm not sure why, but the <link> element seems to get destroyed when it's placed outside the body. Might be some byproduct....
so the link in body works great. is there a way to use a less file instead of css file, so that i can take advantage of the variables used in the skin? i tried to save the css file as less and put some skin variables for testing, but seems my less file is not picked up. i kept the reference in the html body for the css file in case the less got compiled, nope. i then removed the reference thinking it might get picked up.

my thinking about creating a separate file rather than add to skin was to not bloat the main css. and only load my css if/when its needed.
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: CSS file loading in addon

Post by drakinite »

MM5 won't automatically compile LESS that's just included in the sources. It's compiled inside mminit.js, and its entry point is by compiling this string:

Code: Select all

@import url("'file:///skin/skin_complete.less'");
which imports skin_complete.less, which contains @import statements for all other skin files.

Unless you're adding a huge amount of CSS, don't worry about adding to the main css files. The compiled css files are about 100 kb each depending on the skin, and I'm pretty sure chromium is able to parse that in a few milliseconds. (citation needed; i've never actually tested CSS parsing speed).

If you'd still prefer to take advantage of LESS variables and whatnot while keeping your stylesheet separate, you could always pre-compile it into CSS via a script when you package your addon. (for example, using a Makefile to execute lessc to compile the source into css, and then pack-mmip to package the addon for installation.)
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
heribertolugo
Posts: 9
Joined: Sun Sep 18, 2022 10:51 pm

Re: CSS file loading in addon

Post by heribertolugo »

drakinite wrote: Thu Sep 29, 2022 12:46 am MM5 won't automatically compile LESS that's just included in the sources. It's compiled inside mminit.js, and its entry point is by compiling this string:

Code: Select all

@import url("'file:///skin/skin_complete.less'");
which imports skin_complete.less, which contains @import statements for all other skin files.

Unless you're adding a huge amount of CSS, don't worry about adding to the main css files. The compiled css files are about 100 kb each depending on the skin, and I'm pretty sure chromium is able to parse that in a few milliseconds. (citation needed; i've never actually tested CSS parsing speed).
gotcha. thank you.
drakinite wrote: Thu Sep 29, 2022 12:46 am If you'd still prefer to take advantage of LESS variables and whatnot while keeping your stylesheet separate, you could always pre-compile it into CSS via a script when you package your addon. (for example, using a Makefile to execute lessc to compile the source into css, and then pack-mmip to package the addon for installation.)
that wont quite work correctly. the purpose of using the less variables is so that the addon stays themed. i'll use your suggestion and use skin_add. thanks for all the help and insight.
drakinite
Posts: 965
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: CSS file loading in addon

Post by drakinite »

No problem! I'd recommend using skin_custom_add instead of skin_base_add if the extra stuff is not relevant to any other skin files.

(granted, I didn't follow that advice for 3D Album View, but I don't think I even noticed skin_custom.less when I worked on that :P)
Image
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
heribertolugo
Posts: 9
Joined: Sun Sep 18, 2022 10:51 pm

Re: CSS file loading in addon

Post by heribertolugo »

drakinite wrote: Thu Sep 29, 2022 2:28 pm No problem! I'd recommend using skin_custom_add instead of skin_base_add if the extra stuff is not relevant to any other skin files.

(granted, I didn't follow that advice for 3D Album View, but I don't think I even noticed skin_custom.less when I worked on that :P)

noted.. the custom css is only relevant to a custom dialog window. so it sounds like skin_custom_add is the way to go. thanks again.
rubelahamed
Posts: 2
Joined: Mon Oct 03, 2022 6:23 am
Contact:

Re: CSS file loading in addon

Post by rubelahamed »

ahhh it needs to be in the body... im still stuck on why dlgFileTypes has it in the head.

i think it would be much better to have it in its own css file, rather than role it into the main skin css.

thanks for the reply/help. i'll give this a try tomorrow and post if i have any issues.
Post Reply