@Mariusthvdb
Hi, a bit later I will try to come back with these issues:
- Horrible changes for input_number, input_text, input_select.
- This history-graph issue.
You may ping me by PM.
I used the following to get rid of the label, the background, the underline and resize the whole remaining input_select (the later was tricky). (Update: decreased the area the dropdown icon occupies.) Though when it selected/active and when the mouse is over, the gray background reappears temporarily.
type: entities
entities:
- entity: input_select.test_select
style:
.: |
:host {
--mdc-select-fill-color: var(--card-background-color);
}
hui-generic-entity-row ha-select$: |
#label {
display: none;
}
.mdc-select__anchor {
height: 38px !important;
}
.mdc-select__anchor::before {
height: 23px !important;
}
.mdc-select__dropdown-icon {
margin-left: 0px !important;
margin-right: 0px !important;
}
.mdc-line-ripple::before, .mdc-line-ripple::after {
border-bottom-style: none !important;
}
Hi,
Iām trying to modify an input-select entity. Many of the examples posted donāt work with the new material design components but Iāve been successful in modifying everything I need to except the line height of items in the dropdown.
I can change overflow: visible in chrome inspector to get my desired results but none of my attempts have proved successful in translating that to card-mod.
Any advice would be much appreciated!
Without testing. I can see in instepctor this:
So most probably, you can set it directly with this in theme or with card-mod in :host
Thanks for the reply! I think Iām on the right track as I can add āline-height: 3rem;ā to the inspector but Iām still having problems getting to work in card-mod. Hereās what I have. Additional insight is appreciated!
type: entities
entities:
- input_select.media_player_targets
show_header_toggle: false
card_mod:
style:
.: |
ha-card { --mdc-icon-size: 0px; --mdc-menu-item-height: 50px;
--mdc-typography-subtitle1-line-height: 50px !important;
--mdc-typography-subtitle1-font-size: 30px !important;
--mdc-deprecated-list-item-height: 100px;
}
:host
mwc-list ::slotted([mwc-list-item]:not([twoline])), mwc-list ::slotted([noninteractive]:not([twoline])) {
line-height: 3rem;
}
If you are using and setting that many css-variables already, why donāt you just set the shown one in the same way at the same place for the same purpose?
Unfortunately, since the update I also have a problem that my input field looks terrible.
Previously I had a suitable selection list and now this.
If I change the last entry āposition: absoluteā in the Chrome Inspector to āposition: inheritā,
I at least get a selection window.
Unfortunately, the following card_mod entry has no effect.
I am grateful for any help.
Can anyone help me with the following:
I want to change the icon when a state (value) of a sensor is higher then the other state (value) of a different sensor.
Can anyone help me with this?
I tried it like this but it is not workingā¦
style: |
:host {
--paper-item-icon-color: {% if is_state("daily_sunpanel_deliver_grid" > daily_power_short -%} darkorange
{% else %} grey
{% endif %};
There are issues with your Jinja template, but before offering a suggested correction, it would be helpful to know which Lovelace card you are using this on.
Apart from anything else, the variable you are setting here is deprecated in core Lovelace in recent versions of HA.
Wrong template.
Use Developer tools ā Template for testing.
Any way to increase the size of the weather forecast icons in the weather forecast card?
I was able to increase the font sizes and the icon area, but not the icons themselves. Their size seems to be limited by a viewbox attribute on the svg element. Not being a CSS expert, I have no idea how to override it.
ha-card {
font-size: 18pt;
}
ha-card div.forecast div.temp {
font-size: 18pt;
}
ha-card div.forecast div.forecast-image-icon {
--mdc-icon-size: 100px;
width: 100px;
height: 100px;
}
Find the viewbox āattributeā in the .js file for the card, and change it there 
ā¦ iāve been trying for a day to find other ways, so eventually i just changed the in .js file , not hard to find next time the card is āupdatedā ( so easy to change againā¦ a few time a year, at the most ā¦i hope
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.