#Wait You have your style within the

1 messages · Page 1 of 1 (latest)

serene shore
#

Here's how to better structure your card. All your styling goes under styles:. What changes based on the states goes under state:. You don't have to define the icon three times, for example.

# 
type: custom:button-card
entity: light.office1
name: Office
icon: mdi:wall-sconce-flat
styles:
  card:
    - height: 100px
  icon:
    - width: 25%
  name:
    - padding: 5px 0px
    - font-size: 15px
    - text-overflow: unset
    - white-space: unset
    - word-break: break-word
state:
  - value: 'on'
    color: yellow
  - value: 'off'
    styles:
      icon:
        - opacity: 0.5```
winged sage
#

You are a master with frontend man, thanks!
How about now?
http://pastie.org/p/0jHeTt2fSvo2if0nO8HeES

The only thing I couldn't fix is the size of the Master Lights buttons because I don't know what entity I should put there instead of the script one.

also, what is your suggestion to make my UI even better?

#

Once I click on the button (icon of light) will it perform the tap action I have set up there?

winged sage
serene shore
#

I do have a couple of suggestions for you. I have an idea how to handle the Master Lights. (IIRC, you rely on a script because you have a combination of light and switch entities that are controlled.) But let's circle back to that after my next suggestion. In theory, it should make handling the Master Lights (and more) a bit easier.

#

Let's look at a feature of the custom:button-card called templating. Because you have several buttons that are roughly 90% the exact same code (for styling and whatnot), we can turn that into a template and have each button refer to the template. This is also helpful because you only need to make a change to the template and the change applies to all buttons relying on the template. It makes things so much easier than having to hunt through code to make a little change across several buttons. Plus, it cuts down on the number of lines each button uses which makes it easier to read.

#

First, we need to add the template into the Raw Configuration Editor. On your dashboard, click the 3 dots dotsvertical in the top right corner and select Raw Configuration Editor. (WARNING: Be careful in here. The potential to really mess up your dashboard is possible. Even a single space in the wrong spot can play havoc. The possibility will lessen as you become more comfortable with the raw code.)

#

If you've never worked with the Raw Configuration Editor, the first line you will probably see is views:. You want to place the template before views:. So press Enter a few times to push the views section a bit further down. Next, paste in the following code. It is already formatted (indented) to just drop it in.

# 
button_card_templates:
  general_template:
    entity: light.office1
    name: Office
    icon: mdi:wall-sconce-flat
    styles:
      card:
        - height: 100px
      icon:
        - width: 25%
      name:
        - padding: 5px 0px
        - font-size: 15px
        - text-overflow: unset
        - white-space: unset
        - word-break: break-word
    state:
      - value: 'on'
        color: yellow
      - value: 'off'
        styles:
          icon:
            - opacity: 0.5```
#

You'll notice that the template includes an entity, name, and icon but you certainly are not going to have all your buttons with those three items. In the next step, we're going to apply the template to a button and set its entity, name, and icon which will override whatever the template says. While those items technically do not need to be in the template I keep them there just for uniformity.

#

Click the Save button in the top right and then the X to close the Editor.

#

Now, edit one of your buttons and change it to yaml type: custom:button-card template: general_template entity: light.office1 name: Office icon: mdi:wall-sconce-flat

#

And that's it. If all is working well, apply the template to the rest of the buttons that need to look the same.

#

On a side note, templates can also use templates. Here's what I mean. Let's make another template. and paste after the first one but still before the views section.yaml pink_is_on_template: template: general_template state: - value: 'on' color: pinkIf you apply just this template to a button, when you turn the entity on, the icon will be pink instead of yellow. All of the formatting from the general_template will also be applied. This is just an example in case you want to make some "sub-templates" without having to repeat extraneous code.

winged sage
#

Nice! I also guess it would make my dashboard to load faster because it will decrease the amount of lines in my Raw Configuration, am I right?

image.png
#

That's my main dashboard - I'm using it in a dedicated tablet that I bought.
Would love to hear if you have suggestions on how to improve it. (*Just little note tomorrow the 3 buttons on the left will be removed because I'm adding a 2nd AC to this dashboard)
I also guess I need to make those templates to the buttons in the main dashboard (like we just did on the Lights dashboard).

and I'm still eager to know what's your plan on improving the Master Lights buttons

image.png
serene shore
#

I'm not sure if it will make your dashboard load faster. If anything maybe by a few milliseconds. The good thing about the templates is the can be called from any view. So your main view, for example, can use them and they can be uniform across the other views.

serene shore
#

If you can do some groundwork for the Master Lights, my plan will use a single button to call the on and off scripts and show appropriate icons and text. If you would, make an input_boolean (toggle) helper. Settings > Devices & Service > Helpers tab > Create Helper button. Choose Toggle and call it something like Master Lights Helper. Next, update your scripts to turn on/off the helper. So when you press the ON script, it also turns on the helper. Vice versa for the off.

winged sage