Giter Site home page Giter Site logo

lovelace-card-modder's Introduction

card-modder

Allows you to style a home-assistant lovelace card

This card requires card-tools to be installed.

For installation instructions see this guide.

Options

Name Type Default Description
type string Required custom:card-modder
card object Required The card you wish to style
style list none List of css styles to apply to card
extra_styles string none Extra style data to add to card environment
report_size number none Size to report

Styling

card-modder can be used to apply CSS styling to any lovelace card.

Styles are automatically applied recursively to all cards within stacks.

Any CSS style can be used, and will be applied to the base element of the card (<ha-card>). Most cards use css variables for styling, and to find out which ones, I recommend either the official "partial list of variables used" or that you open the card in your browsers object inspector and check out the styling options manually.

- type: custom:card-modder
  style:
    --paper-card-background-color: rgba(0, 100, 0, 0.2)
    --paper-item-icon-color: white
    border-radius: 5px
    color: rgb(0, 0, 100)
  card:
    type: glance
    title: Styled card
    entities:
      - light.bed_light
      - light.ceiling_lights
      - light.kitchen_lights
- type: glance
  title: Unstyled card
  entities:
    - light.bed_light
    - light.ceiling_lights
    - light.kitchen_lights

Note about rounded corners: Some cards which have a background image needs the style overflow: hidden added for rounded corners to work. card-modder-styling

Templates

A simple form of templates can be used in the styles. Templates are on the form [[ domain.entity.state ]] or [[ domain.entity.attributes.attribute_name ]].

- type: custom:card-modder
  style:
    background-image: "url(http://www.place[[ input_select.background.state ]].com/600/250)"
  card:
    type: entities
    entities:
      - input_select.background
      - type: custom:card-modder
        card:
          type: custom:hui-toggle-entity-row
          entity: light.bed_light
        style: {color: blue}
      - light.bed_light
      - light.bed_light

skarminspelning 2018-12-13 kl 00 05 45 mov

Note that this doesn't work reliably with stacks at this point.

Extra styles

Card-modder adds styles to the ha-card element of a lovelace card (if found). The extra_styles parameter can be used to inject code directly into a style tag being a sibling of the ha-card.

This allows e.g. for blinking backgrounds:

type: custom:card-modder
style:
  animation: [[ sensor.button_animation.state ]] 2s linear infinite
extra_styles: >
  @keyframes blink {
    50% {
      background: red;
    }
  }
card:
  type: entity-button
  entity: light.bed_light

extra_styles

Here sensor.button_animation is a template sensor which is setup such that when the button should be blinking it has the value blink, and no value otherwise. E.g:

sensor:
  - platform: template
    sensors:
      button_animation:
        value_template: "{% if is_state('light.bed_light', 'off') %}blink{% endif %}"

hd8glbnumi

Example by Isabella Gross Alström.

Forcing size

By default lovelace orders cards on the screen in columns. To predict where a card will pop up there are a few rules:

  • Each card has a vertical size. The size is specified in units of roughly 50 pixels.
  • Cards are placed in the order they are specified in ui-lovelace.yaml
  • Cards will be placed in the first available column (from the left) which is less than 5 units tall.
  • If no column has less than 5 units, the card will be placed in the shortest column.

The size of each card varies a bit, generally:

  • One row in an entities card is 1 unit tall.
  • A card title is one unit tall.
  • One row of glance icons is two units tall.
  • A picture-card is 3 units tall.

You can find the size of each card from the source code here. Look for the getCardSize() function in the card you want.

The point

Any way... card-modder can be used to set what height a card should report:

- type: custom:card-modder
  report_size: 7
  card:
    type: glance
    title: 'report_size: 7'
    entities:
      - light.bed_light
      - light.ceiling_lights
      - light.kitchen_lights
- type: glance
  title: Card 2
  entities:
    ...
- type: glance
  title: Card 3
  entities:
    ...
- type: glance
  title: Card 4
  entities:
    ...
- type: glance
  title: Card 5
  entities:
    ...

card-modder-sizing


Buy Me A Coffee

lovelace-card-modder's People

Contributors

thomasloven avatar davidjb avatar iantrich avatar

Watchers

James Cloos avatar  avatar

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.