Custom CSS rules get overwritten when the DOM updates

[Klikini]

Custom style rules defined in settings apply when the plugin loads, but if they are styling elements that OctoPrint replaces (such as the temperature legend), the styling is removed on the next update.

I'm assuming this happens because the plugin directly applies customization to the selected elements? If so, I think the only way it would work is to inject a <style> tag with the custom rules so that the browser can use the rules to style newly created elements as well. I'm not sure if this would update styles on pre-existing elements, though.

Example rules that have this issue

td.legendColorBox > div {
    margin-right: 1em;
}

td.legendLabel {
    padding-right: 3em;
}

---

A similar problem occurs when using the M33-Fio plugin. It moves the Timelapse tab to an overflow menu because it adds a model viewer tab that leave no room for it, except Themeify's tab icons feature makes the tabs smaller and allows them all to fit. However, because this happens after M33-Fio adds the overflow menu, the timelapse tab gets put back into the tab bar without its icon.

[Birkbjo]

Thanks for reporting this! Injecting a style tag may indeed be the better solution, but it would need some refactoring. I've a lot of other work on my hands at the moment, but I will look into it in a couple of weeks.

[SirBastol]

IF i add custom tabs and graphics . for all teh tabs.. only the first 5 stick.. page reloads or things and they vanish.. browsing with chrome and with Edge..

if i unchecked or recheck one of the tabs and 'save' all images icons shows up for a little while and then gets reverted back to only showing the first 5 icons..

i believe its related to this.

[SirBastol]

it would be nice to have a feature which 'polls' the styles of the octoprint pages and makes a list of things you can change or edit .. so you dont have to get all inspector in chrome to find your items to mod.. :)