Hi all, hoping someone can point out if there have been changes in the last few months of if Iāve done something wrong.
Iām scraping data from a website and want to display just the relevant name and number. The code shown previously hid the state icon (eyeball) but it hasnāt worked for a few months now.
What should it look like? Thanks in advance.
This will workā¦
card_mod:
style: |
ha-card {
background: none !important;
border: none !important;
}
Just ensure you are on card_mod version 3.4.4.
Is there a way to make date fields, hour and minutes, less wide and closer together ? I managed to configure many constants following @Ildar_Gabdullin post, but Iām not able to change the width and position of these fields. The following is a screen capture of my form:
Many thanks!
Please post your card code.
@LiQuid_cOOled The entity is a variable in my main code, which I use with different types, and the formatting code, applied for the āinput_datetimeā example is the following one:
entities:
- entity: "input_datetime.myshade_open_time"
card_mod:
style:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: &ref_style_no_underline_time |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.mdc-text-field {
height: 20px !important;
}
ha-select $: *ref_style_no_underline_time
hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
display: none;
}
.text-content {
font-size: 14px;
}
ha-textfield $: |
.mdc-line-ripple::before, .mdc-line-ripple::after {
border-bottom-style: none !important;
}
.mdc-text-field {
height: 20px !important;
}
.mdc-text-field__input {
align-self: center;
}
span#label {
display: none;
}
ha-select $: |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.mdc-select__anchor {
height: 25px !important;
}
.mdc-select__selected-text-container {
align-self: start;
}
span#label {
display: none;
}
ha-select $ mwc-menu $: |
mwc-list {
max-height: 400px;
}
.: |
ha-select {
height: 25px;
}
:host {
--mdc-menu-item-height: 60px;
--secondary-text-color: var(--primary-text-color);
--paper-item-icon-color: silver;
}
card_mod:
style: |
ha-card {
box-shadow: none;
border: none;
background-color: transparent;
}
Many thanks
Maybe a little late for my question, but where exactly do you put that card mod code for a tabbed card in your card so it works?
I tried plenty of different ways but none seems to work. I have other card mod things running and those seem to work. I tried to use the FX inspector to get a clue but wasnāt successfull.
So for I have this but the card remains totally unchanged.
type: custom:tabbed-card
options: {}
card_mod:
style:
tabbed-card $:
mwc-tab:
$:
mwc-tab-indicator $: |
.mdc-tab-indicator__content--underline {
border-color: red !important;
}
.: |
.mdc-tab {
min-width: 40px !important;
background: yellow !important;
}
.mdc-tab--active {
background: lightgreen !important;
}
tabs:
- card:
type: entities
title: Battery States - ClimateSensors
entities:
- entity: sensor.shellyht_gamingroom_battery
name: GamingRoom (PwrSpply)
- entity: sensor.shellyht_garage_battery
name: Garage (PwrSpply)
- entity: sensor.shellyht_hall_battery
name: Hall
- entity: sensor.shellyht_kitchen_battery
name: Kitchen (PwrSpply)
- entity: sensor.shellyplusht_bathroom_battery
name: Bathroom
- entity: sensor.shellyplusht_homecinema_battery
name: Home Cinema
- entity: sensor.shellyplusht_laundry_battery
name: Laundry
- entity: sensor.shellyplusht_sleepingroom_battery
name: Sleeping Room
- entity: sensor.shellyplusht_library_battery
name: Library
- entity: sensor.shellyht_livingroom_battery
name: Living Room (PwrSpply)
attributes:
label: false
icon: mdi:thermometer-water
Check my examples again, it needs mod-card.
1 Like
much to my surprise/shame I just realized I can not find a way to card-mod the .card-header in a regular markdown cardā¦
- type: markdown
title: Batterijen onder alert
card_mod:
style: |
.card-header {
background: var(--background-color-off) !important;
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
ha-card {
--card-text-align: start;
/*color: var(--primary-color);
background: rgba(from var(--primary-background-color) R G B /0.4);*/
box-shadow: var(--box-shadow);
}
is all I need to do, and I want to mimic the regular card-headers I use in almost any cardā¦
What I normally do is use a vertical-stack and stack a header card and a content card. But we should be able to customize the card-header shouldnt weā¦?
in following screen you see what I get and what I want (the second card)
( I only discovered because I experimented using the template markdown in the new View header, then couldnāt find a way, and tested if this was also not working in side the regular view section. Which is the caseā¦
btw, doing this inside the Inspector pane works alright. proving .card-header is the correct element:
Start with thisā¦
card_mod:
style:
ha-time-input $ ha-base-time-input $: |
#hour {
width: 30px;
margin-right: -3px;
}
#min {
width: 30px;
margin-left: -1px;
}
Yes, this was missed in Markdown tutorials here. Will check it in a week I hope - unless you sort it out yourself.
1 Like
Hello,
Need some help, I had this code working and the background was black, now after updating HomeAssistant it is more transparent and does not overlap the other cards in the background.
type: custom:mod-card
card_mod:
style: |
@media (min-width:180px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 10px;
left: 10px;
width: calc(100% - 20px);
background: black;
border-radius: 100px;
padding: 5px;
}
}
@media (min-width:800px) {
ha-card {
width: calc(60% - 30px);
left: calc(20% + 43px);
}
}
card:
type: grid
square: false
columns: 5
cards:
- type: custom:button-card
icon: mdi:home
tap_action:
action: navigate
navigation_path: /dashboard-rounded/home
styles:
icon:
- width: 24px
- color: white
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:lightning-bolt
tap_action:
action: navigate
navigation_path: /dashboard-rounded/Energia
styles:
icon:
- width: 24px
- color: white
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:car
tap_action:
action: navigate
navigation_path: /dashboard-rounded/Garagem
styles:
icon:
- width: 24px
- color: white
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:server
tap_action:
action: navigate
navigation_path: /dashboard-rounded/status
styles:
icon:
- width: 24px
- color: white
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:cog
tap_action:
action: navigate
navigation_path: /dashboard-rounded/config
styles:
icon:
- width: 24px
- color: white
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
Edit: Added photo of how I had it.
Edit2: Now
I will try, but havent found it yet, if I do, Ill reply again 
dont forgetā¦
1 Like
In your shoes I would test with a Grid containing a few stock Entity cards and with static not-mediaquery-dependent styles. Currently your code contains plenty of stuff distracting from the main issue. Besides, make sure that you are using the latest card-mod 3.4.4.
card_mod:
style:
$:
.: |
.card-header {
At least in my version. After all this year you should see if an element is inside shadow-root and if not, shouldnāt you?
1 Like
yes, and that is what I tested too. but maybe fluked because of the rest of the mod or type, let me try again
edit
- type: markdown
title: Batterijen onder alert
card_mod:
style:
$:
.: |
.card-header {
background: var(--background-color-off) !important;
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
.: |
ha-card {
--card-text-align: start;
/*color: var(--primary-color);
background: rgba(from var(--primary-background-color) R G B /0.4);*/
box-shadow: var(--box-shadow);
}
does Not mod the .card-header
(using 3.5.0 here, but I doubt that would change anything in this matter, as its changes didnt touch anything going on in this particular config)
Ive even hazarded a wild experiment doing
card_mod:
style:
$: |
.card-header {
background: var(--background-color-off) !important;
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
which remained fruitless also.
so I am back to my workaround:
Header workaround
header:
layout: center
badges_position: bottom
card:
type: vertical-stack
card_mod: !include /config/dashboard/card_mods/stack_card_gap_shadow.yaml
cards:
- type: heading
heading: Batterijen onder alert
heading_style: title
card_mod:
class: class-section-heading
- type: markdown
card_mod:
style: |
ha-card {
--card-text-align: start;
/*color: var(--primary-color);
background: rgba(from var(--primary-background-color) R G B /0.4);*/
box-shadow: var(--box-shadow);
}
# text_only: true
content: >
{% set b = label_entities('batterij') %}
{% set alert_level = states('input_number.battery_alert_level')|int %}
{% set val = b | map('states')| map('int',-1) %}
{% set nam = b | map('state_attr', 'friendly_name') %}
{% set z = zip(nam, val)| selectattr(1, 'lt', alert_level)|sort(attribute=1) %}
{{ z | map('join', ': ') | join('% \n') }}%
separate post, because I just had a brainwave for 3.5.0 card_modā¦
if you use 3.4.4, follow Argantoās post above
click to reveal 3.5.0 mod
- type: markdown
title: Batterijen onder alert
card_mod:
style:
ha-card:
$: |
.card-header {
background: var(--background-color-off) !important;
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
.: |
ha-card {
--card-text-align: start;
/*color: var(--primary-color);
background: rgba(from var(--primary-background-color) R G B /0.4);*/
box-shadow: var(--box-shadow);
}
makes it happen
can leave out a few !importantās
click to reveal 3.5.0
card_mod:
style:
ha-card:
$: |
.card-header {
background: var(--background-color-off);
font-weight: 400;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
@Ildar_Gabdullin tagging you because of earlier promise
can also confirm this to work inside the header: of the view
Thatās it as you know. There you donāt start from ha-card. And have to access differently. As you know.
And as long no one besides you is using this version, it is somehow confusing for others, I would say, if the want to rebuild, what you are asking.
Ive edited the post above to make it a bit more obscure, and point to your post, that Ildar could add to the Fantastic post.
(I am still hoping Thomas will update and bring back what was taken from us going down to 3.4.4ā¦) (I cant go back, well, I could, but it would be a shame if shortly after that, I would have to re-edit again all overā¦) so itās a devilish dilemmaā¦
iām using last version, already reinstalled a older version and inst fixed. Its after last HA update and Core
@LiQuid_cOOled Yes this is working very well! Many thanks! Now my problem is that I donāt know how to integrate your code with mineā¦ Sorry for my lack of knowledge. The fiollowing is my code:
ha-time-input $ ha-base-time-input $:
ha-textfield:
$: &ref_style_no_underline_time |
.mdc-line-ripple::before,
.mdc-line-ripple::after {
border-bottom-style: none !important;
}
.mdc-text-field {
height: 20px !important;
}
ha-select $: *ref_style_no_underline_time
As you can see, the first line is āha-time-input $ ha-base-time-input $:ā and it doesnāt end with ā|ā. So my question is how to add:
#hour {
width: 30px;
margin-right: -3px;
}
#min {
width: 30px;
margin-left: -1px;
}
Thank you very much!