GithubHelp home page GithubHelp logo

Comments (5)

kongo09 avatar kongo09 commented on May 31, 2024

Trying this out with card_mod gives an even simpler and cleaner result. Looking forward to this.
image

from home-assistant-sun-card.

sylviepipi avatar sylviepipi commented on May 31, 2024

Hide all text and add a clock. Then my panels looks to same as my iwatch

from home-assistant-sun-card.

MartinHenriksson avatar MartinHenriksson commented on May 31, 2024

How was this acheived with card_mod? I can't seem to get it to apply.

from home-assistant-sun-card.

kongo09 avatar kongo09 commented on May 31, 2024

Try this:

type: custom:sun-card
language: de
card_mod:
  style: |
    div.sun-card {
      padding: 1.3em 0;
    }
    div.sun-card-header {
      padding: 0 2em;
    }
    .sun-card-text-subtitle {
      font-size: inherit !important;
      font-weight: 300 !important;
    }
    .sun-card-text-time {
      font-weight: bold !important;
    }
    div.sun-card-text-container {
      align-items: inherit;
    }
    div.sun-card-text-container:nth-child(1) {
      text-align: left;
    }
    div.sun-card-text-container:nth-child(2) {
      text-align: right;
    }
    div.sun-card-footer {
      display: none;
    }

from home-assistant-sun-card.

MartinHenriksson avatar MartinHenriksson commented on May 31, 2024

Thanks for the reply kongo, I did also reach out in the discord for Home Assistant and there was someone whom assisted me there to come to this result:

card_mod:
  style: |
    .sun-card-header span {
     font-size: var(--mdc-typography-body1-font-size) !important;
     padding-bottom: 0px !important;
    }
    .sun-card-text-subtitle {
      color: var(--secondary-text-color) !important;
    }
    .sun-card-footer span {
      font-size: var(--mdc-typography-body1-font-size) !important;
    }
    .sun-card-footer-row {
      padding-top: 0px !important
    }

Again, thanks for taking the time!

from home-assistant-sun-card.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.