Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

@625alex i found a way yo use smartTiles yo control the device audio, just need yo use tasker and the url yo the command :smiley: awesome, i got my speakers connected via Bluetooth to the SmartTiles Tablet ;)AWESOME , DIDNT HAVE TO PAY FOR SONOS

2 Likes

Ok, letā€™s try something different, this should work, I promise:

.dashboard.tile[data-link-i="1"] .icon a i::before {content: "ļˆ";}

nth-child(1) is the first dashboard link.

Thatā€™s great. This is one of many ways of doing it.

This is a fantastic use case btw, control audio of the device that displays the dashboard itself. I will write about it on the site.

I copied your 3 alarm switches and they do look cool. The only problem I have is when you press the switch. The mode doesnā€™t change to reflect the state of the switch. So I assume the switches are just for monitoring the status of the alarm? Or am I missing something?

Sorry to keep bothering you about this. Do I just need to change the .st-dashboard to .st-shortcut to make this work for URL shortcut tiles? Could you paste an example of what the code should specifically look like? I just canā€™t seem to get it to work.

.st-link:nth-child(1)::before {content: "ļ„²"}'

This is what I am inputting to change the icons on my 3 url links, can you tell me what iā€™m doing wrong?

 .st-link:nth-child(1)::before {content: "fa fa fa-step-backward"}
 .st-link:nth-child(2)::before {content: "fa fa-play"}
 .st-link:nth-child(3)::before {content: "fa fa-step-forward"}

Should be
.st-link:nth-child(1)::before {content: "ļˆ"}

Copy/paste the actual icon of interest, not the icon alias/label. The sample above renders icon as a square, the dashboard has the necessary plumbing to display the proper icon.

Ok I think iā€™m missing something, are we still supposed to reference the icons in font awesome? How do you copy and paste the icon? I Just copy and pasted your square in your example and it showed up as the step backward, the icon i wanted. But what format is that in?

I figured it out! I use the unicode they have underneath the icon and find the appropriate image and viola! Just as you said, Thanks so much! One last thing, however. Despite having nth-child(1), nth-child(2) and their individual icons, they all just match the first nth-child(1) icon. How do I get them so they each display their own icon?

Thanks again, your support is incredible!

Thank you very much, this worked perfect!

Ok, I retract my previous code bit and I shouldnā€™t look at code after midnight anymore. Try the following bit:

.dashboard.tile[data-link-i="1"] .icon a i::before {content: "ļˆ";}

data-link-i=ā€œ1ā€ is in the same order as defined in the SmartApp preferences.

I may have missed a post. Is there a link to available icons?

4 Likes

@625alex, this worked great. I have tried with multiples and it works fine but have a quick question.
How would it work with dashboard links and urls on the same screen.
Using this:

.dashboard.tile[data-link-i="1"] .icon a i::before {content: "ļˆ";}

it looks like ā€œdata-linkā€ is for dashboard links and urls. Would this work with both on the same dashboard? How would you use data-link-i=ā€œ1ā€, data-link-i=ā€œ2ā€, etcā€¦

Thanks!
Scott

1 Like

No, the mode should change on click too. Can you post a copy of one of your virtual switches? You can pm me too if you donā€™t want to clog up this thread.

Thanks for the response @swindmiller . I think the problem was caused by my wife renaming the mode. I will give it another go once sheā€™s done and happy with the names. It will probably we a while I am pretty sure :smile:

1 Like

No problemā€¦let me know if I can help

Someone was asking about inexpensive waterproof tablets so they could put smarttiles on a table by the pool. I canā€™t find that particular comment right now so Iā€™ll post this here.

As far as I know all the waterproof tablets are very expensive. However there are many waterproof cases which are a much less costly solution.

The bubbleshield for example runs less than $20, and seems to work well. Itā€™s kind of goofy looking but would be appropriate for poolside. And, yes, you can use the tablet while itā€™s still in the case.

This first link is to review site covering a number of waterproof cases:

And this is the bubble shield at Amazon:

In case anyone is curious if you want to change the color for the dimmer light use this code:
.dimmerLight.active .icon {color:#FFFF00}

This one will not change anything!
.dimmer.active .icon {color:#00FF00}