TileBoard - New dashboard for Homeassistant

Is there anyway how to get rid of the tile border?

Which tile border do you mean? Can you provide a screenshot?

Here are some examples of tiles:

2 Likes

Thats great, thank you, should be enough to get started!

I know this is a lame question but is there an easy way to change the opacity of the tile background image or do I have to create PNGs with that already set up ? (sort of like your dash_2.png example)

As a suggestion I think a group background might be useful too ?

I meant the tiles which contain the sensors that are in the square. Can we remove the border from these sqaures?

image

You can use opacity:X property in CSS but this could affect the text. Could you please advise what exactly are you trying to achieve? Background for a group is not a good idea since tiles are moving when transitioning from one page to another.

You can comment out the box-shadow in main.ss file:

.-theme-transparent .item {
  color: #f5efee;
  background: rgba(132, 122, 116, 0.1) !important;
  /*box-shadow: 1px 1px 0 rgba(54, 47, 36, 0.35), -1px -1px 0 rgba(200, 200, 200, 0.1);
  border-radius: 2px;*/
}

Please feel free to customise css however you like. To be frank I ended up using standard theme after playing with transparent one for a day.

1 Like

Is this for a specific box or all the boxes ? I commented it out and I can still see the box

I made a typo initially. You need to comment out with /* … */ (as above). This rules is for all tiles (you might also want to clear browser’s cache)

Re Opacity I was looking for an easy way to change the opacity on a tile by tile basis, ideally I reasoned by including a bgOpacity value within the tile config - but I’ll brush up on my CSS and see if I can achieve this there but I don’t want this to effect the text. I’m not experienced with CSS so this may be a mute point.

The group background was so that I could create something that showed which items (tiles) were grouped in the same way a tile background borders an item. I have for example several controls that act on one device (think of say pan tilt zoom) and I wanted to draw a slightly darker rectangle background behind these to show they were associated - ideally I suppose I should create my own type. I might use a background with 3 or 4 such slightly darker areas (to subgroup if you like) such tiles based on their function.

I’m not sure I understand your comment about transitioning as the group backgrounds would vanish/transition too, but I’m still discovering the way this works… and enjoying it too.

Amazing job! Thank you!

1 Like

Could I kindly ask you to create an issue? https://github.com/resoai/TileBoard/issues

If you want the tile to be completely transparent you could add following rule:

background: transparent !important;

I would highly recommend that you guys configure the dashboards first to get it working and see if there are any issues. I’m sure we can get the cosmetic part of it sorted out with ease since it is pure HTML + CSS. It would also be nice to see some screenshots of what you have achieved :slight_smile:

3 Likes

This Is for .-theme-transparent .item ?

Yes, if you are still using the transparent theme

Which is the default one when I downloaded your code ?

It is null (none) i.e. the one that looks like Widnows tiles

1 Like

For me, it works just fine. I already tweaked the media_player into a new component for Snapcast, because it does not use the play, pause, prev, next buttons. Also changing source works very good!
It is an awesome dashboard! I like very much that I do not need to install any ‘heavy’ like Appdaemon in venv.
I’m still testing HA, so there’s not many to see. But I really enjoyed it!

Realy realy realy good job. I like it!

2 Likes