Hi guys,
I have an question about one custom made card, which i want full transparent on the borders, as example an encircle:
:
This is my card config:
type: picture-elements
image: /local/images/ds918plustestdark.png
style: |
ha-card {
--drive-1-color:
{% if states("sensor.nas_drive_1_temperature") | float > 90 %}
Red
{% else %}
#d3fa37
{% endif %};
--drive-2-color:
{% if states("sensor.nas_drive_2_temperature") | float > 90 %}
Red
{% else %}
#d3fa37
{% endif %};
--drive-3-color:
{% if states("sensor.nas_drive_3_temperature") | float > 90 %}
Red
{% else %}
#d3fa37
{% endif %};
--drive-4-color:
{% if states("sensor.nas_drive_4_temperature") | float > 90 %}
Red
{% else %}
#d3fa37
{% endif %};
--drive-1-status:
{% if states("sensor.nas_drive_1_status") != "normal" %}
Red
{% else %}
#d3fa37
{% endif %};
--drive-2-status:
{% if states("sensor.nas_drive_2_status") != "normal" %}
Red
{% else %}
#d3fa37
{% endif %};
--drive-3-status:
{% if states("sensor.nas_drive_3_status") != "normal" %}
Red
{% else %}
#d3fa37
{% endif %};
--drive-4-status:
{% if states("sensor.nas_drive_4_status") != "normal" %}
Red
{% else %}
#d3fa37
{% endif %};
--update-status:
{% if states("binary_sensor.nas_update_available") == 'on' %}
#d3fa37
{% else %}
#44729e
{% endif %};
--security-status:
{% if states("binary_sensor.nas_security_status") == 'off' %}
#d3fa37
{% else %}
#ff0000
{% endif %};
--volume-status:
{% if states("sensor.nas_volume_1_status") == 'normal' %}
#d3fa37
{% else %}
#ff0000
{% endif %};
}
elements:
- type: state-icon
entity: binary_sensor.nas_update_available
style:
left: 93%
top: 55%
'--paper-item-icon-color': var(--update-status)
- type: state-icon
entity: sensor.nas_drive_1_status
style:
left: 89.5%
top: 30%
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
'--paper-item-icon-color': var(--drive-1-status)
- type: state-icon
entity: sensor.nas_drive_2_status
style:
left: 89.5%
top: 36%
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
'--paper-item-icon-color': var(--drive-2-status)
- type: state-icon
entity: sensor.nas_drive_3_status
style:
left: 89.5%
top: 42%
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
'--paper-item-icon-color': var(--drive-3-status)
- type: state-icon
entity: sensor.nas_drive_4_status
style:
left: 89.5%
top: 48%
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
'--paper-item-icon-color': var(--drive-4-status)
- type: state-label
entity: sensor.nas_drive_1_temperature
style:
left: 96%
top: 30%
font-size: 70%
color: var(--drive-1-color)
- type: state-label
entity: sensor.nas_drive_2_temperature
style:
left: 96%
top: 36%
font-size: 70%
color: var(--drive-2-color)
- type: state-label
entity: sensor.nas_drive_3_temperature
style:
left: 96%
top: 42%
font-size: 70%
color: var(--drive-3-color)
- type: state-label
entity: sensor.nas_drive_4_temperature
style:
left: 96%
top: 48%
font-size: 70%
color: var(--drive-4-color)
- type: state-icon
entity: binary_sensor.nas_security_status
style:
left: 16%
top: 11%
'--paper-item-icon-color': var(--security-status)
- type: state-label
entity: binary_sensor.nas_security_status
prefix: ''
style:
left: 16%
top: 18%
font-size: 80%
- type: state-icon
entity: sensor.nas_volume_1_status
style:
left: 34%
top: 11%
'--paper-item-icon-color': var(--volume-status)
- type: state-label
entity: sensor.nas_volume_1_status
prefix: ''
style:
left: 34%
top: 18%
font-size: 80%
- type: state-icon
entity: sensor.nas_volume_1_used_space
style:
left: 52%
top: 11%
- type: state-label
entity: sensor.nas_volume_1_used_space
prefix: ''
style:
left: 52%
top: 18%
font-size: 80%
- type: state-icon
entity: sensor.nas_volume_1_total_size
style:
left: 70%
top: 11%
- type: state-label
entity: sensor.nas_volume_1_total_size
prefix: ''
style:
left: 70%
top: 18%
font-size: 80%
- type: 'custom:mini-graph-card'
entities:
- entity: sensor.nas_cpu_load_5_min
name: CPU
align_icon: left
show:
fill: false
icon: false
state: true
name: true
align_state: center
font_size: 60
animate: true
hours_to_show: 6
points_per_hour: 12
refresh_interval: 30
style: |-
:host {
left: 44%;
top: 40%;
}
ha-card {
background: transparent;
box-shadow: none;
}
- type: 'custom:bar-card'
entities:
- entity: sensor.nas_volume_1_volume_used
name: Disk Usage
positions:
icon: inside
name: inside
indicator: 'off'
icon: 'mdi:harddisk'
animation:
state: 'on'
severity:
- from: 0
to: 50
color: '#40bf40'
- from: 51
to: 80
color: '#ff7b00'
- from: 81
to: 100
color: '#bf4040'
- entity: sensor.nas_memory_usage_real
name: Memory
positions:
icon: inside
name: inside
indicator: 'off'
icon: 'mdi:memory'
animation:
state: 'on'
severity:
- from: 0
to: 50
color: '#40bf40'
- from: 51
to: 80
color: '#ff7b00'
- from: 81
to: 100
color: '#bf4040'
- entity: sensor.nas_network_up
name: Network Up
positions:
icon: inside
name: inside
indicator: 'off'
icon: 'mdi:upload-network'
max: 125000
animation:
state: 'on'
severity:
- from: 0
to: 60000
color: '#40bf40'
- from: 60001
to: 100000
color: '#ff7b00'
- from: 100001
to: 125000
color: '#bf4040'
- entity: sensor.nas_network_down
name: Network Down
positions:
icon: inside
name: inside
indicator: 'off'
icon: 'mdi:download-network'
max: 125000
animation:
state: 'on'
severity:
- from: 0
to: 60000
color: '#40bf40'
- from: 60001
to: 100000
color: '#ff7b00'
- from: 100001
to: 125000
color: '#bf4040'
height: 25px
width: 300px
style: |-
:host {
left: 44%;
top: 75%;
}
bar-card-value {
color: white;
text-shadow: 1px 1px #0005;
}
bar-card-name {
color: white;
text-shadow: 1px 1px #0005;
}
ha-icon {
color: white;
}
ha-card {
padding: 0px;
background: transparent;
box-shadow: none;
}
bar-card-current, bar-card-backgroundbar, bar-card-currentbar {
border-radius: 5px;
}
How i can realize that the borders in the card are fully transparent (opacity 100%). As example, my image is already good. Imgur: The magic of the Internet
1 post - 1 participant