The better-moment-card from ibz0q

ibz0q / better-moment-card Goto Github PK

View Code? Open in Web Editor NEW

Lovelace digital clock/time card that's fully customizable for Home Assistant

License: GNU General Public License v3.0

JavaScript 100.00%

better-moment-card's People

Contributors

Stargazers

better-moment-card's Issues

Can't replicate clockwork card look/feel

I can't replicate the look of the clockwork card that stopped functioning and gives the incorrect time, which led me to your card. I'm sure it's just my own lack of experience with styling code. Can you assist by recommending changes?

In the screenshot below, you can see the overall card size, padding between side locations, and font size for city name is different than clockwork, which is the look I prefer:

  - type: custom:better-moment-card
    parentStyle: |
      line-height:normal;
      padding-bottom:0en;
      display: grid; 
      grid-template-columns: 1fr 1fr 1fr; 
      grid-template-rows: 0fr 0fr; 
      gap: 0px; 
      grid-template-areas: 
        'time time LA'
        'date date Miami'; 
    moment:
      - format: h:mm a
        style: >
          font-size:4em; text-align:left; font-weight:400; grid-area: time;
        timezone: America/Chicago
      - format: dddd, MMMM DD
        style: >
          font-size:1.6em; line-height:1em; text-align:left; grid-area: date; 
      - format: ddd h:mm a
        timezone: America/Los_Angeles
        style: |
          text-align:left; line-height:1.5em; grid: LA;
        template: |
          <strong>Los Angeles</strong>
          <div style="font-size:0.9em;">{{moment}}</div>
      - format: ddd h:mm a
        timezone: America/Puerto_Rico
        style: |
          text-align:left; line-height:1.5em; grid: Miami
        template: |
          <strong>Miami</strong>
          <div style="font-size:0.9em;">{{moment}}</div>

Recommend Projects