Of course, the next thing I try works!
ha-card div.forecast div.forecast-image-icon svg {
--mdc-icon-size: 80px;
width: 80px;
height: 80px
}
1 Like
Nice, i was stumbling around svg-icon etc, tried --mdc as-well ⌠also figured out it was a div-container, but guess i was to âstuckedâ with âweatherâ instead of forecast ⌠gotta give that a try on another âtest-cardâ 
.
Has anyone gotten the âReplace the overflow menu with clockâ example working?
I added the example code to the bottom of my mod-card-root-yaml block in my themeâs YAML file, but no luck:
# Header
header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there.
#selectionBar {
bottom: unset !important;
}
*/
.: |
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* 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;
}
*/
ha-button-menu::before {
content: "{{states('sensor.time')}}";
color: var(--text-primary-color);
visibility: visible;
position: absolute;
font-size: 20px;
width: 230px;
top: 13px;
right: 0px;
}
ha-menu-button {
display: none !important;
}
ha-button-menu {
color: transparent;
}
Iâm referring to the deprecation of --paper-item elements at the theme level, but in this case it seems Iâm mistaken in terms of how they work out at card level, so thanks for highlighting that. Of course, deprecation doesnât mean that they donât work right now, but at some point in the future they may not.
If you look at the code inspector under Developer tools, youâll see that for the state-badge elements on both entities and glance cards, there is already a substitution of the --paper-item-icon-color variable which points to the --state-icon-color variable. However, setting the --state-icon-color variable at card level doesnât work as I had expected (I usually drill all the way to the state badge element anyway to set its color).
Incidentally, your code for the glance card doesnât work for me unless I explicitly set state_color to false on the card, so knowing which card is being used would still seem to be a relevant question. (I think that may be because the sun is currently above the horizon for me, and in HA terms that means it is active, whereas when you tested it it was below the horizon/inactive).
Assuming your sensors are reporting some kind of number, try this in the Developer Tools > Template section:
{% if (states('daily_sunpanel_deliver_grid') | int(0)) > (states('daily_power_short') | int(0)) %}
darkorange
{% else %}
grey
{% endif %}
Youâll need to adapt this if your sensors report a string with some kind of unit of measurement in it instead.
check Custom header theme ¡ GitHub
using a template, and not clock but thats of not much importance. this is a card-mod-theme topic though
I currently use a card that spans all the columns in a grid-layout card to create a header:
But I would like the header label to be located on top of the border, like so:
Is that possible?
- type: custom:mod-card
style: |
ha-card {
border: solid 2px var(--primary-color) !important;
}
view_layout:
grid-column: 1 / span 4
grid-row: span 2
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: auto
cards:
- type: custom:button-card
label: Outside
show_state: false
show_units: false
show_icon: false
show_name: false
show_label: true
view_layout:
grid-column: 1 / span 4
height: 15px
styles:
card:
- height: 15px
- padding: 0
- box-shadow: none
grid:
- grid-template-rows: auto
label:
- color: var(--primary-color)
color_type: card
color: var(--primary-background-color)
Edit: looks like a fieldset would do that.
What is that card? I have been looking for something like that. Also, could you update your code based on the âfieldsetâ?
I simply edited the screen cap to show what Iâm looking for. Iâm still looking for a solution
But you said this before. How did you do that?
All the necessary code is in my post.
Itâs a column-spanning card inside a grid-layout card inside a mod-card.
Help!!! Iâm pulling my hair out trying to adjust the spacing and move this text up in the markdown container.
My code is below, what am I doing wrong?!
- type: vertical-stack
cards:
- type: markdown
content: >
<h2 style="text-align: center;"> Mark: {{states('person.mark')}}
</h2> for: {{states('sensor.time') and
relative_time(strptime(states.sensor.mark_left_home_last.state[:19],'%Y-%m-%d
%H:%M:%S'))}} <br> Commute: {{states('sensor.waze_travel_time') }}
mins
style: |
ha-card.type-markdown {
padding-top: 0px;
text-align: center;
line-height: 16px;
height: 110px;
}
hello, how can i use card-mod to disable the more-info popup when i click on the marker/picture icon inside a map card?? i tried with tap-action function but it doesnât work.
Someone could point me to the right direction??
thanks a lot.
Hi!
Iâm using picture-elements card and I run into a problem: I cannot change the icon color of a switch when it is turned on. I tried to use --paper-item-active-color , but it doesnât working.
My code is the following:
- type: state-icon
tap_action:
action: toggle
entity: light.terasz_szoba_lampa
style:
bottom: 33%
right: 7%
border-radius: 50%
"--paper-item-icon-color": black
"--paper-item-icon-active-color" : yellow
text-align: center
background-color: rgba(102, 102, 102, 0.2)
Iâd like to have the âswitched onâ color yellor.
Any ideas?
Seems like youâr using âbasic entityâ CSS " (which btw should be âstyles:)â, and not card-mod ⌠but, anyhow, if ' --paper-item-icon-active-color 'â doesnât work in your Theme, try âtemplateâ on the âentityâ ( or " card-mod: style: " ) on the entity
I will answer you in the topic where you posted it first.
It works - but not for light entity in Picture Elements.
Here card-mod seems to be the only solution.
1 Like
i actually just checked my âFloorPlanâ 
cards:
- type: picture-elements
theme: noctis-grey
card_mod:
style: |
ha-card {
color: #87BF50; border: solid 2px #A0A2A8; box-shadow: none;
}
elements:
- type: state-icon
entity: light.d1
icon: mdi:wall-sconce-flat-outline
name: light
style:
top: 36%
left: 32%
âŚAnd my âiconsâ change color , and it seems to be , due to the
Icons
paper-item-icon-color: â#A0A2A8â
paper-item-icon-active-color: â#87BF50â
in my Theme
Here is the working solution:
- type: state-icon
entity: light.virtual_light_1
tap_action:
action: toggle
style:
bottom: 73%
right: 7%
border-radius: 50%
background-color: rgba(102, 102, 102, 0.2)
card_mod:
style:
state-badge $: |
ha-state-icon {
{% if is_state('light.virtual_light_1','on') %}
color: red !important;
{% else %}
color: cyan;
{% endif %}
}
Well, as i said, above works for me ⌠but i´ll âkeepâ your example" if i run into âproblemsâ another time (edit: as iâve seen this âstate-badgeâ before in some post, but didnât thought it was of my concern, as i didnât had âbadgesâ , but now i realize it must be some new ânamingâ )⌠thou i donât know whether itâs due to the âelements:â tag or what, but my icons changes color cording to Themes, my card-mod is for âborderâ and text(diff from Theme)
Edit2: Heres is start of my âFloorPlanâ View
views:
- title: FloorPlan
type: custom:horizontal-layout
theme: noctis-grey
badges: []
cards:
- type: picture-elements
theme: noctis-grey
card_mod:
style: |
ha-card {
color: #ffffff; border: solid 2px #A0A2A8; box-shadow: none;
}
elements:
- type: state-icon
entity: light.d1
icon: mdi:wall-sconce-flat-outline
name: light
style:
top: 36%
left: 32%
Check it with the default theme.