Bonjour,
je souhiateraie aligné les 3 bouton wifi savez-vous comment faire?
voici le code
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: true
margin: false
border_radius: true
background: false
outer_padding: false
cards:
- type: picture
image: /local/Images/bouygues.jpg
card_mod:
style: |
ha-card {
border-radius: 0px;
border: none;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -15px;
background-color: none;
border: none;
}
cards:
- type: custom:mushroom-template-card
primary: IP int/ext
secondary: " "
icon: mdi:ip-network
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
width: 140px;
border: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:ip
entity: sensor.bbox_ip_address
content: "{{ states ('sensor.bbox_ip_address') }}"
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 19px;
--chip-font-size: 14px;
--color: #44739e;
border: none;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%;margin-left: -100px;}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -20px;
background-color: none;
border: none;
}
cards:
- type: custom:mushroom-template-card
primary: Statut
secondary: " "
icon: mdi:clock-start
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:wan
entity: binary_sensor.bbox_etat_du_reseau_etendu_wan
content: "{{ states ('binary_sensor.bbox_etat_du_reseau_etendu_wan') }}"
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if states("binary_sensor.bbox_etat_du_reseau_etendu_wan") %}
--color: green;
{% else %}
--color: red;
{% endif %}
border: none;
}
- type: template
icon: mdi:clock-start
entity: binary_sensor.bbox_etat_du_reseau_etendu_wan
content: >-
{% set uptime = (now()| as_timestamp -
states('binary_sensor.bbox_etat_du_reseau_etendu_wan') |
as_timestamp ) %} {% set jours = (uptime / 86400) | int(0) %}
{%- if jours > 0 -%} {{ jours }}d {{ (uptime - (jours *
86400)) | int(0) | timestamp_custom('%Hh %Mm', false) }} {%-
else -%} {{ uptime | int(0) | timestamp_custom('%Hh %Mm',
false) }} {%- endif -%}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
--color: #44739e;
border: none;
}
alignment: end
card_mod:
style: |
ha-card {
top: 60%;
right: 5%;
}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -20px;
background-color: none;
border: none;
}
cards:
- type: custom:mushroom-template-card
primary: Clients connectés
secondary: " "
icon: mdi:lan-connect
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
border: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: fas:network-wired
entity: binary_sensor.wan_status
content: "{{ state_attr(\"binary_sensor.wan_status\",\"wired clients\") }}"
tap_action:
action: more-info
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 19px;
--chip-font-size: 14px;
--color: #44739e;
}
- type: template
icon: mdi:access-point-network
entity: binary_sensor.wan_status
content: >-
{{ state_attr('binary_sensor.wan_status','wireless clients')
}}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
margin-left: 2px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
--color: #44739e;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -28px;
background-color: none;
border: none;
height: 130px;
}
cards:
- type: custom:mushroom-template-card
primary: WPS
secondary: " "
icon: mdi:dns
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.bbox_wifi_5ghz
icon: |
{% if is_state('switch.bbox_wifi_5ghz', 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
content: 5 ghz
tap_action:
action: toggle
card_mod:
style: |
ha-card {
margin-right: 55px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('switch.bbox_wifi_5ghz','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
entity: switch.bbox_wifi_2_4ghz
icon: |
{% if is_state('switch.bbox_wifi_2_4ghz', 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
content: 2,4 ghz
tap_action:
action: toggle
card_mod:
style: |
ha-card {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('switch.bbox_wifi_2_4ghz','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
- type: template
entity: switch.bbox_wifi_guest
icon: |
{% if is_state('switch.bbox_wifi_guest', 'on') %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
content: wifi invité
tap_action:
action: toggle
card_mod:
style: |
ha-card {
margin-right: 35px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
{% if is_state('switch.bbox_wifi_guest','on') %}
--color: green;
{% else %}
--color: red;
{% endif %}
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%}
- type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
ha-card {
margin-top: -25px;
background-color: none;
border: none;
}
cards:
- type: custom:mushroom-template-card
primary: Options
secondary: " "
icon: mdi:tools
icon_color: "#44739E"
fill_container: true
layout: horizontal
tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset;
--shape-color: rgba(32,32,32,0.2) !important;
}
.: |
ha-card {
background: none;
width: 130px;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.ring_your_phone
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
name: Faire sonner
content_info: name
icon_color: "#44739E"
card_mod:
style: |
ha-card {
margin-left: 2px;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5) !important;
border: 1px rgba(0,0,0,1.0) outset !important;
--chip-height: 30px;
--chip-icon-size: 20px;
--chip-font-size: 14px;
}
alignment: end
card_mod:
style: |
ha-card {top:60%;right:5%;margin-left: -100px;}
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 6px 10px 0 10px;
border: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: button.livebox_restart
color_type: icon
name: Livebox v6<br/>Reboot
show_entity_picture: true
entity_picture: /local/Images/bbox_ultym.jpg
color: "#44739e"
aspect_ratio: 5/1
layout: icon_name
styles:
card:
- border-radius: 40px
- top: "-25px"
- width: 190px
- height: 50px
- left: 105px
- border: 2px rgba(211,211,211,1.0) outset
- box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
icon:
- opacity: 1
name:
- font-size: 0.85em
- white-space: normal
state:
- font-size: 0.75em
- white-space: normal
label:
- font-size: 0.65em
- white-space: normal
hold_action:
action: more-info
- type: horizontal-stack
cards:
- type: custom:bar-card
entities:
- entity: sensor.bbox_download_speed
name: Download
styles:
card:
- top: 100px
icon: fas:download
color: "#336600"
entity_row: true
min: 1
max: 1000
positions:
icon: inside
minmax: "off"
animation:
state: "on"
speed: "1"
height: 27px
decimal: 0
card_mod:
style: |
ha-card {
font-size: 14px;
margin: 14px -3px 0px -5px;
--mdc-icon-size: 20px;
border: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:bar-card
entities:
- entity: sensor.bbox_upload_speed
direction: right
name: Upload
icon: fas:upload
color: rgb(250, 0, 1)
entity_row: true
min: 1
max: 800
positions:
icon: inside
minmax: "off"
animation:
state: "on"
speed: "1"
height: 27px
decimal: 0
card_mod:
style: |
ha-card {
font-size: 14px;
margin: 14px -3px 0px -11px;
--mdc-icon-size: 20px;
border: none;
}
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 15px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
- type: custom:mini-graph-card
decimals: 0
hour24: true
height: 91
hours_to_show: 24
line_width: 2
entities:
- entity: sensor
name: Ping
show:
fill: true
graph: line
icon: true
name: true
state: true
labels: false
extrema: false
average: false
icon_adaptive_color: true
align_icon: right
align_state: left
font_size: 70
animate: false
color_thresholds:
- value: 10
color: "#336600"
- value: 15
color: "#f39c12"
- value: 20
color: "#d35400"
- value: 30
color: "#c0392b"
card_mod:
style: |
ha-card .header.flex .name.flex {
color: #44739e;
font-size: 14px;
}
.header.flex .icon {
color: #44739e;
}
.fill {
fill: white;
opacity: 1 !important;
}
ha-card {
margin-top: -18px !important;
box-shadow: none;
}
ha-card .states.flex::after {
content: "Opérateur: {{states('sensor.speedtest_isp')}} Fibre 2Gb/s \A Serveur: {{states('sensor.speedtest_location')}} - {{states('sensor.speedtest_server_name')}}";
white-space: pre;
padding: 2px 10px 0px 10px;
margin-top: -10px;
margin-right: -4px;
border-radius: 25px;
font-size: 14px;
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
}
card_mod:
style: |
ha-card {
border: 1px rgba(0,0,0,1.0) outset;
box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.5);
}