Try removing this
In the end, reading the documentation of this custom module, I found this;
NOTE: card-mod only works on cards that contain a ha-card element.
This includes almost every card which can be seen, but not e.g. conditional,
entity_filter, vertical-stack, horizontal-stack, grid.
Note, though that those cards often include other cards, which card-mod
can work on.
See the manual for each card to see how to specify parameters for the
included card(s).
Which I guess explained my problem. I thought about working around the issue by using vertical-stack-in-card and then a conditional card with an entities card inside, but in the end I opted to use a custom button-card with a bunch of templates in it to customize icon color, label, and actions, to achieve roughly the same result with less code (it doesn’t look as nice though as native buttons, for this use case)
use custom:template-entity-row for that. Simply set the state to any template you desire
no need for card_mod at all in that case
1 Like
What text do you want to display?
If it is just some sensor’s state - why not using this sensor as the main for row?
If it is some combination of some sensors’ states + some text → then try following the advice of Marius about template-entity-row.
1 Like
Scrollable markdown
Shows scrollbar when needed:
code
- type: markdown
content: |
first
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
last
card_mod:
style: |
ha-markdown {
max-height: 200px;
overflow-y: auto;
}
Thanks to “modern design” huge round corners we see a glitch for the scrollbar in corners.
Another example fixes this:
code
- type: markdown
content: |
first
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
last
card_mod:
style:
ha-markdown $: |
ha-markdown-element p {
max-height: 210px;
overflow-y: auto;
background-color: rgba(0,255,0,0.2);
}
.: |
ha-markdown {
padding-right: 4px !important;
}
4 Likes
i solved!! thx you 
1 Like
yes, a nice mod indeed. using this on embedded markdowns my self, adding a nice line for the content to scroll under:
type: custom:hui-element
card_type: markdown
card_mod:
style: |
ha-card.type-markdown {
box-shadow: none;
border-top: 1px groove var(--divider-color);
overflow-y: scroll;
height: 300px;
}
content: >
believe we had to tie in to the markdown card specifically, because otherwise the mod would be applied to other cards in the stack as well
btw, Ive Neve been able to discover the difference between ‘scroll’ and ‘auto’ in these configs, nor on the example pages on W3…
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_overflow-y&preval=auto
Hi, thanks for reaching out! So I’m not trying hide any tab, but I want to make the tab-bar element sticky. I want to add the following code to this line:
Change this:
:host {
display: block;
}
To this:
:host {
display: block;
z-index: 999;
position: sticky;
top: 0px;
background: var(--primary-color);
}
So I want to add the four extra lines under display. Using inspect element this above code works, however I don’t know how to use it with card_mod. This doesn’t work:
card_mod:
style: |
:host {
display: block;
z-index: 999;
position: sticky;
top: 0px;
background: var(--primary-color);
}
So I think I need to traverse the DOM, which I need help with.
Styling custom:tabbed-card
The card is documented here.
Some basic styling may be done by the card’s options, some - by card-mod.
Note (11.04.23): some stylings stopped working after 2023.4. Try this workaround to fix:
instead of:
card_mod:
style:
tabbed-card $: |
...... {
use this:
card_mod:
style:
tabbed-card:
$: |
...... {
Colored labels & icons (w/o conditions):
code
- type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
styles:
'--mdc-theme-primary': red
'--mdc-tab-text-label-color-default': red
'--mdc-tab-color-default': red
- card:
<<: *ref_card
attributes:
label: label 2
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': orange
'--mdc-tab-color-default': orange
- card:
<<: *ref_card
attributes:
label: label 2
styles:
'--mdc-theme-primary': green
'--mdc-tab-text-label-color-default': green
'--mdc-tab-color-default': green
Colored labels & icons (conditions may be added):
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(2) ha-icon $: |
ha-svg-icon {
color: orange;
}
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label {
color: red !important;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Using standard theme variables for labels & icons:
code
type: custom:tabbed-card
styles:
'--mdc-theme-primary': unset
'--mdc-tab-text-label-color-default': var(--secondary-text-color)
'--mdc-tab-color-default': var(--paper-item-icon-color)
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Hilight icons on hover:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab:hover {
--mdc-theme-primary: red;
--mdc-tab-color-default: red;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-1-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-2-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-3-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-4-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-5-circle
Change an underline’s color:
code
- type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: red !important;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Colored tab’s background:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(1) $: |
.mdc-tab {
background: red !important;
}
mwc-tab:nth-child(2) $: |
.mdc-tab {
background: yellow !important;
}
mwc-tab:nth-child(3) $: |
.mdc-tab {
background: lightgreen !important;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<:: *ref_card
attributes:
label: label 3
Hilight an active tab’s background:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
background: yellow !important;
}
.mdc-tab--active {
background: lightgreen !important;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Tabs with background images:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab {
background-size: 100% 100%;
}
mwc-tab:nth-child(1) {
background-image: url("/local/images/test/9colors.jpg");
}
mwc-tab:nth-child(2) {
background-image: url("/local/images/test/blue_low_2.jpg");
}
mwc-tab:nth-child(3) {
background-image: url("/local/images/test/6colors.jpg");
}
card:
type: custom:tabbed-card
tabs:
- card: &ref_card
type: entities
entities:
- sun.sun
- card: *ref_card
- card: *ref_card
With inner padding:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
background-size: 100% 100% !important;
}
mwc-tab:nth-child(1) $: |
.mdc-tab {
background-image: url("/local/images/test/9colors.jpg") !important;
}
mwc-tab:nth-child(2) $: |
.mdc-tab {
background-image: url("/local/images/test/blue_low_2.jpg") !important;
}
mwc-tab:nth-child(3) $: |
.mdc-tab {
background-image: url("/local/images/test/6colors.jpg") !important;
}
.: |
mwc-tab {
padding: 4px;
}
card:
type: custom:tabbed-card
tabs:
- card: &ref_card
type: entities
entities:
- sun.sun
- card: *ref_card
- card: *ref_card
Align icons vertically with labels:
Not needed since v.0.4
Currently (v0.3.1) icons are misaligned; hopefully this will be fixed in the next revision (issue 1, issue 2).
The example contains 2 cards - styled (aligned) & default (misaligned).
code
type: vertical-stack
cards:
- type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab: |
ha-icon {
display: inline-flex;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: *ref_card
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
Narrow tabs w/o labels:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: var(--mdc-icon-size) !important;
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-1-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-2-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-3-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-4-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-5-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-6-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-7-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-8-circle
- card:
type: entities
entities:
- sun.sun
attributes:
icon: mdi:numeric-9-circle
Labels “caps lock off”:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab__text-label {
text-transform: none;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: Label 1
- card:
<<: *ref_card
attributes:
label: Label 2
- card:
<<: *ref_card
attributes:
label: Label 3
Labels: font-size, text wrapping:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label {
font-size: 10px;
white-space: pre;
}
mwc-tab:
$: |
.mdc-tab__text-label {
text-transform: none;
}
.: |
mwc-tab ha-icon {
display: inline-flex;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: Label 1
- card:
<<: *ref_card
attributes:
label: |-
Some
long long label
!!!
- card:
<<: *ref_card
attributes:
label: Label 3
Hidden tab:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab:nth-of-type(2) {
display: none;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Disabled tab:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab:nth-of-type(2) {
pointer-events: none;
--mdc-tab-text-label-color-default: var(--disabled-color);
--mdc-tab-color-default: var(--disabled-color);
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
“Vivid” tabs:
These changes are also discussed here & here.
Below a variant for the HA 2023.2.3 default theme (border-radius: 12px, borders, no shadows); this may be also rewritten to the “old pre 2022.11 style” (shadows, no borders).
code
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
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-top-left-radius: 12px;
border-top-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
section article > * {
--ha-card-border-radius: 0px 0px 12px 12px;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Tabs on the bottom:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Same + “vivid” tabs:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
.: |
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;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
<<: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: label 1
- card:
<<: *ref_card
attributes:
label: label 2
- card:
<<: *ref_card
attributes:
label: label 3
Sticky “vivid” tabs:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab-bar {
position: sticky;
position: -webkit-sticky;
top: 0; /*var(--header-height); */
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-top-left-radius: 12px;
border-top-right-radius: 12px;
border-style: solid;
overflow: hidden;
}
section article > * {
--ha-card-border-radius: 0px 0px 12px 12px;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: entities
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
attributes:
label: label 1
- card:
type: entity
entity: sun.sun
attributes:
label: label 2
- card:
type: entity
entity: sun.sun
attributes:
label: label 3
Sticky “vivid” bottom tabs:
code
type: custom:mod-card
card_mod:
style:
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;
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;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card:
type: entities
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
attributes:
label: label 1
- card:
type: entity
entity: sun.sun
attributes:
label: label 2
- card:
type: entity
entity: sun.sun
attributes:
label: label 3
Additional info in tabs:
How to replace a tab’s name with some text:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label {
font-size: 0px;
}
.mdc-tab__text-label:after {
content: "New info";
font-size: initial;
text-transform: none;
display: block;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: Label 1
- card: *ref_card
attributes:
label: dummy
- card: *ref_card
attributes:
label: Label 3
How to add a templated text for 2 or more tabs:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(n+2):
$: |
.mdc-tab__text-label {
font-size: 0px;
}
.mdc-tab__text-label:after {
font-size: 10px;
text-transform: none;
display: block;
}
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label:after {
content: "Zone: {{states('zone.home')}}";
}
mwc-tab:nth-child(3) $: |
.mdc-tab__text-label:after {
content: "{{states('sun.sun')}}";
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: Label 1
- &ref_tab
card:
<<: *ref_card
attributes:
label: dummy
- *ref_tab
How to add a multiline text:
code
type: custom:mod-card
card_mod:
style:
tabbed-card $:
mwc-tab:nth-child(2) $: |
.mdc-tab__text-label {
font-size: 0px;
}
.mdc-tab__text-label:after {
content: "New info\A New info";
font-size: 8px;
text-transform: none;
white-space: pre;
display: block;
}
card:
type: custom:tabbed-card
attributes:
icon: mdi:circle
tabs:
- card: &ref_card
type: entities
entities:
- sun.sun
attributes:
label: Label 1
- card: *ref_card
attributes:
label: dummy
- card: *ref_card
attributes:
label: Label 3
Adding images instead of icons:
Tested in HA 2023.2.2, Chrome + Win10, iOS Companion app (iOS 15.7.3).
8 Likes
Thank you so much! I managed to mix and match to create a sticky bar at the bottom! One final question, would it be possible to force the bar to fit all content? When using on mobile, I noticed the tabs are spread out and I need to scroll. I want the bar to force fit all tabs in the view, so I see all tabs without needing to scroll.
Do you mean this?
Probably your options are:
– set a scale to 50% (or any <100%) on the Company App;
– decrease font-size, remove icons - only for a mobile client.
card_mod:
style: |
ha-card {
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}thanks - that worked a charm!
This is what I mean: if the window is wider, all tabs fit in the view:
But at a certain width, the tabs don’t fit anymore. I need to scroll to be able to see the last tab.
So I’m looking for a way to fit all tabs in the view, there is plenty of space around the icons anyway, so I don’t see a reason why it wouldn’t fit.
Do not have access to PC.
Try yourself to change margins/paddings by code Inspector.
Now you know how to access elements, probably will manage to style it.
Post here your results, I will check them and probably will add them to my post about this card.
are those tabs on the tabbed-card? the look very much like the icon tabs in the regular HA header bar.
So I managed to do this with inspect element, by changing min-width to 40px, which works great!
I tried using this with card_mod with different variations, but couldn’t make it work. I think I’m missing something there.