I seen a dasboard someone posted a couple weeks ago on the new beta 3. It had a very nice clean look with the label and clock on the top corners but did not have the widget look to it. Like it wasnt in a square box. I tried this in the past but couldnt get it, is it something that is now available in 3? I just read through the 3 docs but didnt see any mention. Thanks!
you can (and always could) give widgets rounded corners.
but i dont know if thats what you mean.
I found it! So, you see how in the top right corner he has “Living Room” that doesnt look like it is a widget, it is just text. Id like to do that. I tried getting that to work for a long time with version 2, I was curious if version 3 made it easier to do?
nothing changed for that.
but if its like this with a lot of space above it, its just a change in the background from the widget.
something like:
widget_style: “background-color: rgba(0,0,0,0)”
So to change the colour of any or all widgets to say transparent that’s what I need to use?
Under what section does that line come ? And is it in the css file?
Thanks
depends on what you want.
do you completely want to create your own skin and get the appearance changed from all widgets then you best start a complete custom skin.
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skins
but if you want to change the appearance from just 1 widget then you can use the line i posted inside the dashboard under the widget.
most of the time its advisable to start with just trying things out in a dashboard.
all things you can change are in the docs.
in the widget reference you can find all variables you can use to change the css from a widget:
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#widget-reference
1 Like
The line that you posted…Do I add it to the css file or yaml file?
no to the widget information part in your dashboard.
PLEASE read the part in the documentation about how to create dashboards. It will let you understand how things work with dashboards and how you can make it to your wishes.
1 Like
@ReneTode thanks buddy I got that working. However being new to dashboard I am still learning. I wanted to change the font colour to white for the clock from purple however I have looked into the css, and yaml file but it wouldn’t change.
Any idea what I am doing wrong? I have looked into the docs and followed it but no joy buddy
dont look in the css or yaml files at all.
just do your modifying in your widgets.
in the widget reference: http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#widget-reference
you can find what you can modify.
for the clock you find:
widget_style
time_style
date_style
so to change the font color to white you create a widget like:
clock:
widget_type: clock
time_style: "color: white"
date_style: "color: green;font-size: 24px;any other valid css"
thanks alot buddy ! also if I want to move the time and date to somewhere else on my page, where do I edit the code?
stupid question but whats the need for the css and yaml file then? I have downloaded some dashboards and I see colour configuration in the css and yaml files for different sensors and widgets etc?
thanks for all your help @ReneTode
Quick question, I tried this on a widget assuming the background would become transparent however I received an error and the Dashboard wouldn’t load. Will this work for making a widget transparent?
if you want to place the clock widget on another place in your dashboard then you place it on another place in the layout.
the css and yaml files are default values. that is a skin.
so if you want to change for example the appearance from all switches, you do it there.
but its wise to get familiar with creating dashboards and widgets before starting to create a custom_skin.
a dashboard is just 1 file containing layout and widget information.
try out things like
?skin=zen or
?skin=obsidian
behind the url you use to open the dashboard. then you see the effect from the yaml and css files.
the information in the dashboard file overrides the skin.
@photo64
you probably made an error in the dashboard.
a dashboard is a YAML file, so you need to keep it to yaml rules.
so take care of indentions and make sure you dont use characters like TAB
1 Like
Are all weather text blue in colour?
I have this:
weather:
widget_type: weather
units: "°C"
widget_style: "background-color: rgba(0,0,0,0)"
text_style: "colour: white"Not sure what I did but I re-typed it and it worked - Thanks!
1 Like
that depends on the skin.
but i keep repeating look at the docs!!
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#weather
that tells you that you have the following style options:
- widget_style
- main_style
- unit_style
- sub_style
- sub_unit_style
- title_style
do you see text_style in that list?
1 Like
I’m sorry to reflate the topic, but maybe I can contribute something to the original question.
I recently dedicated a few hours to renew my dashboard, and the result is attached in a screenshot.
I know that the way I have mounted it is a little sloppy, but the result is good.
I’m not an expert, I just wanted something nice and practical for my Home Assistant, I can share the information if you’re interested.
2 Likes
Very Nice what css an skin you are using, if you can share you code!
thanks
Will share later .