Hi,
I hope this is an ieasy fix.
Integrated Sensibo and ‘climate.stue’ show up as an entity (and a switch climate.ac).
I can see all the states and it all works great.
Tried to add following to ui-lovelace:
- type: vertical-stack cards: - type: thermostat entity: climate.stue
Card show up, but it is a bit off with the circle;
… and, I would like to have it as the image from the thermostat-page;
one of the colors used in your theme is not opaque/transparent. Figure out which one it is and make it transparent. You may need card modder if you only want to make it transparent on that card.
And before you ask, there’s no easy way to figure out which color is causing the problem. You can use the dev tools in chrome to figure it out but if you don’t know CSS and inheritance well, you’ll struggle.
@petro so far I’ve figured out that ‘–paper-card-background-color’ is the one that fills the card. It is the way the gauge is created I think will cause this as unsolvable (unless you’re a developer) as long as I wan the card to be transparent. It works great as long as I use any color as card-color (white, black etc).
This is most likely going to be a secondary color of some sort.
I don’t think anything can be done. It appears as if the object that covers the pie sections uses the background color. So when you make the background transparent, it makes the item that covers parts of the triangle transparent. You end up with that weird looking pi chart. Sorry bud.
@petro I kind of came to the same conclusion, it is not made for using transparent card background.
I switched to ‘simple-thermostat’ and of course bumped into a CSS issue also in this. I’ve seen two or three questions about the same thing, but they have not gotten any answer;
I can control all aspects of the card by CSS except the active chosen mode (with the frame). It seems to always be dark grey. I can change colors of all the other text and icons, and change themes, but the chosen mode always return this dark grey color.
Could you or anybody throw a quick look at this and come up with a suggestion?
PS; according to the doc @ git (https://github.com/nervetattoo/simple-thermostat#css-vars-for-theming) I should be able to use:
--st-mode-active-background --st-mode-active-color
But those do not change anything.
For the icons, I used undocumented:
–iron-icon-fill-color
What are you trying to do with the framed one?
Simply be able to change the colors to be the same as the rest, including the frame itself.
I’ve asked the developer also, so far without any reply.
you may not be able to override it. I don’t use the card myself so I can’t check to be sure.
too bad that it isn’t editable… Thx for the help, bro…
@petro Look inside the .js file, at the code:
<mwc-button ?disabled=${e===t} ?outlined=${e===t} ?dense=${!0} @click=${()=>this.setMode(e)} > ${i(n.icon)} ${s(e,n)} </mwc-button>
The ‘disabled’ is causing this behavior. If you use Chrome dev and remove ‘disabled’ from the button style, it works as expected.
I would assume what he (the developer) wanted to achieve was the opposite - non-selected modes should be disabled and active mode should be with color…
Anything we can do to override this from theme/styling (card-modder) ?
Just remove that line from the js file and reload and see if you can style it
@petro Tried, seems HA doesn’t update from the .js (??), do I need to trigger a re-load of the .js after deleting the line from the file?
depends on your browser. CTRL+F5 clears cache and reloads the page
Had to clear the Chrome cache manually - works like a charm 
Now it is blue!
@TheStigh could share your yaml and css information to make the card like you did? I cannot figure out how to get the modes along the bottom like you did.
This is what I have so far, but it does not put in any modes (I tried to put an icon next to humidity, but it didn’t let the page load so I commented it out):
- type: horizontal-stack
cards:
- type: 'custom:simple-thermostat'
entity: climate.thermostat
icon:
Auto: mdi:alpha-a-circle-outline
Off: mdi:power
Heat: mdi:fire
Cool: mdi:snowflake
modes:
Auto:
icon: mdi:alpha-a-circle-outline
Off:
icon: mdi:power
Heat:
icon: mdi:fire
Cool:
icon: mdi:snowflake
step_size: 1
name: Ecobee
sensors:
- entity: sensor.thermostat_4_123
name: Humidity
# icon: mdi:water-percent
This is what the card looks like:
You need to verify the state inside states page and use that verbiage as your modes. Do not use what you see in the UI as mode names. Also, yaml fields should always be lowercase. Lastly, you should study the documentation for that custom component. In the modes section, it describes that you cannot use ‘off’ without quotes as a mode.
Hi petro,
Thanks for replying. I did confirm the hvac modes in the dev states page and I have them correct as they are listed there. I also tried wrapping off in both " (double quotes) and ’ (single quotes) as it shows in the card’s instructions. I also changed the names of the modes to all lowercase. Nothing worked. I was following another user that posted his yaml information and he had it set up like I did (even the capital letters). I am at a lose as to why this is not working and I am not sure how to troubleshoot at this point.
I would expect this configuration to work:
- type: 'custom:simple-thermostat'
entity: climate.thermostat
step_size: 1
icon:
auto: mdi:alpha-a-circle-outline
'off': mdi:power
heat: mdi:fire
cool: mdi:snowflake
sensors:
- entity: sensor.thermostat_4_123
name: Humidity
modes:
auto:
icon: mdi:alpha-a-circle-outline
'off':
icon: mdi:power
heat:
icon: mdi:fire
cool:
icon: mdi:snowflake
That was essentially how my code ended up, but I changed a couple things to match where you put them. It still does not work. I wonder if the issue is with me using the horizontal stack option. I will play around with it some more. Thank you for your assistance. I appreciate it. 