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).
11 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.
Yes correct, using only icon and no labels get this look. Also very cool each active icon can have its own color.
Ok, will check it some day.
1 Like
before installing, can I ask how responsive the card is?
does it load swiftly and how does it manage the tabs.
is it comparable with say the fold-entity-row?
I could imagine using card_mod on all of those tabs would be costly
considering it might be a nice replacement for the swiper card which seems to be abandoned and causing some styling/functionality issues
seems to be working nicely indeed! using only icons on those tabs, I had to change the selected_false color to
styles:
--mdc-theme-primary: gold
--mdc-tab-color-default: orange
for it to work
wont be using the orange, but just following the docs on that 
comparing that to the main view tab bar:
one can see the unselected tabs in the tabbed-card are a bit brighter than the unselected view tabs. maybe I can find the correct setting for that, though it takes a keen eye to notice.
setting minwidth to true using text labels didnt work though, still had to swipe with only 3 or 4 tabs.
1 Like
Yes, I have replaced some swiper elements inside my dashboard for tabbed-card myself. Mainly because I find selecting a tab is a lot more mobile friendly than swiping. Especially if there are like 4-5 options to choose from.
Updated the main post for this card.
Check this:
card_mod:
style:
tabbed-card $:
mwc-tab:
$: |
.mdc-tab {
min-width: var(--mdc-icon-size) !important;
}
.: |
tabbed-card {
--mdc-tab-horizontal-padding: 0px;
}
Code works great! I am trying to mix it with my bottom sticky code, but it doesn’t seem to mix well. I notice both codes have a slightly different selector. Where one starts with tabbed-card $: | and the other with tabbed-card $: Whatever I tried it seems it’s either one or the other code that works. Any suggestions how I can add your posted code with my code below here?
card_mod:
style:
tabbed-card $: |
mwc-tab-bar {
position: sticky;
position: -webkit-sticky;
top: var(--header-height);
display: block;
z-index: 999;
bottom: 0;
background: var(--primary-color);
}
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
align-self: flex-start !important;
}
.: |
tabbed-card {
display: flex;
flex-direction: column-reverse;
}