Thanks for your help. It looks like simply deleting those height/length lines gives me the auto-adjusting button that I want.
Also, when I use border-radius 25%, it gives me one kind of oval, and when I use border-radius 50%, it gives me an oval with more tapered ends. I’m not sure what the border-radius refers to exactly, but I’m assuming I can pick numbers in between for different oval shapes?
It looks like “Color” refers to the color of the text in the button.
Is there a way to change the button color itself for specific buttons using CSS (not all buttons, just some on a dashboard)?
Yes. Borrowing from an earlier post by @thebearmay:
#tile-49 .material-icons{
color:rgb(255,0,0) !important;
}
Just replace the tile id (49 in my case) with the tile you want to change on your dashboard, and adjust the rgb values.
The border-radius defines the corners, in this case the button corners. You can do some odd-looking corners if you are into that stuff, like these.
Hope this helps.
Thanks, but it looks like that changes the color of the icon in the button. What I'm looking for is something that changes the entire button color excluding icon and text (when it's in the off position). For instance, the button normally turns yellow when it is on but it's a sort of light-gray when it's off. What I want to do is change some of the buttons when they are in the off position to a different color other than that light-gray.... is there a way to do that?
That's cool. How do you get the buttons to be those different colors? That's one thing I'm trying to achieve right now.
This was the post I provided to you in your customisation topic, which I believe you could use to adjust the background color. It's not the nicest way to have to set it up, but all that we can probably do. It will need some creative thinking to apply to your use case, so see how you go...
To achieve this with CSS, I am using background-color. Note that background-color property also uses rgb values as well as hex.
#tile-7 {
background-color: green;
height: 150px;
border-radius: 15px 50px 30px; !important;
}
This is what the switch looks like when it is off
Based on your other posts, @sburke781 provided another solution using the JSON layout.
One thing to keep in mind, some of the icon have a transparent background, when you change the button background the icon's color will adapt to the new color.
ya i gave up on that approach as the problem with that one was you needed to specify a bgcolor for every temp value which is ok if you are using integer temps but as soon as you start to use decimal values it becomes unteneable.. i wish i knew how to specify a temp range for the state values.
i do something similiar for my version of smarttiles (precursor to actiontiles) that i am running but havent figured out how to do it in the built in dashboards.
ie
That one was more to do with changing the background color of a switch tile, rather than the other recent link I provided to your Humidity solution. But still, good to know the outcome in case it comes up again.
Perfect! "background-color" is exactly what I was looking for. Thanks!
Hello can anyone help me with the CSS code to change the height and width of a single tile. I'm trying to figure out CSS but having a hard time with the elements. thank you
.tile-99 {
height:190px;
width:200px;
}
@thebearmay thank you very much, I will input that. I’m trying to learn how these codes are written, not going easily though.
Is this code for changing the size of a custom icon, or will it work to change the size of a default icon for an individual tile? The latter is what I want to do but a not sure I understand which element is changing the icon size… maybe font-size or is it both .material-icons adnd font-size?
Pretty sure this changes any icon for a given tile, but it's been a while since I messed with HE dashboards.
}
#tile-17 .material-icons {
position: relative;
top: -7px;
font-size: 43px !important;
}
Yup, that's it. It's the font-size within that line that does it. Thanks!
I would like to change the font size of the text in a single tile, I can't figure out how to do it with css, can you help?
Blatant self-promotion... But you may be interested in my CSS editor.... But let me find a some helpful hints for you....
i tried to use the simple editor but it seemed like it would only change those things on my local network. If i opened the dashboards on my phone its the same old dashboard. seems like the editor didn't edit the dashboard on my mobile phone. I must be doing something wrong.
Download the Hubitat app
