I want it use HA as my primary network dashboard

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!

Comb through here for ideas: System Monitoring - How does your look?

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

2 Likes

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"

1 Like

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 :smiley:

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.

1 Like

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.