TileBoard - New dashboard for Homeassistant


I think you still need to define it as icons and not icon if you want to use a function. Give that a shot.


Ah ha! Works perfectly - thanks so much! I think there was an issue with the naming of the MDI icons.



Phew! Feels like I’m getting there with the home dashboard, finally! For this, I’ve managed to squeeze one full-sized tile (to act as a status for each group) and 3 smaller (height wise) tiles underneath for each room.

Anyone know… is possible to inject CSS into each to adjust the position of the icons (not through the custom.css file) maybe using customStyles: { ?

I am wanting to adjust everything in the RED box slightly so it appears more middle (between the top of the tile and the start of the subtitle). And, maybe centre text.


Is a click action for the header area (time/date) possible?
For example to execute a fully js command to turn off the screen.

If this isn’t possible it would be a nice addition!


I have the menu buttons on the left but they are hard to see with the background I have.

How can I add the dark shaded area behind the whole menu bar, or which items should I change in the css files? On the active screen, the menu button is fine because it has the grey circle, but the inactive menu buttons are just white and hard to see.



I think this should work, insert this into custom.css:

.pages-menu {
  background-color: insert color here;


You’ll probably have to play around with this a bit, but here’s a starting point to put into custom.css. The first part will handle the vertical position, the second will handle the horizontal centering. You will need to define a custom class for these specific tiles to reference. So, for each tile, include:
classes: ["-custom-class-name-here"]

You can replace custom-class-name-here with whatever works for you in both the tile definition and custom.css

.custom-class-name-here .item-entity {
  top: calc(50% - 45px); /* this is the current setting which starts everything from the tile image
                                     down at the vertical midpoint of the tile. Try reducing that 50% value
                                     until it looks the way you want. */
.custom-class-name-here .item-title, 
.custom-class-name-here .item-subtitle {
  text-align: center;


You’re super awesome @apop - thanks so much!! Works great!

Here is what it looks like so far. For the big tiles - i hope to add an energy monitor and use grafana to add a background on the energy levels over the last three days. I am loving tileboard!!


Looks great!


Hey! Random… I don’t have an ‘alarm system’ as such but wondering with the alarm panel tile… Could i setup my own system using Xiaomi sensors and a pin code etc?


Yes. You can use Manual Alarm and program your own logic using it. https://www.home-assistant.io/components/alarm_control_panel.manual/


is there a way to have only one tile completely transparent?


Yes, add this to the tile definition:

customStyles: {'background-color':'transparent'}


After the last update my older ipad is no longer able to display css changes. It used to work fine, now it just shows the default settings (so no rounded corners etc, not even if I select the Homekit theme).

Not a big deal, but just wanted to mention it.


I’m using CUSTOM_THEMES.TRANSPARENT and customStyles: {‘background-color’: ‘transparent’}, has no effect


is there a way to change the language on the date?


The reply is in this thread.


You could try also adding 'box-shadow': 'none' to your customStyles. I’m not 100% sure that’s going to solve it for you, but I think that will “flatten” the tile at least.


Ive Just started setting up TileBoard to switch over from hadashboard and I really like it so far. However Im still learning js. I defined a sensor icon tile and it works except for the fact I have some states that have spaces. How can I have it work with the ones with spaces?

Heres what I have:

position: [5, 0], // [x, y]
width: 1,
height: 1,
title: ‘CLIMATE’,
id: ‘sensor.climate_status’,
//unit: ‘°F’,
state: false, // https://github.com/resoai/TileBoard/wiki/Templates
icons: {
Off: ‘mdi-power’,
Cooling: ‘mdi-snowflake’,
Heating: ‘mdi-fire’,
Aux Heating: ‘fa-fire’,
Sleeping: ‘mdi-power-sleep’,
Audo Fan: ‘mdi-rotate-3d’
Forgive me if this has already been answered.


hi, another css question, how to move down point 0,0 (start of camera view)?