What is the correct order to use both a class and a extra style?
1:
card_mod:
class: content
style: |
ha-card {
Or 2:
card_mod:
class: content
style: |
ha-card {
Both seem to work.
As arganto said - happened after moving to material web.
Will update my post dedicated to a slider later.
this one is ok
still a bit of a search, because not all variables here seem to be replaced:
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-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)
Might be good if we could find and post a 1:1 table of replacement variables here
Ive asked Paul for assistance in 2023.11 To-do: Add release title - #289 by Mariusthvdb
Would appreciate a lot if you could find a fay to continue to use the āpointer-events: noneā parameter.
I have this small issue with the selection menu. It alters the card configuration.
type: custom:stack-in-card
mode: vertical
cards:
- type: vertical-stack
cards:
- type: entities
card_mod:
style: |-
ha-card {
margin-bottom: -18px !important;
--ha-card-border-width: 0;
}
entities:
- entity: input_select.shopping_places
name: Local
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
--mdc-menu-item-height: 40px;
--mdc-select-fill-color: #272727;
}
- type: entities
card_mod:
style: |-
ha-card {
margin-bottom: -18px !important;
--ha-card-border-width: 0;
}
entities:
- entity: input_text.shopping_item_name
name: Produto
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 10px !important;
}
.mdc-text-field__input {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-textfield {
height: 40px;
}
:host {
--mdc-text-field-fill-color: #272727;
}
- type: horizontal-stack
cards:
- type: entities
card_mod:
style: |-
ha-card {
--ha-card-border-width: 0;
}
entities:
- entity: input_number.shopping_item_number
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-textfield $: |
.mdc-text-field {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 10px !important;
}
.: |
:host {
margin-right: -18px !important;
--mdc-text-field-idle-line-color: transparent !important;
--mdc-text-field-hover-line-color: transparent !important;
--mdc-theme-error: transparent !important;
--mdc-theme-primary: transparent !important;
--text-field-padding: 0px 0px 0px 16px;
--mdc-text-field-fill-color: #272727;
}
- type: entities
card_mod:
style: |-
ha-card {
--ha-card-border-width: 0;
}
entities:
- entity: input_select.shopping_item_metric
name: Medida
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
ha-select $: |
.mdc-select__anchor {
height: 40px !important;
#border: 1px solid rgba(127,127,127,0.5);
border-radius: 8px !important;
}
.mdc-select__selected-text-container {
align-self: end;
}
.mdc-line-ripple::after,
.mdc-line-ripple::before {
border-bottom-style: none !important;
}
.: |
ha-select {
height: 40px;
}
:host {
top: 20px;
--mdc-menu-item-height: 40px;
--mdc-select-fill-color: #272727;
}
- type: custom:mushroom-chips-card
card_mod:
style: |-
ha-card {
--chip-border-radius: 10px;
--chip-background: rgba(33, 150, 243, 0.2);
--chip-box-shadow: none;
--chip-border-width: 0;
margin-right: 18px;
margin-bottom: 14px;
}
alignment: end
chips:
- type: template
content: Adicionar
icon: mdi:plus-circle
icon_color: blue
tap_action:
action: call-service
service: input_button.press
target:
entity_id: input_button.shopping_item_add
double_tap_action:
action: none
hold_action:
action: none
got stuck with a
style: |
ha-card {
height: 450px !important;
}
got a combination from a state-switch which displays a power-flow-card-plus with differnt custom consumers selected by the state switch.
To keep redundant code as short as possible the power flow itself is split using the decluttering-card, means most of it is within a template.
getting the height adjusted works fine on the power-flow-card on itās own.
But when being state-switched and decluttered I found no solution. Nor if trying to use the card-mod with the card in a dashboard nor if trying to apply the card-mod lines into the template of the power-flow ā¦ anyone with a hint on how to get this solved?
Hi all,
Iām trying to solve a mystery when trying to style four different icons inside a custom:flex-horseshoe-card.
Iām using the following code:
card_mod:
style:
.container:
.card--filter-none:
.datagroup: |
g:nth-of-type(1) .icon {
color: red;
}
This works fine and styles only the first icon. It also works fine for the third and fourth icon. However when applied to the second icon (only) all four icons get styles. For the life of me I canāt figure out why.
With nth-of-type(1):
With nth-of-type(2):
Hey! Iām trying to do something like that also, can you share the entire card code? with the chips below?
The code was already provided in that post.
This is what i get, do you know how can i add the fan buttons below?
Probably it depends on the fan. It may have only āon/offā states or 4 states as described.
Oh I see now, well mine is no a āfanā im using script to send RF to control a fan. do you think thereās a way to draw chips or buttons like that and make them call a script?
Since you chose a conventional ātileā card - you are supposed to use native āfeaturesā.
Or you may develop your own custom card.
Or you may create a card based on any stack card combining any cards to get your design.
This is not related to card-mod and cannot achieved by card-mod (it may only be used to āpolishā your design).
Picture Glance - distributing icons
type: vertical-stack
cards:
- camera_view: auto
type: picture-glance
image: /local/images/test/blue.jpg
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
card_mod:
style: |
.box div:nth-child(1) div:nth-child(4) {
flex-basis: 100%;
}
.box div:nth-child(1) {
flex-wrap: wrap;
}
- type: picture-glance
image: /local/images/test/blue.jpg
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
card_mod:
style: |
.box div:nth-child(1) {
display: grid !important;
grid-template-columns: repeat(4,1fr);
}
- type: picture-glance
image: /local/images/test/blue.jpg
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean
card_mod:
style: |
.box div:nth-child(1) div:nth-child(4) {
flex-basis: 100%;
}
.box div:nth-child(1) {
flex-wrap: wrap;
}
.box div:nth-child(2) {
display: grid !important;
grid-template-columns: repeat(4,1fr);
max-height: 80px;
}
Hi
Trying to change the size of the text for temperature in the custom:hourly-weather card.
It looks like this:
In the explorer:
Iāve tried:
card_mod:
style: |
ha-card {
background-color: inherit;
color: white;
border-width: 0px;
pointer-events: none;
}
weather-bar$: |
.main axes bar-block bar-block-bottom temperature {
color: red !important;
}
The ha-card element works, the rest doesnāt.
Thanks
Andy
Try this:
card_mod:
style:
.: |
ha-card {
background-color: inherit;
color: white;
border-width: 0px;
pointer-events: none;
}
weather-bar$: |
.main axes bar-block bar-block-bottom temperature {
color: red !important;
}
Thanks. Doesnāt work - no change.
Thanks for the great help! I managed to change the font of the scrolling bar displaying title and song name.
Unfortunately, this does not work on iPad.
I have made this adjustment (increase the font size of the text, and increase the overall height of the element so that the text can be fully displayed and is not cut off on bottom and top):
type: custom:mini-media-player
entity: media_player.essen
sound_mode: full
name: null
icon: mdi:speaker-play
volume_stateless: false
toggle_power: false
group: false
artwork: full-cover
mini-media-player-scale: 0.5
hide:
volume: true
source: true
power_state: true
power: true
controls: true
icon_state: false
state_label: true
info: false
name: true
progress: false
icon: true
info: scroll
replace_mute: next
style: |
ha-card {
.mmp-player .mmp-player__core.flex .entity__info .entity__info__media
{
font-size: 45px !important;
max-height: 100px !important;
line-height: 55px !important;
height: 55px !important;
}
.mmp-player .mmp-player__core.flex .entity__info .entity__info__media .attr__media_title
{
font-size: 45px !important;
max-height: 100px !important;
line-height: 55px !important;
height: 55px !important;
}
}
Works great on PC with Safari and Chrome, but not on iPad.
Do you have any idea what I can change/do to show the same change on iPad?
Whatever related to Safari (especially turned to be āold versionsā < 16) seems to be a low-priority things to devs - so no guaranteed output. Try, experimentā¦