Iām now using card mod, but if i use this, i still sometimes see a black bar above, and then when i refresh page, the bar is goneā¦ how can i fix this? thnx in advance , appreciated
card-mod-root: |
app-header {
display: none;
}
card-mod-view: |
#view {
min-height: 100vh !important;
}
@KTibow , seems you helped me before with the code above a long time ago 
seems issue is back, you have any idea?
Hi,
I have just noticed I have the same issue. Did you find out how to get it to work again?
I use very similar code to you (probably copied from the same place).
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 19px;
height: 20px;
width: 50px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.local_time') }}";
position: absolute;
top: 14px;
right: 0px;
}
Is this a 2021.11.x issue as I have just updated to latest HA version?
Thanks
Hi all,
Both latest versions generate a loop of errors in browser console.
I found the below error in browser console:
card-mod.js:1 Uncaught (in promise) TypeError: this._requestUpdate is not a function
at HTMLElement.set (card-mod.js:1)
at styles.ts:365
at Array.forEach (<anonymous>)
at HTMLElement.value (styles.ts:365)
at HTMLElement.value (home-assistant.ts:66)
at HTMLElement._$AE (styles.ts:365)
at HTMLElement.performUpdate (styles.ts:365)
at HTMLElement.scheduleUpdate (styles.ts:365)
at HTMLElement._$EC (styles.ts:365)
Is it just me? Iām using all latest versions of addon and Home assistant.
I tried downgrading and the issue is gone.
Hi, seems iām seeing now background on my markdown cards, before there was none
cardmod version: 3.1.1
added below to the yaml, seems that helps for chrome browsers
but i still see the background on the HA android companion app?
extra_module_url:
- /local/community/lovelace-card-mod/card-mod.js
what am i missing here?
been experimenting in the background with @KTibow on the motion menu settings, and have made some serious progress:
card-mod-root-yaml: |
.: |
ha-button-menu {
color: {% if is_state('input_boolean.menu_options_template','on')%}transparent /*var(--primary-color)*/
{% endif %};
}
ha-button-menu::before {
content: "{% if is_state('input_boolean.menu_options_template','on') %} {{states('sensor.temp_current')}}Ā° - {{state_attr('sensor.browsermod_id_safari','path').split('/')[-1].replace('_',' ').capitalize()}} {% endif %}";
color: var(--text-primary-color);
visibility: visible;
position: relative;
top: 24px;
}
/* Uncomment this for header on the bottom. You're 3/3 there.
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
*/
etcetcetc
will now allow and create:
trick is to set the 3 dots color to transparent, and set a separate color And visible to the (template) text.
As you can see it even works based on a boolean, so we can change the layout in the frontend, via the frontend 
ofc, that can be anything.
hereās my full theme card mod
Only thing left to do is find a word-wrap setting, soon it doesnt wrap, but shows all on 1 line.
Maybe someone here knows how to do that?
cheers
Hi,
Thanks for this, I would not have got there without you and @KTibowās input. You have saved me a lot of time.
This is what my relevant area of my header now looks like after your help.
And here is my theme yaml to achieve it
test:
card-mod-theme: test
header-height: 48px
card-mod-root-yaml: |
.: |
ha-menu-button {
display: none !important;
}
ha-button-menu {
color: transparent;
}
ha-button-menu::before {
content: "{{states('sensor.local_time')}} - {{states('sensor.local_date')}}";
color: var(--text-primary-color);
visibility: visible;
position: absolute;
font-size: 18px;
width: 250px;
top: 15px;
right: 0px;
}
I got it NOT to wrap by setting the width and making the position absolute, both were cribbed from the card mod themes wiki (and the original code we all used). Lots of trail and error as I donāt know what I am doing really.
Thanks again for getting me back to where I was a few weeks ago.
Good to know - will use that.
Thanks
EDIT: It works a treat! many thanks.
Figured it out in themes
card-mod-theme: noctis-grey
card-mod-more-info-yaml: |
ha-more-info-history:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
ha-more-info-logbook:
$: |
.header > a, a:visited {
color: var(--secondary-text-color) !important;
font-size: 12px;
}
Not that agressive anymore
But it is only working here, but not within the other tabs like
Any hint? I asked this already in card-mod-thread, but hopefully, here are esp. the card-mod-themes experienced user, who can help.
aware this is an old post, but couldnāt find another one remotely close to being effectiveā¦
Id like to hide the chevrons (on Mobile). Dont want to hide the app-toolbar completely though, which is what this does.
considering I do this also:
/* Set the toolbar background. */
app-header, app-toolbar {
background: var(--primary-color);
color: var(--text-primary-color);
}
can I still hide the chevrons somehow? using only:
/* Hide chevrons */
paper-tabs$: |
.not-visible {
display: none;
}
doesnt do anything as far as I can see
Hi Kendell,
I was wondering if I could ask you again for some advice, the code I was using to replace the three dots menu with a clock (which is also listed in the theme cookbook as an example) was working well until I updated to 2021.11. Then it turned back into 3 dots.
I have checked and it doesnāt appear the element names have changed. I also read the recent notes in the thread which provided some ideas how to get it working again, but they didnāt work for me. Here is the code that worked until 2021.11:
mwc-icon-button[slot="trigger"] > ha-svg-icon {
display: none;
}
mwc-icon-button[slot="trigger"]::after {
font-size: 20px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 8px;
right: 0px;
}
Here are some things I tried to replace it.
Iāve been able to get the three dots to disappear with this:
ha-button-menu {
color: transparent;
}
but none of the following were able to make the clock reappear:
ha-button-menu::before {
font-size: 20px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 8px;
right: 0px;
}
or
ha-button-menu::before {
content: "{{ states('sensor.time') }}";
visibility: visible;
position: relative;
top: 24px;
white-space: nowrap;
}
or
ha-button-menu::after {
font-size: 20px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 8px;
right: 0px;
}
Iāve also tried ajusting top and right a bit, but still nothing. Any ideas?
Hi all,
Does anyone have an idea how to add a border on cards in the integration page?
@scstraus have a look here: Custom header theme Ā· GitHub
working nicely.
next challenge is still open, hide the chevrons in that same header theme. This doesnt work:
/* Hide chevrons */
paper-tabs$: |
.not-visible {
display: none;
}
and somehow I should get at the iron-icon?
Hey guys, can anyone help me with card background styling? I am trying to remove the background but as soon as the card updates the background comes back. Any ideas?
I am using auto-entities and card-mod is loaded as a module in config.
Here is my card :
card:
show_header_toggle: false
type: entities
style: |
ha-card {
background: none ;
--ha-card-box-shadow: none;
}
filter:
exclude:
- state: /standby|off|idle|closed|False|clear|unavailable|paused|locked|away/
- entity_id: light.*strip
- entity_id: binary_sensor.monitor*
- entity_id: switch.power*
- entity_id: switch.server*
- entity_id: switch.*alarm
include:
- entity_id: group.lights*
options:
type: custom:fold-entity-row
group_config:
toggle: true
type: custom:slider-entity-row
- domain: light
options:
secondary_info: brightness
toggle: true
type: custom:slider-entity-row
- domain: lock
- domain: fan
- domain: switch
- domain: cover
type: custom:auto-entities
sort:
method: none
I would suggest to use the other cord mod thread. This one is more related to theme modding.
Sowwwyy didnāt see there was another thread on this. Moved it, thanks for pointing it out
Hi Marius, @KTibow
Actually all the examples I posted were based on my attempts to implement the method shown in your custom header theme, but unfortunately they all failed to bring back my clock. Though your clear method did get rid of the dots. It may just be positioning as last time I had to use after rather than before, but I couldnāt find any combination that worked.
Do you have any other ideas?
sorry for the late response, I am struggling myself with these options, but maybe look here: homekit-infused/Default.yaml at a188b344fe16e468f1ca2df8b7dec48d8ce05e1c Ā· jimz011/homekit-infused Ā· GitHub Jim does it slightly different.
for me, I am tryin git get the selected background color, using:
/* Set the background of the currently selected tab .*/
paper-tab[aria-selected=true] {
background-color: rgba(99,107,117,0.5);
}
or
background-color: rgba(var(--primary),0.5);
ofc have the primary se in my main theme as primary: 99,107,117 so we can use it in a rgba(). However, this doesnt work (does nothing).
If I use a color name, it works fine, but then I can not use the opacity it needs. Also it overwrites the
/* Set the color of the currently selected tab indicator. */
ha-tabs {
--paper-tabs-selection-bar-color: black !important;
}
so we can no longer see that.
Any thoughts on optimizing that?
now that Ildar helped me out on adding a camera view as background of a card with
ha-card {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
/*color: black;*/
background-repeat: no-repeat;
background-size: 100%;
}
I was wondering if card-mod-theme could do the same for a View. according to Card mod Themes Ā· thomasloven/lovelace-card-mod Wiki Ā· GitHub we can set things for
card-mod-view, and maybe use the same? Ofc I did give it a try, but not sure of the syntax for that wasnt successful just yet.
Update
card-mod-view: |
hui-masonry-view {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
actually makes happen!
as does:
card-mod-view: |
hui-masonry-view {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
background-repeat: no-repeat;
background-size: 100%;
}
but youād need a better stream than the 1 I test right now, showing a bit pixelatedā¦
have to figure out the view-name for the custom:layout viewsā¦ because right now I can only get it to work for the masonry-view, and not for vertical-view or horizontal-view created by that custom component.
card-mod-view: |
hui-masonry-view {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
hui-horizontal-view {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
hui-vertical-view {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
update2
found that:
horizontal-layout {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
vertical-layout {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
make it happen on the other views, probably also for grid-view, but I dont use that,so cant say for sure Doesnt work for Grid layout
trying to find a way to set a camera view on a single view, I found out that:
paper-tab[aria-label='Weer & Klimaat'] {
color: {{states('sensor.temperature_color_name')}};
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
sets it to the tab in the menu bar. Pretty useless, but nice to know
this works too:
{% if state_attr('sensor.browsermod_safari','path') == '/ui-overview/weer_klimaat' %}
hui-masonry-view {
background: url({{state_attr('camera.weerkaart_nl','entity_picture')}});
}
{% endif %}
but isnt yet what I am looking for