I have a Cooper 5 button switch. I use it to control 5 different light levels in the room. I can’t figure how to stop the On/Off displaying the bottom right. It is displaying the status of the button which doesn’t make sense in this context. Is this possible? I am using the glow to light the tile when that switch is selected.
Yup. Can be done using CSS. There is a full CSS wiki about various things you can do below but I think the code you want is
.tile .tile-footer { display:none; }
Thanks for this. Can this only be applied to the whole dashboard? I can’t see a way to do this just on one tile?
That gets a bit more complicated. You have to create a new style. Apply that style to the tile you want to mod and change the css to something like
.tile.footer-off-style .tile-footer { display:none; }
This will then only get applied to tiles with this style applied.
1 Like
I wanted to do the same thing, so I have chosen the custom size for the footer font to 0 (zero) and that works perfectly.
2 Likes
To confirm - the best way to achieve this for a switchable tile is to create two styles - one for active and one for inactive?
Also, I thought I would try to take advantage of the real estate on the tile now that I am hiding the on/off so I tried this to increase the font:
.tile.--theme-style-hide-footer-active .title {font-size: 5em; }
.tile.--theme-style-hide-footer-inactive .title { font-size: 5em; }
That didn’t work. What I am doing wrong here? Thanks
That CSS snippet looks like it would increase the font size of the header (title label at the top of the tile).
Note that if you have any other Custom CSS which is more heavily weighted or if you’ve customized the Header Font Size in your main Theme settings (including in the ‘default’ style), then those settings might have a higher priority and be winning out.
A common approach is to apply !important to specific CSS snippets to give them a higher weight.
.tile.--theme-style-hide-footer-active .title {font-size: 5em!important; }
Thanks. That is helpful. I do have other css in there adjusting the tiles. I mistakenly thought that entering these commands that specified the theme would override anything else.
How does priority work - is it top to bottom in the style setup? Thanks.
It’s using CSS specificity (weighting). Existing documentation probably explains it much better than I could. 
Here’s some example docs:
W3 Schools - CSS SpecificityThe short version is each ‘selector’ gets its own weight. The more items that are in a selector, the heavier it is. And different types of selectors have more weight.
| Selector | Weight | Example |
|---|---|---|
| ID | 100 | #app |
| Class | 10 | .tile |
| Element | 1 | div |
So if you have two styles like the following, the one with the heaviest specificity wins
.tile.switch { background: blue} /* 10 + 10 = 20 */
.tile { background: red } /* 10 */
So in this case, the tile would be red since the .tile.switch selector is heavier weighted so your switch tiles would be blue and your normal tiles would be red (since the .switch selector doesn’t apply to them).
But if we added in something with an ID selector like many of the Theme generated styles do, it would win out and the background would be green:
#app .tile {background: green } /* 100 + 10 = 110 */
.tile.switch { background: blue} /* 10 + 10 = 20 */
.tile { background: red } /* 10 */
I found my problem. I had a custom size in the Active style above. I had checked default and not seen anything, but didn’t think to check the Active. You even told me to check the font customization but I didn’t look closely enough. Removed that and everything started working.
Quick question - weirdly if I click on the text “Custom CSS” in the themes editor it changes color, any significance to that?
Also, it would be nice to have the custom css window expand fully to display all css code vs. having to click to open it up, or even an edit css icon on the themes view next to the pencil to take you directly to the css code window. I find when I am working with the css I am doing a lot of trial and error work going back and forth to see what the results look like.
When a text input field is active, the label and the input field highlight green to indicate focus. And tapping on a label makes the input field focused. 
PS. Most of the text fields default to ‘validation’ which means the input field itself stays green even when you tap off of them (as opposed to red, for example if you entered an invalid email address in an email input field). The default ‘validation’ indicator should probably be dropped from this field as we aren’t attempting validation of the CSS - I’ve noted the feedback. 
Thanks for the feedback. In the meantime, tapping into the field and then tapping the ↓ (down arrow) on your keyboard should cause the field to expand.
One other thing I find helpful is to open the Theme in a separate window to do my editing - sometimes even from a separate device if you want to watch the changes apply in real-time on a tablet or similar device.
-
To edit a Theme directly, you can go to your User Page, tap Manage Resources, then select Themes.
-
Or you can open the Dashboard Settings for a particular dashboard and then right click (or long-press) on the Edit Theme link and then select Open in new tab (or new window).
I find this helpful as when I’m tweaking things as it’s much easier to tweak the changes to the Theme in one window (and press Save or Ctrl+S) and watch them instantly update in the actual dashboard.
Thanks. That helps. I was running in two windows while editing but the opening in a new window is nice as it doesn’t close each time I hit save.