Help getting started with CSS

🧰 Built-In Apps and Drivers Dashboard
1

Now that most of my devices are tested and working, it's time to turn to organising my dashboard properly.

Would appreciate any help in getting started, especially with some of the more basic stuff. (note, I'm reading up on CSS but have no idea as to how to apply these to the dashboards). There appears to be no hubitat specific documentation or tutorials that I could find.

  1. changing tile sizes. I can see where to edit the sizes of specific tiles in the layout json but this only works for whole multiples of the default sizes.How do I make a few specific tiles half height for example without choosing the half height as the default size and changing every other tile to twice that?

  2. changing the color of a tile via CSS and any other useful tile paraneters.

Alternatively what would be a great help would be some sample CSS so I can figure out the syntax and commands.

3 Likes
2

Seconded. Until Hubitat enhances the dashboard app, using CSS will be the only way to get the level of customization many of us want. Not sure it's practical for many to invest the time in learning HTML and CSS though. Would rather see the app get an overhaul.

3

Been delving into this by trawling through all the posts which have posted code. On my own questions:

  1. ended up spending time redoing the entire dashboard
  2. looks like this can't be done :slightly_frowning_face: so ended up having to use a custom background image with the colour I want.

Another new question. I have adjacent tiles some are just text and some are links. (I'm creating a row of tabs to navigate to various dashboards) For some reason the text line in the text tile does not line up with the link name line in the link tile. How can I get them to line up? (These are single lines with only 1 or 2 words)

Sorry Hubitat Team but it should not be this hard to customise the dashboard.These are basic UI items and not anything fancy. It really is an exercise in patience and frustration for those not well versed in CSS.

1 Like
4

Agree. This would be very handy. I've got some basic HTML skills but I need a basic starting point. I assume CCS is there because it can do something.

5

Well after a day of experimenting and googling I managed to work out most of what I need :sweat::sweat_drops:. I'll do a short write up on this thread when I get the chance later which hopefully will be of use to beginners.

4 Likes
6

I'd be very interested in this. So glad you made some headway.