Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

[dhsemp]

Awesome, thanks!!!

[Automatic00]

@TN_Oldman

Is when Goodbye or Goodnight routine is run in Smartthings the tablet turns off the clock

Details on how you got the all that to work? I don’t have any experience with the Fire, so I don’t know if that’s a native function or if you had to change something somehow…please share, if you don’t mind.

[TN_Oldman (Don)]

Reader digest version: (since I’m on my phone)

1. Create virtual switch in smartthings, control that switch value in smartthings.
2. use sharptools to subscribe to that switch.
3. use sharptools tasker plugin to set a variable in tasker to follow virtual switch.
4. use the tasker variable in the tasker profile that controls screen abilities.

I know that’s basic. I think it’s pretty close to that.

[Automatic00]

Cool, thanks!

[dseg (Dan)]

@tgauchat

What is the CSS code for the music player tiles?
Can we make them vertical versus horizontal?

Has anyone done anything cool with these?

[N8XD (I got a hair cut from Alexa)]

Is there still an easy way to hand off a link to someone so they can see the status of things (pref/security/view only) on a wall tablet … without having to have, and login to a smartthings account? I want to give access to see things like data center temperature, etc, but I don’t want them logging in and turning on and off the bathroom lights for practical jokes. Or is it totally locked down for 3rd party Oauth stuff now?

do I need to write my own little mini-smart tiles for a few bits of status and do the oauth myself?

[TN_Oldman (Don)]

@Automatic00

Cool, thanks

I’ll have access to the tablet and a computer to type on later tonight if you need more details.

[625alex (Alex, ActionTiles Control Panel)]

@N8XD

I want to give access to see things like data center temperature, etc, but I don’t want them logging in and turning on and off the bathroom lights for practical jokes. Or is it totally locked down for 3rd party Oauth stuff now?

As of 5.8 this is how it is. SmartTiles V6 will have a feature to share dashboards, but it won’t be available at launch.

[N8XD (I got a hair cut from Alexa)]

Thanks Alex!

[corchard (sd@oe.ca)]

Banging my head against the wall and can’t seem to find an answer anywhere, I simply have a custom Mode in SmartThings called “Dog Walking”. I love smartTiles, but of course “Dog Walking” is not usable as a CSS class or element as it has a space in it. I’m trying to change the icon displayed when in the “Dog Walking” mode using the custom CSS feature but have had no luck.

I’ve tried:
.icon.Dog_Walking i::before {content: url(“http://cdn.device-icons.smartthings.com/Kids/kids3-icn@2x.png”);}
.icon.Dog-Walking i::before {content: url(“http://cdn.device-icons.smartthings.com/Kids/kids3-icn@2x.png”);}
.icon.Dog.Walking i::before {content: url(“http://cdn.device-icons.smartthings.com/Kids/kids3-icn@2x.png”);}
.icon.Dog i::before {content: url(“http://cdn.device-icons.smartthings.com/Kids/kids3-icn@2x.png”);}
.icon.Dog Walking i::before {content: url(“http://cdn.device-icons.smartthings.com/Kids/kids3-icn@2x.png”);}

but of course none of those work. How would one get the SmartTiles app to correctly tag modes that have spaces? …or will this be an enhancement request?

Thanks in advance!

Chris

[jwflutterby]

@tgauchat

We are starting to select Beta testers for V6, based largely on the individual’s donation amounts; but we also are trying to ensure some diversity in the testers in terms of expertise. Beta testing with novices is extremely important. It’s also a worthwhile challenge to find testers that are women.

I’m pretty new to SmartThings (I’m on about week 2 with my hub) and definitely new to SmartTiles (just installed late last week). I stumbled across your comment as I was looking into how complicated messing with CSS would be… I’ve been in IT forever including programming so I’m definitely not a Luddite but I’d be more than happy to help if you need a female guinea pig

[TN_Oldman (Don)]

Maybe someone can help me? I’m trying to put text on a momentary button vice the icon. It won’t do it. Keeps defaulting to the standard icon.
I can take the same CSS code change=> .tile.momentary to .tile.switch and text displays.

Can you NOT put text as the icon for a momentary switch?

[DarcRanger]

@TN_Oldman,
Try this code snippet:

.momentary.active[data-device='Device-Code'] .fa:before {opacity: 0.8!important; color:gold; content:"TT";}
.momentary[data-device='Device-Code'] .fa:before {opacity: 1!important; color:#4682b4; content:"TT";} 

The first code is active mode of the momentary switch is the default view of the button. Pressing it gets you the second piece of code, which is only visible for a few seconds while the button action is being processed.

[TN_Oldman (Don)]

Thanks, I’ll try it tonight.
I see where I possibly was off on my testing.
Thanks for the quick reply. Best part about this group. So many smart helpful people.

@DarcRanger Thanks again. Used your suggestion to get the results I wanted.

[hajar]

Hi there. I am currently trying to set this CSS without any luck:
.tile.momentary [data-device=‘eeec51c0-eb2d-4848-af67-0ed9af4a159d’] {background-color: white;}

If I remove data-device part in square brackets then all momentary switches become white. The device ID is the one I took from the IDE Log view that appears when pressing the momentary switch. I also checked the source of the dashboard page and the same device ID appears there for the momentary switch I am after. What could I be doing wrong here?

[DarcRanger]

@hajar,

Try removing the space between momentary and [data-device…].
It should look like this:

tile.momentary[data-device=‘eeec51c0-eb2d-4848-af67-0ed9af4a159d’] {background-color: white;}

Otherwise look for another code snippet that changes the background color of the momentary tile.

[keatonhoskins]

@hajar

Hi there. I am currently trying to set this CSS without any luck:.tile.momentary [data-device=‘eeec51c0-eb2d-4848-af67-0ed9af4a159d’] {background-color: white;}

If I remove data-device part in square brackets then all momentary switches become white. The device ID is the one I took from the IDE Log view that appears when pressing the momentary switch. I also checked the source of the dashboard page and the same device ID appears there for the momentary switch I am after. What could I be doing wrong here?

I second what @DarcRanger said:

@DarcRanger

Try removing the space between momentary and [data-device…].It should look like this:

tile.momentary[data-device=‘eeec51c0-eb2d-4848-af67-0ed9af4a159d’] {background-color: white;}

I would also stress to remove the quotes and retype them too as some text editors don’t transfer properly into the custom CSS.

I did one of my devices to test out the string, you will notice I used the double quote for mine:
.tile.momentary[data-device=“31f1a2e5-9e54-4903-a8d2-58ca148a1de5”] {background-color: white;}

[keatonhoskins]

@TN_Oldman

Thanks, I’ll try it tonight. I see where I possibly was off on my testing.Thanks for the quick reply. Best part about this group. So many smart helpful people.

@DarcRanger Thanks again. Used your suggestion to get the results I wanted.

Try taking a look at our Custom CSS page on www.SmartTiles.click

[TN_Oldman (Don)]

Been there. That’s where I started. I was using the wrong CSS for the active and inactive state. The Custom CSS page didn’t have the breadcrumb I needed for momentary buttons. (Or I missed it)
Read some forums, google searches and tried a few things on my own before I asked. I knew @DarcRanger or someone would know the answer. That page is VERY HELPFUL for a rookie like me trying to learn. I have used it as a guide for MOST of the stuff I’ve done. I appreciate the people who sacrifice their time to make guides for people like me.

[byoung (Brooke)]

Woman here! Happy to beta test. House full of us