Service Button

Configuration Frontend
1

Is it possible to change the color of the text in Service Button? Code as below:

- service: homeassistant.turn_on
            service_data:
              entity_id: script.power_onoff_livingroomtv
            style:
              left: 60.10%
              top: 10.02%
            title: Television
            type: service-button
2

Yes, with the card-mod custom card.

3

Thanks. Will try it out.

4

Where do you put this code? In the Lovelace YAML or Config.YAML?

- type: entities
            style: |
              ha-card {
                color: red;
              }
            entities:
              - script.power_onoff_livingroomtv
5

The answer to your question is it goes in your lovelace configuration.

But if you need to ask this question you probably aren’t ready to worry about the colors of your buttons. I mean this in the kindest way possible. If you don’t know the difference between the two and what goes where I would start with learning that to give yourself a solid foundation before you worry about coloring stuff. You’re in for a world of frustration if you don’t.

6

Thanks for the fast reply. As I just started HA not long ago (less than 1 month) better to be sure before I wasted more time testing. Problem is HA documentation assume you have a certain level of knowledge which some of us newbie may not have. Back to my problem. I’m trying to get a better contrast for the wording in my floor plan. See below

FloorPlan.PNG
FloorPlan.PNG1807×524 301 KB

7

Wow. That’s a nice floor plan!

Well at the most basic level your configuration yaml is the back end stuff. Sensors, integrations, automations. Lovelace is the front end so your cards, views. In your case you wanted to change something in the front end so it will be in the Lovelace config.

To use card-mod you need to have a basic understanding off CSS and how the lovelace components are structured.

This is part of one of my lovelace cards where I set some styles for both the card and an entity. If you’ve got a basic understanding you should be able to use this to figure out how to change what you need to.

type: entities
title: Home Assistant Monitor
icon: mdi:home-assistant
show_header_toggle: false
style: |
  .card-header {
    font-size: 22px;
    font-variant: small-caps;
  }
entities:
  - type: custom:template-entity-row
    entity: sensor.uptime
    secondary: "{{ states('sensor.ha_uptime') }}"
    style: |
      :host {
        --paper-item-icon-color: var(--state-icon-active-color);
      }
8

Thanks for your help. Will check it out.