Hi Dimitri,
Thank you so much for helping me out.
I saw the code in on this website:
https://mysmarthome.blog/blog/sticky-navigation-bar.html
So i was thinking that is correct and off course card_mod instead of card-mod (my mistake) 
Hello. I’m struggling with adding css to one particular card on my dashboard, and wondered if anyone could help guide me in the right direction, with what I thought would be a fairly simple bit of styling.
The top 2 cards on the sidebar area of my dash are custom button cards, within a vertical stack - the first one for displaying the time, and the second one for displaying the date. Both cards display correctly when viewed on a tablet, however when viewed on mobile, I want them to act differently. The ‘Time’ button card I am successfully hiding on mobile view, with the following code:
- type: grid
view_layout:
grid-area: sidebar
columns: 1
cards:
- type: vertical-stack
cards:
- type: custom:button-card
entity: sensor.time
show_name: false
show_icon: false
show_state: true
tap_action:
action: none
styles:
card:
- padding-top: 20px
- text-align: center
- border-width: 0
- font-family: SF Pro Display, Roboto, system-ui
state:
- font-size: var(--sidebar-time-font-size)
- font-weight: 300
- line-height: var(--sidebar-time-line-height)
- letter-spacing: 0.11vw
- color: rgba(255, 255, 255, 0.8)
card_mod:
style: |
/* phone */
@media screen and (max-width: 800px) {
ha-card {
display: none !important;
}
}
I am hoping to change the font-size of the Date (second button card in my vertical stack) when viewed on mobile, however my media query isn’t making any difference to the font-size on mobile, so I think I may not be addressing the element/using the correct selector. This is the code for my Date button card:
- type: custom:button-card
entity: sensor.date_formatted
show_name: false
show_icon: false
show_state: true
tap_action:
action: none
styles:
card:
- padding-top: 10px
- text-align: center
- border-width: 0
- font-family: SF Pro Display, Roboto, system-ui
state:
- font-size: var(--sidebar-date-font-size)
- font-weight: 300
- line-height: var(--sidebar-time-line-height)
- color: rgba(255, 255, 255, 0.8)
card_mod:
style: |
/* phone */
@media screen and (max-width: 800px) {
ha-card .state.ellipsis {
font-size: calc(var(--sidebar-date-font-size) * 1.2)
}
}
Using Developer tools in my browser, and on mobile view (less than 800px wide) I can see that the state is just picking up the regular font-size from my theme, which is set under the styles>state options of the card in the code above it
<div id="state" class="ellipsis" style="font-size:var(--sidebar-date-font-size);font-weight:300;line-height:var(--sidebar-time-line-height);color:rgba(255, 255, 255, 0.8);">
<!--?lit$560216021$-->Tuesday October 10
</div>
Can anyone help with where I am going wrong please? Still very new to css and only just started working with my new dashboard in yaml mode.
Why dont you just set the size of the variable directly like this:
card_mod:
style: |
@media screen and (max-width: 800px) {
ha-card {
--sidebar-date-font-size: 40px !important;
}
}
can also just set the card font size globally like this:
card_mod:
style: |
@media screen and (max-width: 800px) {
ha-card {
font-size: 40px !important;
}
}
1 Like
Thank you - it’s so obvious now, and yes that works perfectly. I was staring at it for far too long, and ended up overcomplicating it!
mostly got the HA light card working but sized to fit my grid style display using card-mod. i am kind of familiar with CSS but as good as the rest of you on the trial and error method. that is to say don’t ask me to explain any of this but it works 
the code and displayed card is below, but the request. Please help reuse the name area on the card as the more-info click area and completely disable the current more-info icon display/area.
thank you.
- type: markdown
content: to be able to see any overflow
- square: false
type: grid
columns: 5
cards:
{% for i in range(5) %}
- type: light
entity: {{ thisRoomLights[0] }}
name: {{ allRoomLightNames[room][0] }}
color: auto
show_name: true
show_icon: true
show_state: false
styles:
card:
- background-color: transparent
icon:
- color: >
[[[
return (entity.state === 'on') ? variables.iconColorActive : variables.iconColorInactive;
]]]
card_mod:
style: >
ha-card {
height: 100px !important;
width: auto !important;
overflow: visible !important;
}
ha-card > div { ## if you change to lower percent the slider will overflow
height: 100% !important;
width: 100% !important;
}
ha-card > ha-icon-button {
height: 20% !important;
width: 20% !important;
padding: none !important;
}
#slider > ha-icon-button { ## sets the icon size
--mdc-icon-button-size: 80% !important;
--mdc-icon-size: 80% !important;
padding: none !important;
}
:host #slider > round-slider { ## without this the slider and text will overflow
height: 90% !important;
width: 90% !important;
padding-bottom: 0px !important;
}
:host #slider > ha-icon-button > ha-state-icon { ## without this the icon will be off center
width: 100% !important;
justify-content: center !important;
justify-self: center !important;
}
#slider > ha-icon-button > ha-state-icon { ## without this the icon will be off center
width: 100% !important;
justify-content: center !important;
justify-self: center !important;
}
{% endfor %}
Trying (unsuccessfully so far), to change the navigation buttons within a swiper container. Can anyone possibly point me in the right direction?
Any pointers would be greatly appreciated 
EDIT: I wrapped the whole swiper-container in a card_mod, does this put it closer to a ‘doable’ feat? Thanks again!
I don’t use the card but your screenshot shows, that this card /there is no ha-card element. Without that cad-mod will not be able to ingest the code (same as for the core stack cards, …). So a mod-card around your card might be needed.
1 Like
figured out how to hide the more-info buttons by adding this to the existing:
ha-icon-button.more-info {
display: none;
}
only remaining now is how to add a second tap action to the name area without breaking the first tap action on the icon.
thanks.
But what is your card-mod code you have tried and which is not working?
Thank you.
I made the lamp orbiting a black hole:
type: vertical-stack
cards:
- type: entities
entities:
- input_boolean.test_boolean
- type: entities
entities:
- sun.sun
- type: conditional
conditions:
- entity: input_boolean.test_boolean
state: 'on'
row:
entity: sun.sun
icon: mdi:desk-lamp
name: Nählicht Lampe
style:
hui-simple-entity-row$:
hui-generic-entity-row $: |
state-badge {
{% if is_state('input_boolean.test_boolean', 'on') %}
text-indent: 45px;
color: red;
animation: rotation 4s linear infinite;
{% endif %}
}
@keyframes rotation { 0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); } }
- entity: sun.sun
(It’s spinning normally without the indentation.)
If the row contains a timer it has to be:
style:
hui-timer-entity-row$:
hui-generic-entity-row $: |
Nicely done! A light cannot leave a dark domain )
Hello!
I have just updated to the latest home assistant version. But now my navigation bar is up top instead of at the bottom. Can someone help me with what I should write in the theme file to move it back down?
dont cross post please. i already answered your question on the mushroom thread.
1 Like
Hi everyone, can anyone please help me to solve my problem? I would like to eliminate the 8px margin of each state-badge element of the card but I can’t figure how. Thanks in advance!
There is already posted style for Glance with changed margin.
1st post → link at the bottom
If you have some “entity-filter” inside - just try to adapt it, and post what you tried and where you failed, it will be a good start.
Hi, is there a way to remove or make transparent these input_datetime lines in entities card? Thanks
Hi, this should work. its pretty easy to figure out if you look through ildar’s posts.
type: entities
entities:
- entity: input_datetime.test
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: |
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
ha-date-input $:
ha-textfield:
$: |
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
1 Like
1st post → link at the bottom → input_datetime
1 Like