Discuss & Vote

Custom CSS

Christian Persson 2 months ago updated 1 month ago 3

Looking at the forum there was a few years ago discussions on Custom CSS support, has there been any progress to this or any form of roadmap that plans on implementing this?

Or has there been any "unsupported" way of dealing with it from the community even?




Solved it by using javascript injections in Fully Kiosk to sideload/alter the Head tag on the Panel pages to include a custom CSS file interely.

copied the actiontiles.min.css file and made all changes in a externally hosted file.

Then used the Cluod function in Fully Kiosk to deploy the settings to all my android tablets in the house.

This requires Fully Kiosk Plus licence to be able to inject Javascript, and if you need the cloud deploytment of settings to multiple tablets you also need their Cloud subscription.

In Fully kiosk, add something like this depending on your needs, (Settings -> Advanced Web Settings -> Inject Javascript)


(function() {
var head = document.getElementsByTagName('HEAD')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://XXX.css';//XXX is your css file location




Discuss & Vote

Wow, this is brilliant an unexpected, Christian!

The Custom CSS feature was put on a back burner, unfortunately. We hope to revisit it again, hopefully soon.

Thank you Alex, i do think this covers a lot of my needs and going by some other posts it hopefully helps those that wanted Custom CSS until you get around to supporting it in the app.

One thing though that i really need to make it complete is, I have no way to style a "tile-set" individually without using Index (ie: css class ".at-tile-group:nth-child(X)" and that creates alot of issues since it will be for all panels.

May i ask you this, and hopefully its such a simple change you can add it early ;)

Could we either have a custom textvalue to be set in the Tileset settings (where we set the title today) to also include a "tag" name that would be added to the "ng-repeat="tileset in panel.tilesets" DIV either as a class or data-tag.

That would be great way to future proof you own custom css support but requires a textbox and some changes to your back-end.

A other, way simpler approach, would be to add the Title text itself into the DIV container of ng-repeat="tileset in panel.tilesets" as a data-tag. Then we could simply use the title as a css selector for custom design of each tile-set depending of our titles.

Ofcourse it would be great if we could have the same thing on each Tile individually but I don't want to be greedy ;)

Edit: Greatly appreciate the good code design structure, something we shouldn't take for granted these days. even if the styling is a bit awkwardly written i look forward to what you can accomplish with native Custom css in the future.

Thanks again