custom_card_esh_welcome - Font Size Enhancement

[jarrah31]

@EverythingSmartHome

Thank you for your excellent detailed tutorial video that helped me get up to speed with the very useful minimalist Dashboard. I would however like to suggest some font and chip size alterations with your custom_card_esh_welcome module please.

• Increase the chip size to allow for a larger font
• Increase font size
• Have the welcome text on a single line to save space on a mobile view

Current size of the chip and font:

Suggested size:

The code changes are as follows:

line 131            return welcome + ', ' + user.name + '!';`

line 359      - width: "67px"
line 360      - height: "99px"

line 382            - width: "35px"

line 386            - width: "57px"
line 387            - height: "57px"

line 415            - font-size: "13px"
line 416            - width: "50px"

line 421            - margin-top: "-10px"

The full set with the changes is here:

---
card_esh_welcome:
  variables:
    ulm_weather: "[[[ return variables.ulm_weather]]]"
    entity_1:
      entity_id:
      icon: "[[[ return entity.attributes.icon ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_2:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_3:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_4:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_5:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
  template:
    - "ulm_language_variables"
  show_icon: false
  show_name: false
  show_label: true
  styles:
    grid:
      - grid-template-areas: >
          [[[
            if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
              return "\'item1\' \'item2\' ";
            } else {
              return "\'item1\' \'item2\' \'item3\'";
            }
          ]]]
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content"
      - row-gap: "0px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "10px"
    custom_fields:
      item3:
        - display: >
            [[[
              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
                return "none";
              } else {
                return "block";
              }
            ]]]
      item4:
        - display: >
            [[[
              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
                return "none";
              } else {
                return "block";
              }
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_topbar"
        variables:
          ulm_card_esh_welcome_collapse: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
          ulm_weather: "[[[ return variables.ulm_weather]]]"
        styles:
          card:
            - border-radius: "none"
            - box-shadow: "none"
            - padding: "4px"
            - margin-left: "relative"
    item2:
      card:
        type: "custom:button-card"
        show_icon: false
        show_label: false
        show_name: true
        show_entity_picture: false
        name: |
          [[[
            var today = new Date();
            var time = today.getHours()
            let welcome = '';
            if (time >= '18'){
              welcome = variables.ulm_evening;
            } else if (time >= '12'){
              welcome = variables.ulm_afternoon;
            } else if (time >= '5'){
              welcome = variables.ulm_morning;
            } else {
              welcome = variables.ulm_hello;
            }
            return welcome + ', ' + user.name + '!';
          ]]]
        styles:
          name:
            - align-self: "start"
            - justify-self: "start"
            - font-weight: "bold"
            - font-size: "24px"
            - margin-left: "16px"
          grid:
            - grid-template-areas: "'i n' 'i l'"
            - grid-template-columns: "min-content auto"
            - grid-template-rows: "min-content min-content"
            - text-align: "start"
          card:
            - box-shadow: "none"
            - padding-bottom: "8px"
    item3:
      card:
        type: "custom:button-card"
        template: >
          [[[
            if(variables.entity_1.nav && variables.entity_2.nav && variables.entity_3.nav && variables.entity_4.nav && variables.entity_5.nav){
              return 'card_esh_welcome_nav'
            }
          ]]]
        styles:
          card:
            - border-radius: "none"
            - box-shadow: "none"
            - padding: "4px"
        variables:
          entity_1: "[[[ return variables.entity_1]]]"
          entity_2: "[[[ return variables.entity_2]]]"
          entity_3: "[[[ return variables.entity_3]]]"
          entity_4: "[[[ return variables.entity_4]]]"
          entity_5: "[[[ return variables.entity_5]]]"

card_esh_welcome_title:
  tap_action:
    action: "none"
  show_icon: false
  show_label: true
  show_name: true
  styles:
    card:
      - background-color: "rgba(0,0,0,0)"
      - box-shadow: "none"
      - height: "auto"
      - width: "auto"
      - margin-top: "-10px"
      - margin-left: "16px"
      - margin-bottom: "-15px"
    grid:
      - grid-template-areas: "'n' 'l'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content"
    name:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "20px"
    label:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "1rem"
      - opacity: "0.4"

card_esh_welcome_nav:
  show_icon: false
  show_name: true
  show_label: false
  styles:
    grid:
      - grid-template-areas: "'item1 item2 item3 item4 item5'"
      - grid-template-columns: "1fr 1fr 1fr 1fr 1fr"
      - grid-template-rows: "min-content"
      - justify-items: "center"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
      - overflow: "visible"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_1.nav; ]]]"
              icon: "[[[ return variables.entity_1.icon ]]]"
              styles:
                icon:
                  - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
                img_cell:
                  - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
          item2:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_1.nav; ]]]"
              name: "[[[ return variables.entity_1.name ]]]"
    item2:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        entity: "[[[ return variables.entity_2.entity_id ]]]"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_2.nav; ]]]"
              icon: "[[[ return variables.entity_2.icon ]]]"
              styles:
                icon:
                  - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
                img_cell:
                  - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
          item2:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_2.nav; ]]]"
              name: "[[[ return variables.entity_2.name ]]]"
    item3:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        entity: "[[[ return variables.entity_3.entity_id ]]]"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_3.nav; ]]]"
              icon: "[[[ return variables.entity_3.icon ]]]"
              styles:
                icon:
                  - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
                img_cell:
                  - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
          item2:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_3.nav; ]]]"
              name: "[[[ return variables.entity_3.name ]]]"
    item4:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        entity: "[[[ return variables.entity_4.entity_id ]]]"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_4.nav; ]]]"
              icon: "[[[ return variables.entity_4.icon ]]]"
              styles:
                icon:
                  - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]"
                img_cell:
                  - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]"
          item2:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_4.nav; ]]]"
              name: "[[[ return variables.entity_4.name ]]]"
    item5:
      card:
        type: "custom:button-card"
        template: "card_esh_welcome_pill_nav"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_5.nav; ]]]"
              icon: "[[[ return variables.entity_5.icon ]]]"
              styles:
                icon:
                  - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]"
                img_cell:
                  - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]"
          item2:
            card:
              type: "custom:button-card"
              tap_action:
                action: "navigate"
                navigation_path: "[[[ return variables.entity_1.nav; ]]]"
              name: "[[[ return variables.entity_5.name ]]]"

card_esh_welcome_pill_nav:
  show_icon: false
  show_label: false
  show_name: false
  state:
    - value: "on"
      styles:
        card:
          - overflow: "visible"
          - box-shadow: "none"
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2'"
      - grid-template-columns: "min-content"
      - grid-template-rows: "1fr 1fr"
      - row-gap: "12px"
      - justify-items: "center"
      - column-gap: "auto"
    card:
      - border-radius: "50px"
      - place-self: "center"
      - width: "67px"
      - height: "99px"
      - box-shadow: >
          [[[
            if (hass.themes.darkMode){
              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
            } else {
              return "var(--box-shadow)";
            }
          ]]]
  color: "var(--google-grey)"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        show_icon: true
        show_label: false
        show_name: false
        styles:
          grid:
            - grid-template-areas: "i"
          icon:
            - color: "[[[ return `rgba(var(--color-theme), 0.20)`;]]]"
            - width: "35px"
          img_cell:
            - background-color: "[[[ return `rgba(var(--color-theme), 0.05)`;]]] "
            - border-radius: "50%"
            - width: "57px"
            - height: "57px"
          card:
            - box-shadow: "none"
            - border-radius: "50px"
            - padding: "5px"
        state:
          - value: "on"
            styles:
              card:
                - overflow: "visible"
                - box-shadow: >
                    [[[
                      if (hass.themes.darkMode){
                        return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                      } else {
                        return "var(--box-shadow)";
                      }
                    ]]]
    item2:
      card:
        type: "custom:button-card"
        show_icon: false
        show_label: false
        styles:
          grid:
            - grid-template-areas: "n"
          name:
            - font-weight: "bold"
            - font-size: "13px"
            - width: "50px"
            - padding-bottom: "7px"
          card:
            - box-shadow: "none"
            - padding: "0px 5px 5px 5px"
            - margin-top: "-10px"
            - border-radius: "50px"

card_esh_welcome_topbar:
  show_icon: false
  show_name: true
  show_label: false
  styles:
    grid:
      - grid-template-areas: "'item1 item2 item3'"
      - grid-template-columns: "1fr 7fr 1fr"
      - grid-template-rows: "min-content"
      - justify-items: "center"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "chips"
        entity: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
        icon: "mdi:chevron-up"
        show_icon: true
        styles:
          grid:
            - grid-template-areas: "'i'"
          card:
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
        state:
          - value: "on"
            icon: "mdi:chevron-down"
            styles:
              icon:
                - color: "rgb(var(--color-theme))"
        tap_action:
          action: "call-service"
          service: "input_boolean.toggle"
          service_data:
            entity_id: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
    item2:
      card:
        type: "custom:button-card"
        template: "chip_weather_date"
        entity: "[[[ return variables.ulm_weather]]]"
        variables:
          ulm_weather: "[[[ return variables.ulm_weather]]]"
        tap_action:
          action: "more-info"
        styles:
          card:
            - width: "100px"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
    item3:
      card:
        type: "custom:button-card"
        tap_action:
          action: "navigate"
          navigation_path: "/config/dashboard"
        template: "chip_mdi_icon_only"
        variables:
          ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
        styles:
          card:
            - align-self: "end"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]

[V4n1X]

Good improvements, I think two new variables with multiline: false and big_icons: true could be a possible implementation.

[xm4rcell0x]

That’s a great hint! I love how you have implemented this.

[damusmf]

i had implemented the bigger icons and padding to allow for longer words to actually fit, but after the update to this card that has reverted and with the changes to this card i can't figure out how to get it back

[walkerjohnsonofficial]

Thank you for adjusting the font size and symbols, I have followed your method to achieve a better display, if it weren't for your work, I guess I would have to toss for a long time! 20230826 The current version has changed. I adjusted it accordingly. You can directly change the number and use your number to adjust it. The effect is also very good. I have annotated the original location and the current location in Chinese.

---

card_esh_welcome: template: "ulm_language_variables" variables: ulm_weather: "[[[ return variables.ulm_weather]]]" entity_1: color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; var color = colors[Math.floor(Math.random() * colors.length)]; return color; ]]] entity_2: color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; var color = colors[Math.floor(Math.random() * colors.length)]; return color; ]]] entity_3: color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; var color = colors[Math.floor(Math.random() * colors.length)]; return color; ]]] entity_4: color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; var color = colors[Math.floor(Math.random() * colors.length)]; return color; ]]] entity_5: color: > [[[ var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; var color = colors[Math.floor(Math.random() * colors.length)]; return color; ]]] show_icon: false show_label: true show_name: false styles: grid: - grid-template-areas: > [[[ if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){ return "'item1' 'item2' "; } else { return "'item1' 'item2' 'item3'"; } ]]] - grid-template-columns: "1fr" - grid-template-rows: "min-content min-content" - row-gap: "0px" card: - border-radius: "var(--border-radius)" - box-shadow: "var(--box-shadow)" - padding: "10px" - cursor: "default" - "--mdc-ripple-press-opacity": 0 # prevent click animation custom_fields: item3: - display: > [[[ if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){ return "none"; } else { return "block"; } ]]] item4: - display: > [[[ if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){ return "none"; } else { return "block"; } ]]] custom_fields: item1: card: type: "custom:button-card" template: "card_esh_welcome_topbar" variables: ulm_card_esh_welcome_collapse: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]" ulm_weather: "[[[ return variables.ulm_weather]]]" styles: card: - border-radius: "none" - box-shadow: "none" - padding: "4px" - margin-left: "relative" - cursor: "default" - "--mdc-ripple-press-opacity": 0 # prevent click animation item2: card: type: "custom:button-card" show_icon: false show_label: false show_name: true show_entity_picture: false name: | [[[ var today = new Date(); var time = today.getHours() let welcome = ''; if (time >= '18'){ welcome = variables.ulm_evening; } else if (time >= '12'){ welcome = variables.ulm_afternoon; } else if (time >= '5'){ welcome = variables.ulm_morning; } else { welcome = variables.ulm_hello; } return welcome + ', ' + '
' + user.name + '!'; ]]] # name: | # [[[ # var today = new Date(); # var time = today.getHours() # let welcome = ''; # if (time >= '18'){ # welcome = variables.ulm_evening; # } else if (time >= '12'){ # welcome = variables.ulm_afternoon; # } else if (time >= '5'){ # welcome = variables.ulm_morning; # } else { # welcome = variables.ulm_hello; # } # return welcome + ', ' + user.name + '!'; # ]]] styles: name: - align-self: "start" - justify-self: "start" - font-weight: "bold" - font-size: "24px" - margin-left: "16px" grid: - grid-template-areas: "'i n' 'i l'" - grid-template-columns: "min-content auto" - grid-template-rows: "min-content min-content" - text-align: "start" card: - box-shadow: "none" - padding-bottom: "8px" - cursor: "default" - "--mdc-ripple-press-opacity": 0 # prevent click animation item3: card: type: "custom:button-card" template: "card_esh_welcome_nav" styles: card: - border-radius: "none" - box-shadow: "none" - padding: "4px" - cursor: "default" - "--mdc-ripple-press-opacity": 0 # prevent click animation variables: entity_1: "[[[ return variables.entity_1 ]]]" entity_2: "[[[ return variables.entity_2 ]]]" entity_3: "[[[ return variables.entity_3 ]]]" entity_4: "[[[ return variables.entity_4 ]]]" entity_5: "[[[ return variables.entity_5 ]]]"

card_esh_welcome_title: tap_action: action: "none" show_icon: false show_label: true show_name: true styles: label: - justify-self: "start" - font-weight: "bold" - font-size: "1rem" - opacity: "0.4" name: - justify-self: "start" - font-weight: "bold" - font-size: "20px" grid: - grid-template-areas: "'n' 'l'" - grid-template-columns: "1fr" - grid-template-rows: "min-content min-content" card: - background-color: "rgba(0,0,0,0)" - box-shadow: "none" - height: "auto" - width: "auto" - margin-top: "-10px" - margin-left: "16px" - margin-bottom: "-15px" - cursor: "default" - "--mdc-ripple-press-opacity": 0 # prevent click animation

card_esh_welcome_nav: show_icon: false show_name: true show_label: false styles: grid: - grid-template-areas: | [[[ return "'" + [(variables.entity_1?.nav ? 'item1' : ''), (variables.entity_2?.nav ? 'item2' : ''), (variables.entity_3?.nav ? 'item3' : ''), (variables.entity_4?.nav ? 'item4' : ''), (variables.entity_5?.nav ? 'item5' : '')].join(' ') + "'"; ]]] - grid-template-columns: | [[[ return [(variables.entity_1?.nav ? '1fr' : ''), (variables.entity_2?.nav ? '1fr' : ''), (variables.entity_3?.nav ? '1fr' : ''), (variables.entity_4?.nav ? '1fr' : ''), (variables.entity_5?.nav ? '1fr' : '')].join(' '); ]]] - grid-template-rows: "min-content" - justify-items: "center" card: - border-radius: "var(--border-radius)" - box-shadow: "var(--box-shadow)" - padding: "12px" - overflow: "visible" custom_fields: item1: card: type: "custom:button-card" template: "card_esh_welcome_pill_nav" variables: number_of_nav_pills: | [[[ return [variables.entity_1?.nav, variables.entity_2?.nav, variables.entity_3?.nav, variables.entity_4?.nav, variables.entity_5?.nav].filter(el => el !== undefined).length; ]]] entity: "[[[ return variables.entity_1; ]]]" item2: card: type: "custom:button-card" template: "card_esh_welcome_pill_nav" variables: number_of_nav_pills: | [[[ return [variables.entity_1?.nav, variables.entity_2?.nav, variables.entity_3?.nav, variables.entity_4?.nav, variables.entity_5?.nav].filter(el => el !== undefined).length; ]]] entity: "[[[ return variables.entity_2; ]]]" item3: card: type: "custom:button-card" template: "card_esh_welcome_pill_nav" variables: number_of_nav_pills: | [[[ return [variables.entity_1?.nav, variables.entity_2?.nav, variables.entity_3?.nav, variables.entity_4?.nav, variables.entity_5?.nav].filter(el => el !== undefined).length; ]]] entity: "[[[ return variables.entity_3; ]]]" item4: card: type: "custom:button-card" template: "card_esh_welcome_pill_nav" variables: number_of_nav_pills: | [[[ return [variables.entity_1?.nav, variables.entity_2?.nav, variables.entity_3?.nav, variables.entity_4?.nav, variables.entity_5?.nav].filter(el => el !== undefined).length; ]]] entity: "[[[ return variables.entity_4; ]]]" item5: card: type: "custom:button-card" template: "card_esh_welcome_pill_nav" variables: number_of_nav_pills: | [[[ return [variables.entity_1?.nav, variables.entity_2?.nav, variables.entity_3?.nav, variables.entity_4?.nav, variables.entity_5?.nav].filter(el => el !== undefined).length; ]]] entity: "[[[ return variables.entity_5; ]]]"

card_esh_welcome_pill_nav: tap_action: action: "navigate" navigation_path: "[[[ return variables.entity?.nav; ]]]" show_icon: false show_label: false show_name: false state: - operator: "template" value: "[[[ return !variables.entity?.nav; ]]]" styles: card: - display: "none" styles: grid: - grid-template-areas: "'item1' 'item2'" - grid-template-columns: "1fr" - grid-template-rows: "1fr 1fr" - row-gap: "12px" - justify-items: "center" - column-gap: "auto" card: - border-radius: "50px" - place-self: "center" # 五个大椭圆调整大小 # - width: "67px" # - height: "99px" # - width: "[[[ return (52 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" # - height: "[[[ return (84 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - width: "[[[ return (67 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - height: "[[[ return (99 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - box-shadow: > [[[ if (hass.themes.darkMode){ return "0px 2px 4px 0px rgba(0,0,0,0.80)"; } else { return "var(--box-shadow)"; } ]]] - "--mdc-ripple-press-opacity": 0.12 # allow click animation color: "var(--google-grey)" custom_fields: item1: card: type: "custom:button-card" tap_action: action: "navigate" navigation_path: "[[[ return variables.entity?.nav; ]]]" show_icon: true show_label: false show_name: false icon: "[[[ return variables.entity?.icon ]]]" styles: icon: - color: "[[[ return rgba(var(--color-${variables.entity?.color}), 1);]]]" # 五个图像标识调整大小 # - width: "35px" # - width: "[[[ return (20 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - width: "[[[ return (35 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" img_cell: - background-color: "[[[ return rgba(var(--color-${variables.entity?.color}), 0.20);]]]" - border-radius: "50%" # 五个小圆圈调整大小 # - width: "57px" # - height: "57px" # - width: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" # - height: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - width: "[[[ return (57 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - height: "[[[ return (57 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" grid: - grid-template-areas: "i" card: - box-shadow: "none" - border-radius: "50px" - padding: "5px" state: - value: "on" styles: card: - overflow: "visible" - box-shadow: | [[[ if (hass.themes.darkMode){ return "0px 2px 4px 0px rgba(0,0,0,0.80)"; } else { return "var(--box-shadow)"; } ]]] item2: card: type: "custom:button-card" tap_action: action: "navigate" navigation_path: "[[[ return variables.entity?.nav; ]]]" show_icon: false show_label: false name: "[[[ return variables.entity?.name ]]]" styles: name: - font-weight: "bold" # 五个字母调整大小 # - font-size: "13px" # - width: "50px" # - font-size: "[[[ return (9.5 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" # - width: "[[[ return (33 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
- font-size: "[[[ return (13 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - width: "[[[ return (50 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]" - padding-bottom: "7px" grid: - grid-template-areas: "n" card: - box-shadow: "none" - padding: "0px 5px 5px 5px" # 五个字母位置向上调整 # - margin-top: "-5px" - margin-top: "-10px" - border-radius: "50px"

card_esh_welcome_topbar: show_icon: false show_label: false show_name: true styles: grid: - grid-template-areas: "'item1 item2 item3'" - grid-template-columns: "1fr 7fr 1fr" - grid-template-rows: "min-content" - justify-items: "center" card: - border-radius: "var(--border-radius)" - box-shadow: "var(--box-shadow)" - padding: "12px" - cursor: "default" - "--mdc-ripple-press-opacity": 0 # prevent click animation custom_fields: item1: card: type: "custom:button-card" template: "chips" tap_action: action: "call-service" service: "input_boolean.toggle" service_data: entity_id: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]" show_icon: true icon: "mdi:chevron-up" entity: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]" styles: grid: - grid-template-areas: "'i'" card: - box-shadow: > [[[ if (hass.themes.darkMode){ return "0px 2px 4px 0px rgba(0,0,0,0.80)"; } else { return "var(--box-shadow)"; } ]]] - visibility: "[[[ return variables.ulm_card_esh_welcome_collapse ? 'visible' : 'hidden'; ]]]" - "--mdc-ripple-press-opacity": 0.12 # allow click animation state: - value: "on" icon: "mdi:chevron-down" styles: icon: - color: "rgb(var(--color-theme))" item2: card: type: "custom:button-card" template: "chip_weather_date" variables: ulm_weather: "[[[ return variables.ulm_weather]]]" tap_action: action: "more-info" entity: "[[[ return variables.ulm_weather]]]" styles: card: - width: "100px" - box-shadow: > [[[ if (hass.themes.darkMode){ return "0px 2px 4px 0px rgba(0,0,0,0.80)"; } else { return "var(--box-shadow)"; } ]]] - "--mdc-ripple-press-opacity": 0.12 # allow click animation item3: card: type: "custom:button-card" template: "chip_mdi_icon_only" variables: ulm_chip_mdi_icon_only_icon: "mdi:cog-outline" tap_action: action: "navigate" navigation_path: "/config/dashboard" styles: card: - align-self: "end" - box-shadow: > [[[ if (hass.themes.darkMode){ return "0px 2px 4px 0px rgba(0,0,0,0.80)"; } else { return "var(--box-shadow)"; } ]]] - "--mdc-ripple-press-opacity": 0.12 # allow click animation