My latest Lovelace Screens [Updated]

[Pre10der (Ian)]

@teachingbirds - I think you meant this one yes? It was one I found and modified to suit. Here you go:

[teachingbirds (Isabella Gross Alström)]

Thank you!

[david1 (David)]

@jimpower how do you measure your humidity levels?

[jimpower]

@david1 most Temperature sensors on the market also have Humidity sensors on them. I use the Xiaomi Temperature/Humidity Sensors.

[Mariusthvdb (Marius)]

@Sunonline

style: background-image: url(“/local/lovelace/cardbackK.png”)

where do you set that?
I tried it in my card settings, but nothing happening…

  - type: 'custom:weather-card'
    entity_weather: weather.woensdrecht
    entity_sun: sun.sun
    entity_apparent_temperature: sensor.jagti_windchill
    style:
      background-image: url("/local/lovelace/images/weather-background.png")

—edit---- nevermind, found the custom-card card-modder…

  - type: custom:card-modder
    card:
      type: custom:weather-card
      entity_weather: weather.woensdrecht
      entity_sun: sun.sun
      entity_apparent_temperature: sensor.jagti_windchill
    style:
      background-image: url("/local/lovelace/images/weather-background.png")
      background-size: 100% 400px

now how to change this background when theme changes to night-view…
there’s aways a challenge

[jimpower]

this is part of the card modder custom card.

          - type: custom:card-modder
            card:
              type: custom:dark-sky-weather-card
              entity_sun: sun.sun
              entity_daily_summary: sensor.bom_gc_forecast_detailed_summary_0
              entity_current_conditions: sensor.dark_sky_icon
              entity_humidity: sensor.bom_humd
              entity_pressure: sensor.bom_pres
              entity_temperature: sensor.bom_temp
              entity_visibility: sensor.dark_sky_visibility
              entity_wind_bearing: sensor.bom_wind_bear
              entity_wind_speed: sensor.bom_wind_sp
              entity_forecast_high_temp_1: sensor.bom_gc_forecast_max_temp_c_1
              entity_forecast_high_temp_2: sensor.bom_gc_forecast_max_temp_c_2
              entity_forecast_high_temp_3: sensor.bom_gc_forecast_max_temp_c_3
              entity_forecast_high_temp_4: sensor.bom_gc_forecast_max_temp_c_4
              entity_forecast_high_temp_5: sensor.bom_gc_forecast_max_temp_c_5
              entity_forecast_low_temp_1: sensor.bom_gc_forecast_min_temp_c_1
              entity_forecast_low_temp_2: sensor.bom_gc_forecast_min_temp_c_2
              entity_forecast_low_temp_3: sensor.bom_gc_forecast_min_temp_c_3
              entity_forecast_low_temp_4: sensor.bom_gc_forecast_min_temp_c_4
              entity_forecast_low_temp_5: sensor.bom_gc_forecast_min_temp_c_5
              entity_forecast_icon_1: sensor.dark_sky_icon_1
              entity_forecast_icon_2: sensor.dark_sky_icon_2
              entity_forecast_icon_3: sensor.dark_sky_icon_3
              entity_forecast_icon_4: sensor.dark_sky_icon_4
              entity_forecast_icon_5: sensor.dark_sky_icon_5
            style:                 
              background-image: url("/local/lovelace/cardbackK.png")
              background-repeat: no-repeat
              background-color: rgba(50,50,50,0.3)
              background-size: 100% 400px
              border-radius: 20px
              border: solid 1px rgba(100,100,100,0.3)
              color: "#999999"
              box-shadow: 3px 3px rgba(0,0,0,0.4)

[Mariusthvdb (Marius)]

yes thanks, I found it before you beat me so cool
trying to fit this in somehow:

style:
 background_image_template: >
  {% set path = 'url("/local/lovelace/images/weather-background-' %}
  {%set image = 'day' if is_state('sun.sun','above_horizon') else 'night' %}
  {% set ext = '.png")'%}
  {{path+image+ext}}

{{ 'day.png' if is_state('sun.sun','above_horizon') else 'night.png'}}

[Mariusthvdb (Marius)]

HI again…
sorry,

but what is the element for the variations icons, (need to change that since it now is white in my setup and it issn visible

and what would be the name of the header element to change color?

see:

and

using this now:

style:
  background-image: url("/local/lovelace/images/weather-background-day.png")
  background-size: 100% 400px
  --primary-text-color: blue
  --secondary-text-color: red

need variation icon color here
need header icon here

[PlusMinus22 (Rok Sipec)]

Hello

How could i manage to get 3 rows 2 columns.
This is my lovelace code.

Thanks

title: Smart Home

Include external resources

resources:

• url: /local/my-custom-card.js
  type: js
• url: /local/my-webfont.css
  type: css

Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.

background: center / cover no-repeat url("/background.png") fixed

Exclude entities from “Unused entities” view

excluded_entities:
views:
################################################################################

• id: 0 # Automatically created id
  title: Main view
  icon: mdi:home-assistant
  cards:
  ################################################################################

################################################################################
################################################################################
- id: 91cbb3b5f0234cd5ab80e112cbbde487 # Automatically created id
type: entity-filter
card:
title: Lights curently on
type: glance
tap_action: toggle
entities:
- entity: light.entrance
tap_action: toggle
- entity: switch.outside
tap_action: toggle
- entity: light.dining
tap_action: toggle
- entity: light.kitchen
tap_action: toggle
- entity: light.living_room
tap_action: toggle
- entity: switch.christmas_tree
tap_action: toggle
- entity: light.ambilight
tap_action: toggle
- entity: light.hallway
tap_action: toggle
- entity: light.bedroom
tap_action: toggle
- entity: light.bathroom
tap_action: toggle
- entity: switch.led_2
tap_action: toggle
state_filter:
- on
################################################################################
- type: glance
id: e0f816eb2dec4419b614f78872670dff # Automatically created id
title: Entrance
card:
entities:
- entity: light.entrance
name: Light
tap_action: toggle
- entity: switch.outside
name: Outside
tap_action: toggle
- entity: binary_sensor.door_window_sensor_158d0001fa3578
name: Door
- entity: binary_sensor.smoke_sensor_158d000231d3e3
name: Fire
- entity: sensor.temperature_158d000172029e
name: Outside
- id: a0fdf3954323407198b4472545 # Automatically created id
type: glance
title: Kitchen
card:
entities:
- entity: light.kitchen
name: Light
tap_action: toggle
- entity: switch.led_2
name: Led
tap_action: toggle
- entity: light.dining
name: Table
tap_action: toggle
- entity: sensor.temperature_158d000170d4fb
name: Temperature
- entity: binary_sensor.motion_sensor_158d0002047c81
name: Motion
################################################################################
- type: glance
id: 2bd9ba97095043bd87e0cc93d5a73438 # Automatically created id
title: Living room
card:
entities:
- entity: light.living_room
name: Light
tap_action: toggle
- entity: light.ambilight
name: Ambilight
tap_action: toggle
- entity: switch.christmas_tree
name: Chrismass Tree
tap_action: toggle
- entity: media_player.tv
name: Tv
tap_action: toggle
- entity: switch.pc_switch
name: Pc
tap_action: toggle
- entity: binary_sensor.door_window_sensor_158d00020460ae
name: Window
columns: ‘6’
- id: 09fac714e0ff480bb1e84c1c1242c3f5 # Automatically created id
type: glance
title: Bedroom
card:
entities:
- entity: light.bedroom
name: Light
tap_action: toggle
- entity: light.hallway
name: Hallway
tap_action: toggle
- entity: sensor.temperature_158d000201c82e
name: Temperature
- entity: binary_sensor.door_window_sensor_158d0002045f34
name: Window
- entity: binary_sensor.motion_sensor_158d0001235c25
name: Motion
################################################################################
- id: 42b89f7212264bf186de28f228e46aef # Automatically created id
type: glance
title: Bathroom
card:
entities:
- entity: light.bathroom
name: Light
tap_action: toggle
- entity: switch.fan_2
name: Fan
tap_action: toggle
- entity: sensor.temperature_158d0001f4156a
name: Temperature
- entity: binary_sensor.door_window_sensor_158d000205b334
name: Window
- entity: binary_sensor.motion_sensor_158d00023d8a91
name: Motion
################################################################################
################################################################################

################################################################################
################################################################################

• id: 1 # Automatically created id
  title: Alarm
  icon: mdi:security-home
  cards:

  • id: 23636b93180341cba4ef6cdc991cf566 # Automatically created id
    type: alarm-panel
    title: My Alarm
    entity: alarm_control_panel.alarm
    states:
    • arm_away
      ################################################################################
      ################################################################################

• id: 2 # Automatically created id
  title: Lights
  icon: mdi:mdi:ceiling-light
  cards:

  • id: 13c4d4b2d27b47fb917c673ecb13e9ff # Automatically created id
    type: glance
    title: All lights
    entities:
    • light.entrance
    • light.dining
    • light.kitchen
    • switch.led_2
    • light.living_room
    • light.ambilight
    • light.bedroom
    • light.hallway
    • light.bathroom

################################################################################
################################################################################

• id: 3 # Automatically created id
  title: Climate control
  icon: mdi:air-conditioner
  cards:
  • type: entities
    id: c5b1e86e575b47e8bd7141947076931c # Automatically created id
    title: Panasonic
    entities:
    • entity: input_boolean.panasonic_switch
    • entity: input_number.ac_temp
    • entity: input_select.ac_speed
    • entity: input_select.ac_swing
    • entity: sensor.temperature_158d000170d4fb
      show_header_toggle: false
• id: 4 # Automatically created id
  title: System
  icon: mdi:information-outline
  cards:
  • id: 2b76f8c043e14d0c95272e4a81472d9d # Automatically created id
    type: gauge
    title: Cpu temperature
    entity: sensor.command_sensor
    unit_of_measurement: C
  • id: 5304e95f57eb4191be6278536b5d2a72 # Automatically created id
    type: gauge
    title: Cpu load
    entity: sensor.processor_use
    unit_of_measurement:

[jimpower]

The Height of your cards isn’t large enough to force it natively within lovelace you will need to use a custom card like this one.

My Lovelace Plugins

layout-card The way lovelace places cards into views may seem a bit weird if you don’t fully understand the rules. But who wants to read the source to find out about card heights, and the limits of five and stuff? Shouldn’t things be simpler? Yes, they should. Let me present layout-card. Say you want to put the cards into the stacks one at a time: [layout-card%202%20-%20horizontal] Or fill each stack until you say stop and then move on to the next: [layout-card%204%20-%20manual%20breaks] …

[PlusMinus22 (Rok Sipec)]

  - id: 0  # Automatically created id
    title: Main view
    icon: mdi:home-assistant
    cards:
################################################################################




################################################################################
################################################################################
      - id: 91cbb3b5f0234cd5ab80e112cbbde487  # Automatically created id
        type: entity-filter
        card:
          title: Lights curently on
          type: glance
        tap_action: toggle
        entities:
          - entity: light.entrance
            tap_action: toggle
          - entity: switch.outside
            tap_action: toggle
          - entity: light.dining
            tap_action: toggle
          - entity: light.kitchen
            tap_action: toggle
          - entity: light.living_room
            tap_action: toggle
          - entity: switch.christmas_tree
            tap_action: toggle
          - entity: light.ambilight
            tap_action: toggle
          - entity: light.hallway
            tap_action: toggle
          - entity: light.bedroom
            tap_action: toggle
          - entity: light.bathroom
            tap_action: toggle
          - entity: switch.led_2
            tap_action: toggle
        state_filter:
          - on
################################################################################
      - type: glance
        id: e0f816eb2dec4419b614f78872670dff  # Automatically created id
        title: Entrance
        card:
        entities:
          - entity: light.entrance
            name: Light
            tap_action: toggle
          - entity: switch.outside
            name: Outside
            tap_action: toggle
          - entity: binary_sensor.door_window_sensor_158d0001fa3578
            name: Door
          - entity: binary_sensor.smoke_sensor_158d000231d3e3
            name: Fire
          - entity: sensor.temperature_158d000172029e
            name: Outside
      - id: a0fdf3954323407198b4472545  # Automatically created id
        type: glance
        title: Kitchen
        card:
        entities:
          - entity: light.kitchen
            name: Light
            tap_action: toggle
          - entity: switch.led_2
            name: Led
            tap_action: toggle
          - entity: light.dining
            name: Table
            tap_action: toggle
          - entity: sensor.temperature_158d000170d4fb
            name: Temperature
          - entity: binary_sensor.motion_sensor_158d0002047c81
            name: Motion
################################################################################
      - type: glance
        id: 2bd9ba97095043bd87e0cc93d5a73438  # Automatically created id
        title: Living room
        card:
        entities:
          - entity: light.living_room
            name: Light
            tap_action: toggle
          - entity: light.ambilight
            name: Ambilight
            tap_action: toggle
          - entity: switch.christmas_tree
            name: Chrismass Tree
            tap_action: toggle
          - entity: media_player.tv
            name: Tv
            tap_action: toggle
          - entity: switch.pc_switch
            name: Pc
            tap_action: toggle
          - entity: binary_sensor.door_window_sensor_158d00020460ae
            name: Window
        columns: '6'
      - id: 09fac714e0ff480bb1e84c1c1242c3f5  # Automatically created id
        type: glance
        title: Bedroom
        card:
        entities:
          - entity: light.bedroom
            name: Light
            tap_action: toggle
          - entity: light.hallway
            name: Hallway
            tap_action: toggle
          - entity: sensor.temperature_158d000201c82e
            name: Temperature
          - entity: binary_sensor.door_window_sensor_158d0002045f34
            name: Window
          - entity: binary_sensor.motion_sensor_158d0001235c25
            name: Motion
################################################################################
      - id: 42b89f7212264bf186de28f228e46aef  # Automatically created id
        type: glance
        title: Bathroom
        card:
        entities:
          - entity: light.bathroom
            name: Light
            tap_action: toggle
          - entity: switch.fan_2
            name: Fan
            tap_action: toggle
          - entity: sensor.temperature_158d0001f4156a
            name: Temperature
          - entity: binary_sensor.door_window_sensor_158d000205b334
            name: Window
          - entity: binary_sensor.motion_sensor_158d00023d8a91
            name: Motion

[PlusMinus22 (Rok Sipec)]

Do i need to install anything from that github page?

I am confused haha

[thomasloven (Thomas Lovén)]

You can also use card-modder to change the reported height of any card.

[leeb98 (Lee Berry)]

Hi i have done a very basic yaml to test card-modder out , but i get the following error

http://10.0.0.180:8123/local/custom_ui/card-modder.js:66:22 Uncaught TypeError: Cannot read property ‘getCardSize’ of undefined

this is my yaml

title: My Awesome Home
# Include external resources
resources:
  - url: /local/custom-lovelace/my-custom-card.jsv=1
    type: js
  - url: /local/my-webfont.css
    type: css
  - url: /local/custom_ui/weather-card.js?v=6
    type: js
  - url: /local/custom_ui/card-modder.js
    type: module
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
#background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
excluded_entities:
  - weblink.router
views:
    # View tab title.
  - title: Main
    # Optional unique id for direct access /lovelace/${id}
    id: example
    # Optional background (overwrites the global background).
    #background: radial-gradient(crimson, skyblue)
    # Each view can have a different theme applied. Theme should be defined in the frontend.
    theme: dark-mode
    # The cards to show on this view.
    cards:
        # The filter card will filter entities for their state
      
      - type: horizontal-stack
        cards:
          - type: custom:card-modder
            card:
              - type: entity-filter         
                entities:
                  - device_tracker.phonelee
                  - device_tracker.phonejayden
                # - device_tracker.JaydenIPAD
                  - device_tracker.phonecaroline
                  - device_tracker.phoneaimee
                  - device_tracker.phoneblake
                state_filter:
                  - 'home'
                show_state : false

any ideas ?

Thanks

LeeB

[tempaone]

I literally copied paste your config to test it.
and i get this as the weather in lovelace
any ideas why it looks weird ?

[tempaone]

i got the animations to work
but the writing is still dark…

[jimpower]

I use a theme in conjuction with mine can you post the code used for me. I suspect you need to use my theme_control.yaml also or remove the cardback entry. If you post your card code I will have a look.

[tempaone]

dark-sky-weather-card.js

       class DarkSkyWeatherCard extends HTMLElement {
          set hass(hass) {
            if (!this.content) {
              const card = document.createElement('ha-card');
              const link = document.createElement('link');
              link.type = 'text/css';
              link.rel = 'stylesheet';
              link.href = '/local/custom_ui/dark-sky-weather-card.css';
              card.appendChild(link);
              this.content = document.createElement('div');
              this.content.className = 'card';
              card.appendChild(this.content);
              this.appendChild(card);
            }

            const getUnit = function (measure) {
              const lengthUnit = hass.config.unit_system.length;
              switch (measure) {
                case 'air_pressure':
                  return lengthUnit === 'km' ? 'hPa' : 'inHg';
                case 'length':
                  return lengthUnit;
                case 'precipitation':
                  return lengthUnit === 'km' ? 'mm' : 'in';
                default:
                  return hass.config.unit_system[measure] || '';
              }
            };

            const transformDayNight = {
              "below_horizon": "night",
              "above_horizon": "day",
            }
            const sunLocation = transformDayNight[hass.states[this.config.entity_sun].state];
            const weatherIcons = {
              'clear-day': 'day',
              'clear-night': 'night',
              'rain': 'rainy-5',
              'snow': 'snowy-6',
              'sleet': 'rainy-6',
              'wind': 'cloudy',
              'fog': 'cloudy',
              'cloudy': 'cloudy',
              'partly-cloudy-day': 'cloudy-day-3',
              'partly-cloudy-night': 'cloudy-night-3',
              'hail': 'rainy-7',
              'lightning': 'thunder',
              'thunderstorm': 'thunder',
              'windy-variant': `cloudy-${sunLocation}-3`,
              'exceptional': '!!',
            }

            const windDirections = [
              'N',
              'NNE',
              'NE',
              'ENE',
              'E',
              'ESE',
              'SE',
              'SSE',
              'S',
              'SSW',
              'SW',
              'WSW',
              'W',
              'WNW',
              'NW',
              'NNW',
              'N'
            ];
            
            var forecastDate1 = new Date();
            forecastDate1.setDate(forecastDate1.getDate()+1);
            var forecastDate2 = new Date();
            forecastDate2.setDate(forecastDate2.getDate()+2);
            var forecastDate3 = new Date();
            forecastDate3.setDate(forecastDate3.getDate()+3);
            var forecastDate4 = new Date();
            forecastDate4.setDate(forecastDate4.getDate()+4);
            var forecastDate5 = new Date();
            forecastDate5.setDate(forecastDate5.getDate()+5);
            
            
            const currentConditions = hass.states[this.config.entity_current_conditions].state;
            const humidity = hass.states[this.config.entity_humidity].state;
            const pressure = Math.round(hass.states[this.config.entity_pressure].state);
            const temperature = Math.round(hass.states[this.config.entity_temperature].state);
            const visibility = hass.states[this.config.entity_visibility].state;
            const windBearing = windDirections[(Math.round((hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
            const windSpeed = Math.round(hass.states[this.config.entity_wind_speed].state);
            const forecast1 = { date: forecastDate1,
            				   condition: this.config.entity_forecast_icon_1,
            				   temphigh: this.config.entity_forecast_high_temp_1,
            				   templow:  this.config.entity_forecast_low_temp_1, };
            const forecast2 = { date: forecastDate2,
            				   condition: this.config.entity_forecast_icon_2,
            				   temphigh: this.config.entity_forecast_high_temp_2,
            				   templow:  this.config.entity_forecast_low_temp_2, };
            const forecast3 = { date: forecastDate3,
            				   condition: this.config.entity_forecast_icon_3,
            				   temphigh: this.config.entity_forecast_high_temp_3,
            				   templow:  this.config.entity_forecast_low_temp_3, };
            const forecast4 = { date: forecastDate4,
            				   condition: this.config.entity_forecast_icon_4,
            				   temphigh: this.config.entity_forecast_high_temp_4,
            				   templow:  this.config.entity_forecast_low_temp_4, };
            const forecast5 = { date: forecastDate5,
            				   condition: this.config.entity_forecast_icon_5,
            				   temphigh: this.config.entity_forecast_high_temp_5,
            				   templow:  this.config.entity_forecast_low_temp_5, };

            const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];


            this.content.innerHTML = `
              <span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
              <span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span>
              <span>
                <ul class="variations right">
                    <li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${humidity}<span class="unit"> %</span></li>
                    <li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${pressure}<span class="unit"> ${getUnit('air_pressure')}</span></li>
                </ul>
                <ul class="variations">
                    <li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>
                    <li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${visibility}<span class="unit"> ${getUnit('length')}</span></li>
                </ul>
              </span>
              <div class="forecast clear">
                  ${forecast.map(daily => `
                      <div class="day">
                          <span class="dayname">${(daily.date).toString().split(' ')[0]}</span>
                          <br><i class="icon" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
                          <br><span class="highTemp">${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}</span>
                          <br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>
                      </div>`).join('')}
              </div>
              <br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;
          }

          setConfig(config) {
            if (!config.entity_current_conditions || 
            		!config.entity_humidity ||
            		!config.entity_pressure ||
             		!config.entity_temperature ||
            		!config.entity_visibility ||
            		!config.entity_wind_bearing ||
            		!config.entity_wind_speed) {
              throw new Error('Please define entities');
            }
            this.config = config;
          }

          // @TODO: This requires more intelligent logic
          getCardSize() {
            return 3;
          }
        }

        customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);Preformatted text

dark-sky-weather-card.css

.clear {
    clear: both;
  }

  .card {
    margin: auto;
    padding-top: 2em;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right:1em;
    position: relative;
  }

  .ha-icon {
    height: 18px;
    margin-right: 5px;
    color: var(--paper-item-icon-color);
  }

  .temp {
    font-weight: 300;
    font-size: 4em;
    color: var(--primary-text-color);
    position: absolute;
    right: 1em;
  }

  .tempc {
    font-weight: 300;
    font-size: 1.5em;
    vertical-align: super;
    color: var(--primary-text-color);
    position: absolute;
    right: 1em;
    margin-top: -14px;
    margin-right: 7px;
  }

  .variations {
    display: inline-block;
    font-weight: 300;
    color: var(--primary-text-color);
    list-style: none;
    margin-left: -2em;
    margin-top: 4.5em;
  }

  .variations.right {
    position: absolute;
    right: 1em;
    margin-left: 0;
    margin-right: 1em;
  }

  .unit {
    font-size: .8em;
  }

  .forecast {
    width: 100%;
    margin: 0 auto;
    height: 10em;
  }

  .day {
    display: block;
    width: 20%;
    float: left;
    text-align: center;
    color: var(--primary-text-color);
    border-right: .1em solid #d9d9d9;
    line-height: 2;
    box-sizing: border-box;
  }

  .dayname {
    text-transform: uppercase;
  }

  .forecast .day:first-child {
    margin-left: 0;
  }

  .forecast .day:nth-last-child(1) {
    border-right: none;
    margin-right: 0;
  }

  .highTemp {
    font-weight: bold;
  }

  .lowTemp {
    color: var(--secondary-text-color);
  }

  .icon.bigger {
    width: 10em;
    height: 10em;
    margin-top: -4em;
    position: absolute;
    left: 0em;
  }

  .icon {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    text-indent: -9999px;
  }

  .weather {
    font-weight: 300;
    font-size: 1.5em;
    color: var(--primary-text-color);
    text-align: left;
    position: absolute;
    top: -0.5em;
    left: 6em;
    word-wrap: break-word;
    width: 30%;
  }

[jimpower]

Lovelace config for card?

[tempaone]

resources:
  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js
  - url: /local/custom_ui/gauge-card.js?v=1
    type: js
  - url: /local/custom_ui/alarm_control_panel-card.js?v=1
    type: js
  - url: /local/custom_ui/mini-media-player.js?v=0.8.7
    type: module
  - url: /local/custom_ui/tracker-card.js?v=0
    type: js
  - url: /local/custom_ui/surveillance-card.js?v=0
    type: module
  - url: /local/custom_ui/mini-graph-card/mini-graph-card.js?v=0.0.4
    type: module
  - url: /local/custom_ui/card-modder.js
    type: module
#  - url: /local/custom_ui/irrigation-zone-card?v=0
#    type: module
  - url: /local/slider-entity-row.js?v=2d9e00
    type: js  


#################################################################
    #                                                               #
    #                            Weather                            #
    #                                                               #
    ################################################################# 

          - id: 3f7cfc0b210d4e408f5737d92108a358  # Automatically created id
            type: vertical-stack
            cards:
              - type: custom:card-modder
                card:
                  type: custom:dark-sky-weather-card
                  entity_sun: sun.sun
                  entity_daily_summary: sensor.bom_gc_forecast_detailed_summary_0
                  entity_current_conditions: sensor.dark_sky_icon
                  entity_humidity: sensor.bom_humd
                  entity_pressure: sensor.bom_pres
                  entity_temperature: sensor.bom_temp
                  entity_visibility: sensor.dark_sky_visibility
                  entity_wind_bearing: sensor.bom_wind_bear
                  entity_wind_speed: sensor.bom_wind_sp
                  entity_forecast_high_temp_1: sensor.bom_gc_forecast_max_temp_c_1
                  entity_forecast_high_temp_2: sensor.bom_gc_forecast_max_temp_c_2
                  entity_forecast_high_temp_3: sensor.bom_gc_forecast_max_temp_c_3
                  entity_forecast_high_temp_4: sensor.bom_gc_forecast_max_temp_c_4
                  entity_forecast_high_temp_5: sensor.bom_gc_forecast_max_temp_c_5
                  entity_forecast_low_temp_1: sensor.bom_gc_forecast_min_temp_c_1
                  entity_forecast_low_temp_2: sensor.bom_gc_forecast_min_temp_c_2
                  entity_forecast_low_temp_3: sensor.bom_gc_forecast_min_temp_c_3
                  entity_forecast_low_temp_4: sensor.bom_gc_forecast_min_temp_c_4
                  entity_forecast_low_temp_5: sensor.bom_gc_forecast_min_temp_c_5
                  entity_forecast_icon_1: sensor.dark_sky_icon_1
                  entity_forecast_icon_2: sensor.dark_sky_icon_2
                  entity_forecast_icon_3: sensor.dark_sky_icon_3
                  entity_forecast_icon_4: sensor.dark_sky_icon_4
                  entity_forecast_icon_5: sensor.dark_sky_icon_5
                style:                 
                  background-image: url("/local/lovelace/cardbackK.png")
                  background-repeat: no-repeat
                  background-color: rgba(50,50,50,0.3)
                  background-size: 100% 400px
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  color: "#999999"
                  box-shadow: 3px 3px rgba(0,0,0,0.4)`Preformatted text`