Changing sidebar title and favicon

Configuration Frontend
1

I want to change the Home Assistant default tile and change the browser favicon. I have played with the Favicon Changer integration without success. I have the necessary files in my homeassistant/www/favicons

1 Like
2

Changing a title on a sidebar can be done by card-mod theme:

изображение

This issue discussed here.

Favicon:

1 Like
3

Ildar,

I have gone through most of this post and I believe there were many changes while this multi-year long post unfolds. Are there more concise resources available out there?

4

Here is my problem more specifically: I am not sure how to access this:

image
image1920×904 166 KB

5
  1. I gave you a link to the thread mainly to show a direction.
  2. To learn smth, examples might be useful. There is a list of examples which might help you: go to the huge card-mod thread → 1st post → link at the bottom → scroll down the “themes” section → it will give you examples of using card-mod themes.
  3. As for the particular “change a title of a sidebar” task: one of these examples is styling a left sidebar (do not confuse with a right sidebar in a “sidebar dashboard layout”), and changing a title is there.
  4. In that example a title is dynamic and shows some “number of issues”:
    cdaeed7cbbf0ec5c4de5eb2711d5d7ad00799d2a
    just replace it with a static text.
6

Ildar, thanks for those examples, they will be very useful indeed. At the moment I believe I am not quite set up yet to perform any of those changes though. I do have card mod installed. I tried the code you show in that post and it is not applying to that header:

image
image2521×812 175 KB

Other changes to the sidebar have worked as you can see in the code. Thanks in advance!

7
  1. Make sure that card-mod is installed.
  2. Add this line to “configuration.yaml”:
frontend:
  themes: !include_dir_merge_named themes
  1. Create a “themes” in your “config” folder.
  2. Create a new file in the “themes” folder - “test_sidebar.yaml”:
test_sidebar:

  card-mod-theme: test_sidebar

  card-mod-sidebar-yaml: |
    .: |
      .menu .title {
        display: none !important;
      }
      .menu:after {
        content: "Hello, world";
        margin-left: 16px;
      }

  1. Reload themes:

    изображение
    изображение1548×398 20.8 KB

  2. Select this theme:
    изображение

  3. Check:
    изображение

with your example:
изображение

test_sidebar:

  card-mod-theme: test_sidebar

  card-mod-sidebar-yaml: |
    .: |

      .menu ha-icon-button {
        color: red !important;
        --mdc-icon-size: 10px;
      }
      .menu .title {
        color: cyan;
      }
2 Likes
8

For future issues - suggest to discuss any card-mod-theme relates issues in that thread:

1 Like
9

Ildar, thank you so much, turns out I had a name hard coded in the configuration.yaml file, sorry about all this!! Hopefully this helps someone!

1 Like