Untested:
tabbed-card $: |
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
ā¦
}
.: l
mwc-tab-bar {
ā¦
}
.: |
tabbed-card {
ā¦
}
With that code only this part works:
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
}
I changed the code to this, which makes it sticky again (and at bottom):
tabbed-card $: |
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
mwc-tab-bar {
position: sticky;
position: -webkit-sticky;
top: var(--header-height);
display: block;
z-index: 999;
bottom: 0;
background: var(--primary-color);
}
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
}
However Iām now right back where I started: I still donāt know where to insert this part:
$: |
.mdc-tab {
min-width: var(--mdc-icon-size) !important;
}
I tried this:
tabbed-card $: |
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
.mdc-tab {
min-width: var(--mdc-icon-size) !important;
}
mwc-tab-bar {
position: sticky;
position: -webkit-sticky;
top: var(--header-height);
display: block;
z-index: 999;
bottom: 0;
background: var(--primary-color);
}
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
--mdc-tab-horizontal-padding: 0px;
}
Unfortunately, still the part of min-width doesnāt work. Any suggestions?
Dear all,
I wanted to modify this test card in that way, that I can use it as an input interface for my timer.
In the end of the day, it should look like this, only with:
smaller digits for direct input (as in the testcard below) and with the word āUhrā as unitt behind the time. The switch on the left, will activate the automation.
The test card works, fine and I can adapt the solution into my cards, but how can I add the unit behind the times? I did not find any solution for this. Can someone please help?
If there is a much better solution, how I can realize a input interfce for my timers, please let me know! I am a littel bit lost
Thanks for support!
Spartacus
seems that would be a very valid FR to the card itself. Why not ask the developer? Heās very responsive.
trying to card_mod my way out of thisā¦
challenge: have a mini-graph card use the full width if an entities card it is used in, just like we can do when adding the exact same mini-graph to the footer of the entities card. No matter what we do, set margin or padding, the mini-graph card wont go beyond the card content section if the entities card.
ive checked the resource on the footer, and all that does is this:
.footer {
border-bottom-left-radius: var(--ha-card-border-radius, 12px);
border-bottom-right-radius: var(--ha-card-border-radius, 12px);
margin-top: -16px;
overflow: hidden;
}
which does not help t all when adding that to the card modā¦ you can see the card_mod push the margins out, but the contents get clipped, and even when setting overflow: visible, CSS Overflow, that makes no difference.
please have a look? thanks!
I was able to hack myself into a vertical-stack:
type: custom:mod-card
card_mod:
style: |
:host {
--stack-card-margin: 0px;
}
card:
type: vertical-stack
card_mod:
class: class-header-margin
cards:
- type: custom:button-card
name: Uv Index
template: button_default_title
- type: custom:mini-graph-card
entities:
- entity: sensor.openweathermap_uv_index
state_adaptive_color: true
- entity: sensor.current_uv_index
state_adaptive_color: true
height: 100
line_width: 3
font_size: 75
show:
fill: fade
legend: true
extrema: true
icon: false
name: false
- type: entities
entities:
- entity: sensor.openweathermap_uv_index
options:
secondary_info: last-updated
etcetc
to have it like:
Can someone help me remove the background please
type: custom:clock-weather-card
entity: weather.forecast_home
title: null
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_days: 5
locale: en-GB
time_format: 24
date_pattern: P
hide_today_section: true
hide_forecast_section: false
hide_clock: false
hide_date: false
card_mod:
style: |
ha-card {
--ha-card-background: transparent !important;
border: none;
}
forecast-temperature-bar:
$: |
forecast-temperature-bar-background {
background: transparent !important;
}
There are various FRās pending, including these. I appreciate the developer of this card, but I also know he is very limited in his time. Also to me it makes no sense to wait till the developer has the time, when we can achieve it with a few lines of code with card_mod. Ildar has been of fantastic help with the codes and I now just want to mix the codes properly.
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
.: |
.mdc-tab {
min-width: var(--mdc-icon-size) !important;
}
.: |
mwc-tab-bar {
position: sticky;
position: -webkit-sticky;
bottom: 4px;
display: block;
z-index: 999;
}
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 1px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
section article > * {
--ha-card-border-radius: 12px 12px 0px 0px;
}
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
--mdc-tab-horizontal-padding: 0px;
}
Fantastic!! Thanks a lot for all your time and work, I really appreciate this!
Hey,
I donāt know if anyone can help me. Iām want the mdi:icon to rotate when itās āonā on a tile card but i cant seem to find the right class
type: custom:mod-card
card:
type: tile
entity: switch.aquecedor_wcsuite
icon: mdi:fan
name: Aquecedor WCs
card-mod:
style: |
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); } }
ha-tile-icon {
{% if is_state('switch.aquecedor_wcsuite','on') %}
animation: rotation 1.5s linear infinite;
{% endif %}
}
sure, appreciate all of these efforts.
but, trying to keep things as short and simple as possible always seems best. not only for the browser and memory usage, but also in keeping up with resource changes.
If the author would implement a simple option for tabs at the button, it would certainly simplify all, including the rest of the card_mods.
until then, we need that monstrosity of a mod like Ildar has made possible. Hope it will keep for some while indeed.
until the next card update breaks it I am afraid.
Most people are rather satisfied with a default implementation.
For others - a customization is available.
Surely you may try convincing the cardās developer to implement your wishes.
Same is for most cards, conditional & custom.
having started playing with
- entity: sun.sun
card_mod:
style: |
state-badge {
display: none;
}
.name {
display: none;
}
:host div:not(.name) {
display: none;
}
to create a complete and non-functional gap in a glance card, I was also looking for a way to have an empty slot in an entities card. Ofc, this does not work (although, it would have been niceā¦) and I have come as far as:
entities:
- entity: sun.sun
name: ' '
icon: ' '
show_state: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
this however still leaves the state to be displayed, so need some extra modding.
Why / for what. If you want have space, why not setting padding or margin to the one before or after? Or use type divider and hide the line of it.
I have a similar āblankā row too. May be used as a ready decluttering-template.
Could be more flexible than āsetting padding or margin to the one before or afterā.
Because I did not think of that 
Also, itās even more of a hackā¦
never knew about the mdi:blank ! cool. Is that card_mod? couldnāt find that at material design
btw, this works too:
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row $: |
.state {
display: none;
}
name: ' '
icon: mdi:blank #' '
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
and seems even more concise. (we need the action settings, to not have a mouse pointer happen)
just found this little gem:
- type: custom:template-entity-row
state: ''
name: ''
a row without a state and name. perfect!
haha, thats as short as it gets I think
orā¦ no it still shows the handle on the icon field
card_mod:
style: |
:host {
pointer-events: none;
}
helps
so summarizing:
- type: custom:template-entity-row
state: ''
name: ''
card_mod:
style: |
:host {
pointer-events: none;
}
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row $: |
.state {
display: none;
}
.: |
:host {
pointer-events: none;
}
name: ' '
icon: mdi:blank #' '
# tap_action:
# action: none
# hold_action:
# action: none
# double_tap_action:
# action: none
It was there some time ago, present as an icon - but recently I realized that itās gone.
The code still works.
Could be a bad solution since sometimes a state occupies 2 linesā¦ So hiding it causes a 1px difference. No, itās a rare case. So, your variant good.