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

Thanks. What would be really nice is a ‘Template Creator” app and a way to export and share the custom templates. Much of this thread would not be needed if some programming guru were to create such an app, even if it was limited to fairly simple tiles. I have been taking existing templates not needed for their original purpose and modifying them as much as possible within the settings, the throwing a bunch of CSS at them, but what a PITA. Just adding the ability to add, subtract and rename states would be nice. I started at this a week or so ago and I am a total Noob at this which didn’t know any CSS. Maybe I’m missing something?

1 Like

It's coming.... :slightly_smiling_face:

1 Like

In terms of what we can reference, yes, I believe so

Could you tell me again what your goal is for # 3?
So Cool is just a mode. The color of the tile should be the "idle" (provide your thermostat supports the state "idle") color until it starts "cooling", then it will change to what color you have it set for in the editor.

Hi!

#2 does this help? You who are crazy and understand these things lol

#3 I think the problem is something else, the two that don't work in color is because they are remote control thermostats, they actually repeat the signal. So even though it is an air controller, it is actually an IR. I will make some attempts to put the powe switch behind and see if I can get the color effect.

What is the instruction to hide the icon and the text with the device name?

Thanks.

Ah ha
#2 try

.thermostat div.cooling.w-full {position: relative; top: 20px; !important;}

#3 is a ah ha moment as well. IR blaster will not report State, and this is why it isn't working. I too had this issue with my ZXT-600's and use an underlayed tile to change the color based on temperature. I used the fan tile and wrote a rule to change the fan state at a certain temperature, worked like a charm. The thermo tile on top I made transparent to let the color through.

Here is what I done to achieve the color change under the thermo tile

I have no idea how I missed this! Amazing work!

1 Like

#2 SOLVED!!!!

image

#3 yes, my is Remotec ZXT-120, same problem :frowning:

I am thinking instead of using the Image tile from the back, to use the same tile as the switch background, so I could solve the color issue. Now I have to hide the switch icon and the device name text. What is the instruction for this?

Thanks!

try this, but replace 31 with your tile.

#tile-31 div.tile-contents {visibility: hidden !important;}
#tile-31 div.tile-title {visibility: hidden !important;}

I found another way, I copied/renamed the driver (used for other devices also) and modified it to send the text I wanted. It's a hack but it works.

Hi!

The instruction to remove the icon (content) worked, and I removed it because I had another idea.

Now the instruction to remove the title is not working.

try

#tile-40 .tile-title {display: none; !important;}

Well, it's not as nice as the one our friends @sburke781 and @ymerj have, but it will already serve the initial purpose. Thank you @chad.andrews for all the help.

2 Likes

The challenge is how to remove the decimal place from the temperature.

image

I think @ymerj did something because he just change the values show. Can you help?

image

With today's teachings, and a little bit of thinking, I have improved temperature and humidity, but I am still left wanting to remove the decimal places, or get it adjusted to 1 position.

image

I took a brief look online earlier today and it feels like you would be best to handle this with a device or variable in HE, rather than CSS. I expect you could:

  • Setup a simple rule in Rule Machine to be triggered by a change in the temperature reading
  • Record the rounded value in a variable
  • Make that variable available in the dashboard
  • Add a tile to the dashboard that uses the variable, replacing the area where you are displaying the 31.65 in your screenshot
1 Like

Great idea, nothing like talking to experts :slight_smile:

image

Problem solved, but instead of using the Rule Machine that has limitations and could not do the update, I used the Multi-Sensor Reactor (similar WebCore).

2 Likes

I've released my Simple CSS Editor if anyone is interested in taking a look. It can do a lot of the common stuff, and I plan to add much more to it over time. Feel free to check it out and offer any suggestions.

Simon

1 Like

Yes! will do. Thanks for your great help.
My current question is how to change text color(s) on a tile.
For example:
The Code shown here is what I get when clicking on Inspect on the thermostat tile.
What CSS code can be added to change “78 F and cooling” text from white to different color?
And other Text if I chose to.