My latest Lovelace Screens [Updated]

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 :wink:

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)

yes thanks, I found it before you beat me :wink: 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'}}

1 Like

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:

07

and

28

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

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:

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.

  - 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

Do i need to install anything from that github page?

I am confused haha

1 Like

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

2 Likes

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

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

i got the animations to work
but the writing is still dark…
love%20lace%20weather%20ani

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.

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%;
  }

Lovelace config for card?

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`

@tempaone please remove line under style this is what is causing the visibility issues for you

background-image: url("/local/lovelace/cardbackK.png")

still didnt work
Capture

Did you clear your browser cache?

Are you using any themes?

yeah loaded in incognito mode too…
theme copied your yaml…

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

Packages/Theme Control

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

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

Themes

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

frontend:
themes:
midnight:

Main colors

  primary-color: '#5294E2'                                                        # Header
  accent-color: '#E45E65'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about

Text colors

  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value   

Background colors

  primary-background-color: '#383C45'                                             # Settings background
  secondary-background-color: '#383C45'                                           # Main card UI background  
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider 

Table rows

  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative

Nav Menu

  paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
  paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'                                   
  paper-grey-200: '#414A59'                                                       # Navigation menu selection

Paper card

  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: '#434954'                                          # Card background colour
  paper-dialog-background-color: '#434954'                                        # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#ffc107'                                         # Icon color active
  paper-item-icon_-_color: 'green'           
  paper-item-selected_-_background-color: '#434954'                               # Popup item select                      
  paper-tabs-selection-bar-color: 'green'

Labels

  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

Switches

  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'  

Sliders

  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

Google colors

  google-red-500: '#E45E65'
  google-green-500: '#39E949'

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

Automations

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

automation:

  • alias: ‘Set Theme to Midnight’
    trigger:
    • platform: homeassistant
      event: start
      action:
    • service: frontend.set_theme
      data:
      name: midnight