Custom CSS

FYI

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
head.appendChild(link);
})();

---

Cheers,

Christian

Hi Christian

I'm trying to do exactly what you did by injecting the Javascript on Fully Kiosk, but I can't get it working at all. Is there anything I need to be doing besides the steps below?

1. create custom CSS stylesheet and upload to webserver

2. updated and paste the script into the Inject Javascript section on Fully Kiosk 

Where did you download the actiontiles.min.css file from? 

Hi Mandil,

I created the css file from scratch myself to override the class and id names i needed. One thing i noticed is that you need to add the "!important" tag in some/most cases to make sure its properly set to override the default css.

Below is a sample of one of the css files i injected, its just a early sample that is not done yet. Whats neat is that they include the meareument "type" in the html so you can override on a per type of measurement, and with some neat javascript you can create a custom CSS per panel basis so each panel has its own look and feel depending on the panel you want to create.

at-tile {
//padding: 8px !important;
//border: 8px solid transparent !important;
//background-color:black !important;
border-right:1px solid #3e3e3e !important;
}

at-tile-header {
padding:8px !important;
}


.at-tile-footer {
margin-bottom: 1.0em !important;
}

at-tile-set at-tile {
border-right:1px solid #3e3e3e !important;
}

at-tile-set at-tile:last-of-type {
border:none !important;
}

button .at-tile-footer {
font-size: 1.0em !important;
opacity:0.5;
}

button .at-tile-footer div:first-of-type {
display: none;
}

.at-tileset-title {
font-size: 21px !important;
text-align: center;
opacity: 0.5;
margin:15px 0 5px 0 !important;
}



at-tile .at-tile-more {
bottom: 2px !important;
right: -5px !important;
//margin: 10px 0 5px !important;
}

div.layout-fill {
padding: 0 10px;
}

at-tile[at-tile-type="Illuminance Measurement"] at-tile-footer {
opacity: 0.5 !important;
font-size: 0.85em !important;
}


.at-tile-group {
//display:inline-table !important;
}

.at-dashboard.layout-fill._md {
padding:0;
}

.at-tile-group:last-of-type {
position: absolute;
bottom: 0;
border-top: 1px solid grey;
width: 100%;
}

Hi Christian

Thanks a ton for that. I updated my CSS with those codes, but my AT doesn't show any difference whatsoever. 

Is there anything I need to enable on my AT control panel for it to pull custom style?   

strange, there is no need to change anything in AT. its Fully that is including the new css file and renderes it into the AT page.

It can be tricky but, i would try and debug the page to make sure the javascript has included the file in the page head tag. its most likely one of two things. Either the css file path cant be found (wrong path/access) or the page has been cached inside the browser.

From what i remember Fully uses the default browser on the unit (Chrome for Android) and Fully might even have its own Cache control that can be cleared, of not, try clearing your Chrome cache on the unit.

Remember that when testing, you have to do it inside Fully, its Only Fully that includes the css link, 

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

Christian