To-do list card

[SuperElma (DennisA)]

Hi, I use this:

card_mod:
  style:
    .: |

      ha-card.type-todo-list mwc-list#checked {
        display: none;
      }

      :host {
        --mdc-checkbox-ripple-size: 13px;
      }
      ha-check-list-item {
        min-height: 25px !important;  
      }
    ha-textfield:
      $: |
        .mdc-text-field {
          margin-top: -12px;
          margin-bottom: 5px;
          height: 50px !important;
        }

[Eisbaer2 (Wolfgang)]

Hi, I have this card:

How can I get rid of
a) the red marked space with header “Active”?
b) the yellow marked spaces?

Here is my code:

type: todo-list
entity: todo.zuhause
theme: Mushroom Square
hide_completed: true
grid_options:
  columns: 6
card_mod:
  style:
    ha-textfield:
      $: |
        .mdc-text-field {
          margin-top: -15px;
          margin-bottom: 0px;
          height: 15px !important;
        }
        .mdc-text-field__input {
          color: white !important;
        }
    .: |
      ha-card.type-todo-list div.header {
        display: none; 
      }
      ha-check-list-item.editRow.completed {
        display: none;
      }
      :host {
        --mdc-checkbox-ripple-size: 16px;
      }
      ha-check-list-item {
        min-height: 20px !important;
      }
      ha-card {
        --mdc-typography-subtitle1-font-size: 12px;
      }
      ha-icon-button.addButton {
        margin-top: -20px !important;
      }

[mogons]

Adding this works for me but it feels a bit brutal to play with h2 headers so use with caution.

div.header: |
h2 {
display: none;
}

[Eisbaer2 (Wolfgang)]

Didn’t work here. But I don’t know where/how to exactly add. Could you please post your complete card_mod code?

[mogons]

Code below - note that the formatting is important.

type: todo-list
entity: todo.anylist_######
hide_completed: false
title: to do
card_mod:
  style:
    .: |
      ha-check-list-item {
        min-height: 25px !important;  
      }
    ha-check-list-item$: |
      mwc-checkbox {
         display: none;
       }
    div.header: |
      h2 {
         display: none;
       }   
    ha-textfield:
      $: |
        .mdc-text-field {
          margin-top: -12px;
          margin-bottom: 5px;
          height: 50px !important;
        }

I can’t get rid of the add item box though so have now started looking at the PowerTodoist Card which seems more configurable.

[Eisbaer2 (Wolfgang)]

Great, solved it
Thank you @mogons

[bob92]

How do I remove the white line at the bottom of the text box? Seems to be related to span.mdc-line?

[claire.peacock]

This is great, thank you.
Is there a way to change the font size of the title above the Add Item line?
I have tried many ways but cannot find something that works.
Also, how did you add the shopping cart image?
Thank you.

[FragMenthor (Pedro Roque)]

Second question is easy, you can use any unicode character you like, and some are colored.
https://unicode-explorer.com/c/1F6D2
You can copy/paste any symbol as text:
You can even use them here in the forum: (just copy/paste from here)

For the first question:

      type: todo-list
      title: 'TEST 🛒'
      entity: todo.google_keep_compras_supermercado
      card_mod:
        style:
          ha-textfield:
            $: |
              .mdc-text-field {
                margin-top: -28px;
                margin-bottom: 5px;
                height: 50px !important;
              }
              .mdc-text-field__input {
                color: white !important;
              }
          $: |
            .card-header {
              color: red !important;
              font-size: 50px !important;
            }   
          .: |
            ha-card.type-todo-list div.header {
              display: none;
            }
            ha-check-list-item.editRow.completed {
              display: none;
            }
            :host {
              --mdc-checkbox-ripple-size: 33px;
              color: red;
              font-size: 50px;
            }
            ha-check-list-item {
              min-height: 28px !important;
            }
            ha-card {
              --mdc-typography-subtitle1-font-size: 17px;
              font-size: 50px;
            }
            ha-icon-button.reorderButton,
            ha-icon-button.addButton {
              margin-top: -35px !important;
            }
            .divider {
              display: none;
            }

Add the next section (as shown above) acconding to your likings:

          $: |
            .card-header {
              color: red !important;
              font-size: 50px !important;
            }  

You must make sure the text advancing is like avove. You get:

[eghara]

@19Sanchez98
I’m trying to do some thing similar to @Kippy74 I think.
I am creating a to do list for my kid so I don’t want him to be able to click the items in the to do list and modify it but I do want the check box enabled.

The workaround in the below post seems to work for me

To-Do list card - Option to disable edit dialog, make click on all parts of item check it off

For our shopping list we have never needed to open the edit item dialog, but the hit area for it is almost the whole list item element, while the checkbox itself is tiny in comparison, leading to a lot of accidental and unwanted edit dialogs. This is my current workaround to disable the pointer event for the whole line, and then re-enabling it for just the checkbox. card_mod: style: .: | ha-check-list-item { pointer-events: none; } ha-check-list-item $: mwc-…

[Manfred1]

Here‘s another CSS example for To-do lists

display_order: alpha_asc
type: todo-list
entity: todo.zuhause
card_mod:
  style:
    .: |
      ha-check-list-item {
        min-height: 28px !important;
        padding: 0px 19px
      }
      ha-check-list-item.multiline {
        height: 54px;
        align-items: center !important;
        --check-list-item-graphic-margin-top: -15px !important;
      }
      ha-card {
        --mdc-typography-subtitle1-font-size: 20px;
      }
      .divider {
        display: none;
      }

[shpongledsummer]

Hello shadow-DOM, my old friend… I’ve come to style with you again. I also gave this a shot and made some small adjustments like scroll-overflow for the list and hiding the header. I tried to round off those checkboxes to make everything look a bit nicer (see screenshot), but I haven’t been able to target them properly yet. It’s been ages since I last wrestled with card mod, has anyone here managed to style these checkboxes before?

display_order: none
type: todo-list
entity: todo.mealie_wocheneinkauf
hide_completed: false
card_mod:
  style:
    .: |
      ha-card .addRow {
        border-radius: var(--border-radius);
        box-shadow: var(--card-shadow) !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
      }

      .addBox {
        background-color: var(--card-item-background);
        border-radius: var(--border-radius);
        mask-image: linear-gradient(to top, var(--card-item-background) 0%, black 8px);
      }

      ha-check-list-item {
        transition: all 0.4s ease-in-out;
        min-height: 20px !important;
        padding: 0px 16px 0px 0px;
        font-weight: 500;
        font-size: 15px;
        margin: 8px 16px 0px 16px;
        border-radius: var(--border-radius);
        background-color: var(--card-item-background);
        --mdc-list-item-graphic-margin: 0px !important;
      }

      ha-check-list-item.completed {
        opacity: 0.5;
      }

      ha-sortable {
        max-height: 240px !important;
        display: block;
        overflow: auto;
        scrollbar-width: none;
        mask-image: linear-gradient(to top, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
      }

      ha-check-list-item * {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis !important;
      }

      ha-check-list-item.multiline {
        height: 54px;
        align-items: center !important;
        --check-list-item-graphic-margin-top: -15px !important;
      }

      ha-card {
        padding-bottom: 16px;
        --mdc-typography-subtitle1-font-size: 16px;
        --mdc-text-field-fill-color: transparent;
      }

      .header, .divider {
        display: none !important;
      }

[Hotfield]

Little late but I did it with card mod:

card_mod:
style:
p.empty {
display: none;
}

[LiQuid_cOOled]

Have you tested your code?

Two methods to remove the line @bob92 is referencing

card_mod:
  style:
    ha-textfield $: |
      .mdc-line-ripple::before {
        border-bottom-color: transparent !important;
      }
      .mdc-line-ripple::after {
        border-bottom-color: transparent !important;
      }

type: todo-list
entity: todo.example
card_mod:
      style: |
          :host {
            --mdc-text-field-idle-line-color: transparent;
            --mdc-text-field-hover-line-color: transparent;
            --mdc-select-idle-line-color: transparent;
            --mdc-select-hover-line-color: transparent;
         }

Your code when properly formatted simply removes this section

card_mod:
  style: |
        p.empty {
          display: none;
              }

[cily35]

hi, is there any way to set icon depding on the entry for each line? kind of what is doing the bring app, auto recognition of the elements…

[il_Capitano_25]

This card looks very nice. In my opinion, it gets significantly more out of the standard list. I copied and pasted the code. Unfortunately, it doesn’t look as nice for me. Card_mod is installed. But for example, the boxes remain square instead of round for me. What am I doing wrong? These individual colored sections are also very nice. Is this done via themes?

[shpongledsummer]

Hi The code contains some CSS variables which are defined in my theme. You probably don’t have those variables, so you need to replace them with your own variables or just some actual values, like colors.

Here’s the updated code with the specific values filled in:

card_mod:
  style:
    .: |
      ha-card .addRow {
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
      }

      .addBox {
        background-color: #f5f5f5;
        border-radius: 12px;
        mask-image: linear-gradient(to top, #f5f5f5 0%, black 8px);
      }

      ha-check-list-item {
        transition: all 0.4s ease-in-out;
        min-height: 20px !important;
        padding: 0px 16px 0px 0px;
        font-weight: 500;
        font-size: 15px;
        margin: 8px 16px 0px 16px;
        border-radius: 12px;
        background-color: #f5f5f5;
        --mdc-list-item-graphic-margin: 0px !important;
      }

      ha-check-list-item.completed {
        opacity: 0.5;
      }

      ha-sortable {
        max-height: 240px !important;
        display: block;
        overflow: auto;
        scrollbar-width: none;
        mask-image: linear-gradient(to top, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
      }

      ha-check-list-item * {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis !important;
      }

      ha-check-list-item.multiline {
        height: 54px;
        align-items: center !important;
        --check-list-item-graphic-margin-top: -15px !important;
      }

      ha-card {
        padding-bottom: 16px;
        --mdc-typography-subtitle1-font-size: 16px;
        --mdc-text-field-fill-color: transparent;
      }

      .header, .divider {
        display: none !important;
      }

[il_Capitano_25]

Great, that helped a lot. I was now able to adjust the color code with my code for the Material You Theme using ‘var(–card-background-color)’.

Only the checkboxes are unfortunately still not round…

[AllegdlyUndead]

Is it possible to rename the “Active” and “Completed” headers while still hiding the 3 dot icon? I currently have them hidden with a section of code from Freelancer here but I can’t seem to figure out how to rename the actual “active” text.

While I like the look of the text being hidden, for my wall mount tablet dashboard it would be nice to be able to see a edited “active” and “completed” section

[halwehrenberg (HeuristicAlpha)]

I think you may need to replace mwc-checkbox with ha-checkbox since 2025.5 release of home assistant.