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>
Moderators: jiri, drakinite, Addon Administrators
Code: Select all
<html class="dialog">
<link rel="stylesheet" href="dlgMyAddon.css" type="text/css" />
<script src="dlgMyAddon.js"></script>
Code: Select all
* {
color: red!important;
}
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>
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.
Code: Select all
@import url("'file:///skin/skin_complete.less'");
gotcha. thank you.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:
which imports skin_complete.less, which contains @import statements for all other skin files.Code: Select all
@import url("'file:///skin/skin_complete.less'");
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).
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 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.)
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 )