The Noob's (in)complete guide to CSS for Hubitat

No, No.... we're (I'm) just joking..... we welcome new-comers to ask questions...

2 Likes

Happy for anyone else to contribute... but I will most like have a chance to think about this in detail over the next 24-36 hours...

I really appreciate your help @sburke781 and @TechMedX

2 Likes

No guarantees, but try this

*, :after, :before, img {
    font-size: 20px;
}

Hi community.

I have the following use case. A new drive for Samsung Smartthing (thanks @djgutheinz) makes it possible now to control more functions of the air conditioner, such as wind speed, turn on or off the panel light, among others.

With these new features I added 4 tiles to control these new functions, but I have the following need, these tiles could only appear on the dashboard in case the air conditioning tile is on.

In the picture below I show the dashboard with all tiles, when air conditioner is on.

image

And in this image I would like it to look like if the air conditioner is turned off.

image

@chad.andrews and @sburke781 is it possible to make this link? That the status of a tile can define the status of another tile, as hidden or not?

Thanks

3 Likes

I believe the answer is yes, it is possible, but I would need to find the topic where the solution is documented. I feel like there is an existing topic where this has been discussed, I just need to find it....

1 Like

I think you might be able to make the elements display:none using the trick I found for creating gradient fills when a switch is on:

You need to find something that changes in the tile when it's off, then update the CSS based on that. It might take a little investigation, but it might work.

I swear I have searched for this in this thread but can't find it.... How can I use image files on my hub for the on & off icons of a switch; motion/inactive of a motion sensor etc.? Changing the background of the tile based on state would work also. I don't want to change the Template. I want to change just one switch; sensor etc.

This might help....

1 Like

That helped!! Thank you!

Hi, completely new to this and some great information in this guide. I am trying to set the background of a tile to transparent. When i inspect it in chrome i can see the value under element.style and i can add Background:Transparent which provides the desired effect. When i try to do this in the CSS editor nothing happens

#tile-39 {background: transparent }

What am i missing please?

Thanks
Chris

While I double-check the CSS, try adding " !important" after the word transparent. Or, also, try using rgba(0,0,0,0) instead of the word transparent.

EDIT:

Alternatively you could try (from a post by @thebearmay ):
background-color:transparent;

#tile-43 {background: rgba(0,0,0,0) !important}

This worked for me...Thank you very much for your quick response.

1 Like

Been trying to figure out how to put a custom label on a standard button tile. No text at the top or bottom, no image, nothing but a single word or two serving as a label for the button. Seems simple, but I can’t crack it. Any ideas? TIA

Hi All,

total CSS noob warning.... I am stuck and I need help.

I am trying to do multiple lines of custom CSS on my dashboard specifically on the Thermostat template tiles. I need to hide multiple parts of it hidden and after a ton of weird stuff, I finally got it working (not sure how, bit it is working) .

Now I still have alignment issue (see picture)

afbeelding

I have currently 6 tiles using the thermostat template and they all look like the red one... I want them all to look like the green one. After some digging in the CSS I found that the green tile has 1 more attribute.

Since they are both using the same template, how the heck did this happen and more importantly how do I fix this?

Thanks for the assist!!

Martijn

Isn't it only red because the heat is on?

1 Like

Yes, that is correct. The problem is not the color, but the alignment of the elements on the tile which is caused by the absence of an css attribute (see pic. 2 of my post).

Oops guess I should learn to read sorry.

I'd have to check, but I wouldn't expect the cooling class to mess with the layout of the tile like that (not impossible). I am guessing the green tile is green because you either have that thermostat set to cool or that is how HE choose to display the tile when it is in the idle state.

Do you want to post you CSS, there may be something in there that is messing with the layout...

Hi, the relevant portion of the CSS is already in the post... Even highlighted the attribute that seems to be causing it. I just for the live of me, cannot figure out how this happened or how to fix it. I probably mucked it up myself, but how....? :thinking: Any pointers are VERY welcome. If you want to have the complete CSS, I can get that to you too.

Again for clarification, I have currently 6 thermostat tiles on this dashboard. They all look like the red one (please ignore the colour that is dependant on the state it is in Heating or Idle...) and have the temp heatpoint setting raised up from the centre. Only the green one does not have this and shows up how I want it.