Couldn`t you just add !important behind the property you want to adjust? Probaly the CSS is overwritten from shadow-root now.
2 Likes
Thatâs it - great, thank you!
Hi
Can You help me with an example where You want to modify many elements one after an other?
What I am doing is going inside many shadow-roots nested in each other step by step. How to go inside the first, add css, then continue inwards, again apply css, then go one more inside and so on?
Something like this:
style:
'#states div':
slider-entity-row:
$:
#wrapper {
css this element
}
ha-slider:
$:
.bar-container {
css this element
}
paper-progress:
$: |
#progressContainer {
css this element
}
What I managed to do is to go all the way and change something at one level. But I need to change something at every shadow root I step into.
style:
'#states div':
slider-entity-row:
$:
ha-slider:
$:
paper-progress:
$: |
#progressContainer {
height: 30px;
}
Any help/hints (examples!) are much appreciated. Thank You
.:
style:
'#states div':
slider-entity-row:
$:
#wrapper {
css this element
}
ha-slider:
$:
.: |
.bar-container {
css this element
}
paper-progress:
$: |
#progressContainer {
css this element
}
3 Likes
Hi,
i need some help with align the remote to the center, please see the picture below:
This is the code i use:
how can i achieve that? i tried to play with the style without success, this is popup card
code:
BedroomTVMibox:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.tv_bedroom
double_tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Bedroom TV
style:
background: var(--background-image)
color: AliceBlue
border-radius: 15px
--ha-card-border-radius: 15px
--ha-card-background: '#646464'
--padding-right: 10px
card:
type: "custom:generic-remote-control-card"
broadlink_host: 192.168.0.131
name: Mibox
remote_template: mibox
buttons:
power:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFhEWLRYtFhEWLRYRFi0WERUuFi0WAAFTIhEWERYtFi0WERYtFhEVLhYRFS4VLhYADQUAAAAA"
back:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFSQWERUbFiQWERURFhoWLhUkFhoWAAGPIhEWJBYRFRsWIxYRFhEWGhYtFiQWGhYADQUAAAAA"
bottom:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACIRFiQWERQdFCYWERYRFhwTJhQmFhEWAAGsIxEUJhQTFhsWJBYSExMUHRUlFiQWERYADQUAAAAA"
clickleft:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACERFiQWEhMdFCYWERYRFiQVMBMdFhsWAAGZIxMTJRQTFhsWQxYRFhEUJhQwFhsWGxYADQUAAAAA"
clickright:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACQRFSQWERYaFiQWERYQFi4VERYRFiQVAAGhIxEVJBYRFhoWJBYRFREWLRYRFhEWJBUADQUAAAAA"
home:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACYSFSQWERUbFiQWERURFiQWERUbFiMWAAGhIhEWJBYRFRsWJBURFhEWJBYQFhsVJBYADQUAAAAA"
ok:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACIRFiQUExQdFiQWERYTEy8UHRYRFi4WAAGZIRMUJhYRFhsWJRQSFBMWLhYbFBMUMBYADQUAAAAA"
top:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMTFCQWEhMdFSYUExYRFhsWHBMmFDAVAAGaIxEWJBQTFB0WJBYRFhITHRQdFiQWLhYADQUAAAAA"
volumedown:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFiUTExQdFiQWERYTEy8WLhYRFRwUAAGbIxEWJBYRFhsUJhQTFhEWLhYvExMUHRYADQUAAAAA"
volumeup:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFiQUExQdFiQWERYhFS4WJBYRFBMUAAGuIxEWJBUSFB0WJBYRFhEVLxQmFRIWERYADQUAAAAA"
style: |
ha-card {
--paper-item-icon-color: AliceBlue;
color: AliceBlue;
}
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: AliceBlue
state:
- color: AliceBlue
label:
- color: AliceBlue
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: '0px 0px 3px 2px var'
# - opacity: 0.3
label:
- color: 'AliceBlue'
icon:
- color: 'AliceBlue'
name:
- color: 'AliceBlue'
state:
- color: 'AliceBlue'
id: off-icon
deviceID:
- this
- dashboard
one last question, is there a way to blurr the background?
Thanks for the help!
1 Like
i managed to solve it, but now i need to move the header âMiboxâ also to center.
how can i do it ?
second thing how to blurr the background ?
code:
BedroomTVMibox:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.tv_bedroom
double_tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Bedroom TV
style:
background: var(--background-image)
color: AliceBlue
border-radius: 15px
--ha-card-border-radius: 15px
--ha-card-background: '#646464'
card:
type: "custom:generic-remote-control-card"
broadlink_host: 192.168.0.131
name: Mibox
remote_template: mibox
buttons:
power:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFhEWLRYtFhEWLRYRFi0WERUuFi0WAAFTIhEWERYtFi0WERYtFhEVLhYRFS4VLhYADQUAAAAA"
back:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFSQWERUbFiQWERURFhoWLhUkFhoWAAGPIhEWJBYRFRsWIxYRFhEWGhYtFiQWGhYADQUAAAAA"
bottom:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACIRFiQWERQdFCYWERYRFhwTJhQmFhEWAAGsIxEUJhQTFhsWJBYSExMUHRUlFiQWERYADQUAAAAA"
clickleft:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACERFiQWEhMdFCYWERYRFiQVMBMdFhsWAAGZIxMTJRQTFhsWQxYRFhEUJhQwFhsWGxYADQUAAAAA"
clickright:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACQRFSQWERYaFiQWERYQFi4VERYRFiQVAAGhIxEVJBYRFhoWJBYRFREWLRYRFhEWJBUADQUAAAAA"
home:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACYSFSQWERUbFiQWERURFiQWERUbFiMWAAGhIhEWJBYRFRsWJBURFhEWJBYQFhsVJBYADQUAAAAA"
ok:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACIRFiQUExQdFiQWERYTEy8UHRYRFi4WAAGZIRMUJhYRFhsWJRQSFBMWLhYbFBMUMBYADQUAAAAA"
top:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMTFCQWEhMdFSYUExYRFhsWHBMmFDAVAAGaIxEWJBQTFB0WJBYRFhITHRQdFiQWLhYADQUAAAAA"
volumedown:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFiUTExQdFiQWERYTEy8WLhYRFRwUAAGbIxEWJBYRFhsUJhQTFhEWLhYvExMUHRYADQUAAAAA"
volumeup:
call: broadlink.send
data:
host: 192.168.0.131
packet: "JgA0ACMRFiQUExQdFiQWERYhFS4WJBYRFBMUAAGuIxEWJBUSFB0WJBYRFhEVLxQmFRIWERYADQUAAAAA"
style: |
ha-card {
--paper-item-icon-color: AliceBlue;
color: AliceBlue;
left: 37px;
}
Thanks
1 Like
Is it possible to centre some text in a markdown card?
Iâve been hacking around but canât get it to work.
- type: markdown
content: >
Normal text
<div class="a">
Centered text
</div>
More normal text
style: >
div.a {
text-align: center;
font-size: 18px;
}
p {
font-size: 18px;
}
try
- type: markdown
content: >
Normal text
<div class="a">
<text style="text-align: center;">Centered text</text>
</div>
More normal text
- type: markdown
content: >
Normal text
<div class="a">
<text style="text-align: center;">Centered text</text>
</div>
More normal text
style: >
div.a {
text-align: center;
font-size: 18px;
}
p {
font-size: 18px;
}
try removing the div and replacing text with span
<span style="text-align: center;">Centered text</span>
- type: markdown
content: >
Normal text
<span style="text-align: center;">Centered text</span>
More normal text
style: >
p {
font-size: 18px;
}
<span><text style="justify-self: center;">Centered text</text></span>
As you can see, iâm guessing⊠One of these will work at some point 
So was IâŠ
I see thomas is replying though.
Bring on the big gunsâŠ
The markdown card removes all html attributes like style, class or id, so youâll have to find a tag that it allows but youâre not using otherwise:
content: |
<span> Centered text </span>
style: |
span {
display: block;
text-align: center;
}
Edit: Also; LOL
Wouldnât you just be able to put the style directly in the markdown without needing cardmod?
No. Style tags are not allowed either.
Perfect. Thanks!
Whelp that explains why it wasnât working.
1 Like
Hello!
I have used card-mod successfully with different cards, but I am not able to modify the text size in an input_number mode: box. Any suggestion?
Thanks in advance!
Hello. Tell me please I can change the style of the service-button?
I need to remove the opacity from mwc-button.
I have a piece of HTML:
<hui-service-button-element class="element" style="left: 40%; top: 20%;">
shadow-root
<ha-call-service-button>
shadow-root
<ha-progress-button id="progress" tabindex="0">
shadow-root
<div class="container" id="container">
<mwc-button id="button">
AND I treid to do it like this:
- type: picture-elements
image: /local/ui/devices/bedroom_TV/remote_controller.png?v1
debug_cardmod: true
style: |
ha-card .element:before {
content: "";
background: green;
position: absolute;
padding-top: 300%;
padding-left: 350%;
border-radius: 100px;
overflow: hidden;
opacity: 0;
transition: all 0.8s;
pointer-events: none;
}
ha-card .element:active:before {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
border-radius: 100px;
overflow:hidden;
}
"#states div":
service-button:
$:
ha-call-service-button:
$:
ha-progress-button:
$: |
#container #button{
opacity: 0;
}
elements:
- type: service-button
service: media_player.toggle
service_data:
entity_id: media_player.bedroom_tv4
style:
left: 40%
top: 20%
Help me please. Where is my mistake?