Hello devs and members! I’d love to use HA as my main network dashboard with easy access to links of services. I’d rather use HA than something like Heimdall. Here is an image of what I’d like to accomplish inside of HA.
This is not mine but I’d love to be able to create something similar to this in HA. If it’s possible already, what cards, addons and or integrations do I need to accomplish such a thing?
Thank you!
Using the entity button card and a combonation of horizontal and vertical stacks you could pull this off.
Give it any entity ID and then use the URL for tap action.
as an example the config below creates the github icon shown below. When this icon is clicked, it opens a new tab in the browser and goes to github.com
- type: entity-button
entity: sun.sun
name: Github
icon: mdi:github-circle
tap_action:
action: url
That’s a great start and I thought of this but are there icons for radarr, sonarr, and all of the other services? Can I use my own image icons? Sorry for the lack of knowledge. Boomer here!
What theme you’re using? Love it… Will.you share the yaml file?
I haven’t seen anyone using custom icons in lovelace so not sure if its possible.
edit: try the custom button card.
midnight:
background-image: "center / cover no-repeat url('/local/background.jpg') fixed"
ha-card-background: "rgba(255, 255, 255, 0.10)"
ha-card-border-radius: "10px"
ha-card-box-shadow: "3px 3px 13px -6px rgba(0,0,0,1)"
label-badge-text-color: "#ffffff"
label-badge-background-color: "#21252b"
sidebar-background-color: "#000000"
sidebar-icon-color: "#03a9f4"
switch-checked-color: "#03a9f4"
switch-unchecked-color: "#7f848e"
switch-unchecked-button-color: "#7f848e"
table-row-background-color: "#2c3139"
table-row-alternative-background-color: "#424a56"
# The items below are some of the default values from
# https://github.com/home-assistant/frontend/blob/master/src/resources/ha-style.ts
# Where the default value isn't changed, its noted.
#Text
primary-text-color: "#ffffff"
secondary-text-color: "#b3b3b3"
text-primary-color: "#ffffff"
disabled-text-color: "#7f848e"
#Main interface colors
primary-color: "#03a9f4"
dark-primary-color: "#03a9f4"
light-primary-color: "#03a9f4"
accent-color: "#03a9f4"
divider-color: "rgb(50, 52, 56, 0.5)"
scrollbar-thumb-color: "rgb(194, 194, 194)" #Default Value
error-color: "#db4437" #Default Value
warning-color: "#f4b400" #Default Value
success-color: "#0f9d58" #Default Value
info-color: "#4285f4" #Default Value
#States and badges
state-icon-color: "#03a9f4"
state-icon-active-color: "#ffff00"
#Background and sidebar
card-background-color: "#000000"
primary-background-color: "#000000"
secondary-background-color: "#5e5e5e"
#For label-badge
label-badge-red: "#df4c1e" #Default Value
label-badge-blue: "#039be5" #Default Value
label-badge-green: "#0da035" #Default Value
label-badge-yellow: "#f4b400" #Default Value
#Paper items - These Need to Be removed/repalced based on Breaking Changes in 0.113.0 release notes
paper-grey-50: "#fafafa" #Default Value
paper-grey-200: "#eeeeee" #Default Value
paper-grey-500: "#9e9e9e" #Default Value
paper-green-400: "#66bb6a" #Default Value
paper-blue-400: "#42a5f5" #Default Value
paper-orange-400: "#ffa726" #Default Value
#Markdown styles
markdown-code-background-color: "#5e5e5e"
I’ve decided to give this a try anyway and just use icons that relate to the service. This will be a great temp solution until someone out there designs a better way to do this 
Did you happen to grab this yaml file? I see the OP has removed the account. It’s about the most beautiful dashboard i think ive seen.
Not sure if you were looking for my theme/background but if so, I fixed it so the data lives on the forum.
thank you i will implement that soon!
Actually decided to do it now, everything looks good except the cards are not fully transparent like yours, any idea which line of the code makes the card transparent.
was thinking it was:
ha-card-background: "rgba(255, 255, 255, 0.10)"
but this is what it looks like:
The first three numbers are a rgb color, the last is the level of transparency.
"rgba(211, 211, 211, 0.05)"
Is probably closer to what you are looking for. A neutral grey as the base color and then lowering the transparency a bit will make them pretty transparent. You can tune to your liking.
