Here is a “dirty” write up of how I fumbled thru changing icons and tile colors. Sorry if I missed steps or if I am not clear and may not be the best for troubleshooting since I barely got thru it…lol, but I will try my best.
So you have to setup a Github account and make sure you confirm your email otherwise the web-hosting wont work.
When it asks you to setup a repository make sure you name it: GitHubUsername.github.io this will be the repository you will host the files on. You can read more about setting that up here: https://pages.github.com/. It will walk you thru everything and recommends creating an index.html file just for testing. As the page says it can take a little bit at first but then updates pretty fast.
I am on Windows so I used the windows client and got really confused using it since I really don’t fully understand Github…lol It will basically create a folder on your hard drive and sync it with your Git repository. Once you make changes to a file locally the Git client will ask you to “commit” the changes and then sync it. FYI…one place I got hung up is it would show me “uncommitted” changes, when I edited a file, and you have to type a summary of the file (I just typed test) and the commit option is available, then you can sync it. I would test to make sure your file is there by browsing to http://username.github.io/WhateverFileYouUploaded and making sure it comes up.
To change the icons I needed: script.min.4.4.js
and the tiles I needed: style.min.4.4.css
The current copies of those are at: https://625alex.github.io/ActiON-Dashboard/script.min.4.4.js and https://625alex.github.io/ActiON-Dashboard/style.min.4.4.css
I opened both the links in IE and was able to download them. Now another place I got screwed up (and am still screwed up) is the formatting of these files, for me there is no formatting. Its all one line which makes reading it very difficult so I just searched and change what I needed. When I did change the formatting at all it did not work and was unusable. I kept a backup of the original to revert back to when I messed up. This may just be my screw up and may not be an issue for you. I am hoping someone more knowledgeable will chime in and tell me what I am doing wrong or how to correctly download the files:)
You will also need to change the pointer to these files in the smartapp. So goto the IDE and edit the app and around line 417 you can point to the new style.min.4.4.css file. Mine looks like this:
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" />
<link href="https://swindmiller.github.io/style.min.4.4.css?v=4" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>
Not sure what the ?v=4 is so I just left it in
script.min.4.4.js is around 428:
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js" type="text/javascript"></script>
<script src="https://625alex.github.io/ActiON-Dashboard/coolclock.min.js" type="text/javascript"></script>
<script src="https://swindmiller.github.io/script.min.4.4.js" type="text/javascript"></script>
Also on 449 is a reference to the style.min.4.4.css file again so I changed that as well (don’t know if it needed):
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" />
<link href="https://swindmiller.github.io/style.min.4.4.css?v=4" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>
Save and Publish (for Me).
I personally would test if this is working with the unaltered files from 625alex’s site first. Once your sure everything is working with the files from your site then you can edit them and test.
Icons are pulled from Font Awesome here: http://fortawesome.github.io/Font-Awesome/icons/ so just change the name of the icon you want to change in the .js file. Each icon will be referenced twice, once for active and once for inactive. You can also change the color of the icons by adding the name or hex value of the color. So this:
<i class='fa fa-user'>
would be changed to this:
<i class='fa fa-user' style='color:#59FF00'>
Some can also be set opaque like this:
<i class='fa opaque fa-user'>
good for inactive icons.
The tile color is in the .css file right in the beginning. Hopefully that one is self explanatory.
Sorry if this is long winded or incomplete. I wrote this based on how I did it. Is there a better way, probably, and I encourage anyone else who wants to chime in to do so. I am not use to typing up tutorials
Let me know what I missed
EDIT: I was able to use http://jsbeautifier.org/ to paste just the JS script to make it more readable and that still works. Dont try this tool with the CSS file though.