Thank you for your links, it gives a lot of new ideas. I was just wondering if you were able to use the layout card nested in a stack-in-card ?
Give me an example
In essence, Iām trying to create lights cards where I can change the colour without going to options. At the same time, I am trying to reduce the amount of space needed to control these lights.
The conclusion are after my research
- the colour picker needs enough width but can be reduced in height.
- ātype : lightā allows me to get the brightness and the icon type to change without me coding it.
- second, I want the individual lights to be controlled but ideally also the light group
So in essence, I thought to have each of the 5 spots to be presented first in a light type and then have the light group next to the 2 colour pickers (colour, temperature) in a 25/75 ratio.
OK, create an example card and tell what you want to style in this card, may be we can help.
1 Like
Iām stuck trying to style a markdown-card and wonder if anyone has any pointersā¦
I have some text in the markdown card that Iād like to adjust font-weight and size of, I previously had this working via card-mod using;
style:
ha-markdown:
$: |
p {
font-size: 4em;
font-weight: 300;
}
however, I also need to disable box-shadow for the cardā¦ and this is where I come unstuck, as it is outside of shadow-rootā¦
I try this;
style: |
ha-card {
box-shadow: none;
}
ha-markdown:
$: |
p {
font-size: 4em;
font-weight: 300;
}
Which disables the box-shadow, but now the font size/weight are not set correctlyā¦
Hello,
Here is where Iām at
cards:
- type: vertical-stack
cards:
- type: "custom:stack-in-card"
keep:
background: true
outer_padding: true
margin: true
modus: vertical
triggers_update:
- sun.sun
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
title: Master Colour Spots
cards:
- type: light
entity: light.lamp_colour_l1_master
name: L1
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r1_master
name: R1
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_l2_master
name: L2
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r2_master
name: R2
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: light
entity: light.lamp_colour_r3_master
name: R3
icon: mdi:wall-sconce-flat
hold_action:
action: more-info
card_mod:
style: |
mwc-icon-button {
display: none;
}
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color
full_row: true
hide_state: true
card_mod:
style: |
ha-card {
background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
height: 50px !important;
}
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color_temp
full_row: true
hide_state: true
card_mod:
style: |
ha-card {
background: linear-gradient(to right, rgb(195, 209, 255) 0%, rgb(255,255,255) 50%, rgb(255, 169, 87) 100%);
height: 50px !important;
}
resulting
I would like to get the light buttons inside the stack like the rest of my buttons, example
code associated
styles:
card:
- width: 120px
- height: 100px
- margin: 3px
- padding: 5px
- border-radius: 15px
- background-color: var(--primary-background-color)
- box-shadow: >
[[[
if (states['sun.sun'].state == "below_horizon")
return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
else if (states['sun.sun'].state == "above_horizon")
return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
]]]
which I can easy use with the custom:button-card but I have trouble getting it into the code above.
Finally, I would like to get the slider more in the middle so I can make the cards a bit smaller still.
HI Ildar, a huge post, and still I couldnāt find what I am looking forā¦
using
- type: entities
title: Tradfri hub switch
card_mod:
style: |
.card-header {
background-color: var(--primary-color);
margin: 0px 0px -8px 0px;
}
show_header_toggle: false
entities:
- type: custom:toggle-lock-entity-row
entity: script.reset_ikea_hub
secondary_info: last-triggered
- type: divider
- type: custom:toggle-lock-entity-row
entity: switch.ikea_hub
I try to decrease the height of the header, but it only shifts the entities upward, and doesnt affect the coloring, resulting in:
normally I shift the entities down, to create a little gap,
- type: entities
title: Tradfri hub switch
card_mod:
style: |
.card-header {
background-color: var(--primary-color);
margin: 0px 0px 16px 0px;
}
resulting in
but I would rather decrease the header 8px
Can we do that with the same .card-header,albeit another option?
What is this?
These are not options for stack-in-card.
I still do not understand.
You gave two different cards - stack with light controls & button-card.
What exactly do you want to change?
Better to create a picture with MS Paint to explain your needs.
Hi Marius, check this:
type: horizontal-stack
cards:
- type: entities
title: Title
entities:
- sun.sun
- sun.sun
card_mod:
style: |
.card-header {
background-color: red;
color: white;
}
- type: entities
title: Title
entities:
- sun.sun
- sun.sun
card_mod:
style:
div:nth-child(1):
hui-text-entity-row:
$: |
hui-generic-entity-row {
margin-top: 10px;
}
.: |
.card-header {
background-color: red;
color: white;
}
- type: entities
title: Title
entities:
- sun.sun
- sun.sun
card_mod:
style:
div:nth-child(1):
hui-text-entity-row:
$: |
hui-generic-entity-row {
margin-top: 10px;
}
.: |
.card-header {
background-color: red;
color: white;
padding-top: 0px;
padding-bottom: 0px;
}
1 Like
perfect!
card_mod: &header
style: |
.card-header {
background-color: var(--primary-color);
padding-top: 0px;
padding-bottom: 0px;
margin: 0px 0px 16px 0px;
}
is my new default 
anchor created
Great, better than my solution))
Unfortunately, only one yaml file-wide(((
1 Like
I moved on. Got an other way of getting what I wanted. Thank you.
Another question. I want to use one button card template for my lights but I would like to have for some lights a different icon. Iāve been trying to use variables without success. Any idea how I can do it ?
I think this is not a card-mod issue.
Probably it may be solved by card-mod, but I think it is better to use button-card-template + use variables.
Trying to play around, the name is very overlapping, how can I set the font size?
Tried this entry but not having luck
You may want to check youāre indentation. I havenāt checked of your style will actually work but it definitely wonāt if your indentation is incorrect.
card_mod:
style: |
.name {
font-size: 50%;
}
for the weather card, you could maybe better fix that in the stylesheet css of the resource itself
or, maybe even better fix the card, so it shows the name on a dedicated line, because it will almost always be to narrowā¦
change to:
renderCurrent(stateObj) {
this.numberElements++;
return html`
<div class="current ${this.numberElements > 1 ? "spacer" : ""}">
<span
class="icon bigger"
style="background: none, url('${this.getWeatherIcon(
stateObj.state.toLowerCase(),
this.hass.states["sun.sun"]
)}') no-repeat; background-size: contain;"
>${stateObj.state}
</span>
<span class="temp"
>${this.getUnit("temperature") == "Ā°F"
? Math.round(stateObj.attributes.temperature)
: stateObj.attributes.temperature}</span
>
<span class="tempc"> ${this.getUnit("temperature")}</span>
</div>
<div class="current ${this.numberElements > 1 ? "spacer" : ""}">
${this._config.name
? html` <span class="title"> ${this._config.name} </span> `
: ""}
</div>
`;
}
renderDetails(stateObj) {
return html`
${this._config.name
? html` <span class="title"> ${this._config.name} </span> `
: ""}
`;
}
and a bit of fiddling with the position in the cards css for title:
.title {
position: absolute;
left: 0.5em;
font-weight: 300;
font-size: 3em;
color: var(--primary-text-color);
}
1 Like
Awesome work! Is there anyway I can make sure the text is always aligned to the left? When using smaller screen width the name is more to the center (if you have short city name is more obvious). I tried playing around with the position, but it kept staying the same way.
should do exactly that, and I can not report any other behavior, no matter how I scale the window, it stays nicely aligned. Maybe try a px value?
note though this is an ugly hack of Bramās card, and when not using the name: field in the card config, it leaves an empty lineā¦
Ive asked Bram to have a look, but heās very busy, though he might have a look when things calm down a bitā¦
Apologies, I thought that piece was meant for card_mod. I then noticed leaving it out didnāt even matter. So then I figured it was also meant for the weather-card.js. Works great!
I need some help with something that is probably simple, I want to hide the header of the sensor card.
The sensor card is a hui-custom-card in a picture elements card.
Iāve tried this:
- type: custom:hui-element
card_type: sensor
detail: 2
entity: sensor.pool_temperature
graph: line
card_mod:
style: |
ha-card {
--ha-card-background: "rgba(0, 0, 0, 0.3)";
box-shadow: none;
color: var(--primary-color);
.header: {display:none!important};
};
But it still shows the header:
If I enter the display:none manually in the css then it works:
So I guess itās me fumbling with the addressing of it?