šŸ”¹ Card-mod - Super-charge your themes!

Sorry to direct my question to you but my original post šŸ”¹ Card-mod - Super-charge your themes! - #1754 by Duke_box didnā€™t get any responses.

Unlike the question that prompted your answer, which was very helpful, I want to able to change things at the badge level, ā€œdiv.badge-completeā€ specifically the ā€œborder widthā€ and ā€œborder colorā€ elements.

I now know my original post was total rubbish as I can now edit both ā€œborder-widthā€ and ā€œborder-colorā€ elements in the Dev tools console and get my desired result.

I have tried various card-mod stuff in my theme yaml but to no effect. for example:

card-mod-view-yaml: |
    hui-masonry-view:
      $:
        hui-view-badge.complete $: |
          .badge {
            border-width: 1px;
          }

However I am useless at navigating the Dom tree using card-mod.

Can anyone please help me with pointers and examples please?

Thanks

I am not using badges.
That was my recent quick try:

card-mod-view-yaml: |
    hui-masonry-view:
      $:
        hui-view-badges $: |
          .badges {
            flex-direction: column;
          }

Since you need to go to a particular badge - you should go deeper:

  card-mod-view-yaml: |
    hui-masonry-view:
      $:
        hui-view-badges $:
          hui-badge:
            hui-entity-badge $: |
              .badge {
                background-color: cyan !important;
                --badge-color: red !important;
                --mdc-icon-size: 32px !important;
                --primary-text-color: orange !important;
              }

to get this beautiful look:

And this is a very ā€œbruteā€ way since badges currently do not seem to have CSS variables (not to mention a nasty look of new badges in general).

2 Likes

Thanks for the example.

I agree with your sentiment about the new badges.

Update: Based on your example I have now got my desired result of having the border and border colour of the new badges changed independently of the rest of the dashboard.

If anyone is interested, here is my code snippet that changes the border colour of the new badge as per my original request.

  card-mod-view-yaml: |
    hui-masonry-view:
      $:
        hui-view-badges $:
          hui-badge:
            hui-entity-badge $: |
              .badge {
                border-width: 0.25px !important;
                border-color: #039BE5 !important;
              }
1 Like

unbelieveable what magic you had found again - great job
Thanks a lot

What does it require to run the card-mod-sidebar ?

I have installed hacs and card-mod too, but the left menu items in the sidebar are not highlighted.

Finally: How can I rename an icons title like here from ā€œevccā€ to ā€œCHARGERā€
image

And is there a way to make the icons bigger too ?

thanks a lot !

If this dashboard was created by you - why do not you want to edit the title in the first place?

UPDATED VERSION

not sure if that is possible cause i have installed the add on and clicked an option in the addon configuration to show evcc add on in the sidebar.
And evcc seems to have a ā€œfixed add on titleā€ or I missed something.

I can resort the order of the side bar elements on each device, but I have never seen an ā€œedit titleā€ button except the option for all those sidebar elements which I have added in configuration yaml manually.

So for now i have no clue where to change the title of such add on element in the sidebar and someone had linked me to your comment above that it should or could be possible this way.

I also have tried to use your ā€œsidebar highlighterā€ in my configuration.yaml but it did not work for whatever reason and therefore looked for a ā€œcard-mod-sidebarā€ if that would be needed cause I could not read all the comments, I have followed your link where you described how you had found the undocumented feature (madalena or so had commented his / her experience and asked you)

I have installed card-mod, I have checked if it works with an entity card and it did.
I assume that /hacsfiles is a placeholde for the

HACS installation folder (HA OS) /homeinstallation/www/community`

my configuration.yaml

 extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

##############################################################################################
###  sidebar colourfull selector                                                           ###
###  https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1236   ###
###                                                                                        ###
##############################################################################################

card-mod-sidebar-yaml: |
  .: |
    a:hover paper-icon-item ha-icon {
      color: red !important;
    }
    a:hover paper-icon-item .item-text{
      color: red;
    }
    a:hover paper-icon-item {
      background: yellow;
    }

But this did not work out.
And after HA restart I got an error about ā€œcard-mod-sidebar-yamlā€ not found

Any ideas what I have to change ?
thanks

Please read in card_mod wiki on card_mod github page how to use card_mod themes. It is well and detailed described there. It should not be necessary to do it here again.

2 Likes

Thanks,
I will have a look this evening cause there is a lot more to do than what I had assumed HACS would have done. Had not much time, but saw pieces missing in my yaml.

Hey all. Beginner here. Is it possible to use card-mod to hide elements of a webpage Iā€™m pulling in to my dashboard using a website card, presumably using an iframe?

Iā€™ve seen various examples on here of scaling the iframe contents, but nothing where people are styling the actual contents within. Perhaps thatā€™s not possible?

Itā€™s not, by definition of how an iframe works. Itā€™s like trying to style a page open in another tab in your browser.

Also note that this is the card-mod theme topic and not the general one.

Thanks Pieter.

Iā€™m trying to toggle the sidebar and topbar which is enabled (hidden for mobile view) by the Bubble theme.

card-mod-view-yaml: |
    hui-sidebar-view:
      $: |
        .container {
            overflow: hidden;
            /* padding: 6px; */
        }
        @media only screen and (min-width: 768px) {
            .container {
              max-width: 520px;
              margin: auto !important;
              width: -webkit-fill-available;
            }
        }
        #wrapper: |
          $: |
            #progressContainer {
                border-radius: 14px !important;
        }
      .: |
        "#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
            border-radius: 14px !important;
        }

How I do that by just a simple toggle button ?

Hi, is there a way to change colors of a view header (a.k.a. app-header/app-toolbar) when a theme is assigned in the definition of the view?

  1. view
- title: Test
  path: overview-test
  theme: my_attempt
  1. theme
my_attempt:
  # both variables work only if theme is set in user settings
  app-header-background-color: "#963484"
  app-header-text-color: "#EFD6D2"

  # card_mod theme also works only if theme is set in user settings
  card-mod-theme: my_attempt
  card-mod-root-yaml: |
    .: |
      app-header {
        --app-header-background-color: "#963484" !important;
        background-color: "#963484" !important;
      }

I also tried things like:

card-mod-root-yaml: |
    .: |
      div>div.header {
        --app-header-background-color: "#963484" !important;
      }
card-mod-root: |
  :host {
    --app-header-background-color: "#963484" !important;
  }

Because that seem to do the job in dev tools:

Iā€™ve tried the following code to Hide/Show the sidebars but its not working

Bubble:  
  # Existing theme settings...

  card-mod-theme: Bubble
  
  card-mod-root-yaml: |
    .: |
      @media only screen and (max-width: 768px) {
          .header {
            display: none;
            opacity: 0;
          }
          #view {
            padding-top: 0 !important;
            margin-top: 0 !important;
            height: calc(100vh - env(safe-area-inset-top)) !important;
          }
      }

  card-mod-more-info-yaml: |
     $: |
      .mdc-dialog .mdc-dialog__scrim {
         backdrop-filter: blur(15px);
         -webkit-backdrop-filter: blur(15px);
         background: rgba(0,0,0,.6);
      } 
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
         box-shadow: none !important;
         border-radius: var(--ha-card-border-radius);
      }
     .: |
      :host {
         --ha-card-box-shadow: none;
      }

  card-mod-view-yaml: |
    hui-sidebar-view:
      $: |
        .container {
            overflow: hidden;
            display: {{ 'none' if states('input_select.sidebar_topbar_visibility') == 'Hide' else 'block' }};
        }
        @media only screen and (min-width: 768px) {
            .container {
              max-width: 520px;
              margin: auto !important;
              width: -webkit-fill-available;
            }
        }
        #wrapper: |
          $: |
            #progressContainer {
                border-radius: 14px !important;
        }
      .: |
        "#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
            border-radius: 14px !important;
        }

Iā€™ve tried solutions Frontend.set_theme not working - #25 by ausfas
but none working

templates like this should work:

{% set kerst = is_state('input_select.theme','Kerst') %}
 overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
 background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}};

maybe start experimenting with a subset (the minimal you want to customize) and then build from there

Finally some progress.
The following allows switching of the theme ā€¦ that is working :smiling_face_with_three_hearts:

input_select:
  theme_selector:
    name: Theme Selector
    options:
      - "default"
      - "ios-dark-mode"
    initial: "default"
    icon: "mdi:theme-light-dark"
alias: Switch Theme
description: ""
trigger:
  - platform: state
    entity_id: input_select.theme_selector
action:
  - data_template:
      name: "{{ states('input_select.theme_selector') }}"
    action: frontend.set_theme

Now need to make the browser_mod and card-mod to work ( the reason I came to this thread), so that I can enable and disable side and topbars by injecting the code within the Bubble theme.
Once Iā€™m all done will document this for everyone on a separate thread for inexperience users before they dive into more complicate experiments.

the following isnā€™t working yet.

  - action: browser_mod.set_theme
    data:
      dark: dark
      theme: auto

make that

data:

yeah these changes have always been like that, no news there.

Still not sure what you are trying to use card-mod theming for. Ofc, I dont have Bubble theme, but for the hiding of the sidebar, you can easily use Kiosk-mode plugin. No need for theming at all, just flip the toggle and youā€™re set.

Thanks, I tried Kiosk mode but thatā€™s not working

so moved here

I have folowing card-mode style for cards:

                - type: custom:mushroom-select-card
                  entity: input_select.battmgmt_timeplan_po5
                  fill_container: false
                  layout: vertical
                  icon_type: none
                  name: '5'
                  secondary_info: none
                  card_mod:
                    style:
                      mushroom-select-option-control$:
                        mushroom-select$: |
                          .mdc-select__selected-text {
                            font-size: 12px !important;
                          }
                          .mdc-select__anchor{
                            background: black !important;
                            border: 3px !important;
                            border-style: solid !important;
                            border-color: black !important;
                            padding: 3px !important;
                          }          
                          .mdc-select__dropdown-icon {
                            display: none !important;
                          }
                          mwc-menu {
                            --mdc-menu-item-height: 16px;
                          }          
                      .: |
                        ha-card {
                            padding: 0px !important;
                            margin: 0px !important;
                        } 
                        .actions {
                            padding: 0px !important;
                        }
                      mushroom-state-info$: |
                        .container {
                          --card-primary-color: blue;
                          align-items: middle;
                          
                        } 

Because there are a lot of those cards with same style setting, Iā€™d like to set this style in theme.
Can you help me, how to set this style in the theme style setting?