Red Color from Cards Does Not Appear

[mermelmadness]

Sorry to open another issue, but some cards don't display all colors using this theme:

[th3jesta]

I would try applying the button-large or button-small classes to the cards.

[mermelmadness]

No effect....as they're not buttons.

[th3jesta]

The class names only correspond to their intended use. They will work on any card. Please share the full yaml for your card, and we'll go from there.

[mermelmadness]

Here's my initial code. Where should the class: button-small go?

cards:
  - type: gauge
    entity: sensor.cpu_temp_f
    min: 35
    max: 85
    needle: true
    severity:
      green: 0
      yellow: 65
      red: 75
    name: CPU Temp
    theme: LCARS Classic
  - type: gauge
    entity: sensor.processor_use
    min: 0
    max: 100
    name: CPU Usage
    severity:
      green: 0
      yellow: 75
      red: 90
    needle: true
    theme: LCARS Classic
  - type: gauge
    entity: sensor.memory_use_percent
    min: 0
    max: 100
    name: Memory Usage
    severity:
      green: 0
      yellow: 75
      red: 90
    needle: true
    theme: LCARS Classic
  - type: gauge
    entity: sensor.disk_use_percent
    min: 0
    max: 100
    severity:
      green: 0
      yellow: 75
      red: 90
    name: Disk Usage
    needle: true
    theme: LCARS Classic
columns: 2
square: false

[th3jesta]

First, rather than setting the theme on the cards themselves, you should set them as described in the instructions, that way you'll get the theme applied to the sidebar and header bar, as well as the font! Then you can add classes to the cards individually. So where you have theme: LCARS CLASSIC, instead you would have the following:

card_mod:
  class: button-small

...making sure that your indentations are correct (typing this from mobile on vacation). This theme incorporates more advanced usage of the card-mod integration that applies the theme to all of Home Assistant instead of just the individual cards. Thanks for your patience. This is helping me understand how need to shore up the documentation!

[mermelmadness]

I typically don't like to use YAML unless the Visual Editor isn't supported. I don't see a way to set the card_mod from the Visual Editor, so is it best for me to make the card using the GUI first then add

card_mod:
  class: button-small

if the colors don't work right?

Also, making a new Dashboard using the LCARS theme does not set the sidebar as pictured in the Github, unless I'm doing it wrong.

[mermelmadness]

(typing this from mobile on vacation)

Dude, this can definitely wait. Enjoy your time and the holidays and we can come back to this when you're back home.

[th3jesta]

Thanks! We'll definitely get you set up with it when I get back. It's worth it!

[mermelmadness]

Let me know when you get back. I'm ready when you are.

[th3jesta]

Driving back tomorrow. Look for a reply tomorrow evening or the day after!

On Tue, Dec 27, 2022, 7:25 PM mermelmadness @.***> wrote:

Let me know when you get back. I'm ready when you are.

— Reply to this email directly, view it on GitHub https://github.com/th3jesta/ha-lcars/issues/8#issuecomment-1366278542, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJHA723FJXKIPTGS2DODL5LWPOCI7ANCNFSM6AAAAAATC3JIGU . You are receiving this because you commented.Message ID: @.***>

[th3jesta]

Okay, back from vacation. So much easier to make sense of all of this from my PC as opposed to my phone. First, please confirm for me that you have enabled the theme globally via one of the options indicated here. This will apply the theme to the sidebar and the header bar, and the font everywhere it can be set. Once you've done that, we'll move on to the dashboard. Since the theme was enabled globally per the previous paragraph, we do not need to set the theme on the individual cards. All we need to do is add the classes to each card, depending on the style you want to set. Add a card to the dashboard, and then edit the card. You'll see a link to edit the YAML for that card (easier to do this than the YAML for the entire dashboard). This is example YAML for a button card:

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: switch.speakers
show_state: true
icon: mdi:speaker-multiple
card_mod:
  class: button-bullet

The relevant portion is:

card_mod:
  class: button-bullet

Lemme know how this goes.

[mermelmadness]

So that seems to have worked now. Red color still missing from gauge cards. The picture is my existing dashboard copied to a new layout. I don't have any button cards. How do I get that wrap-around border?

[th3jesta]

Okay, a few things:

• You've selected the LCARS Classic theme which has no red color in it. Red is included in the Default theme.
• Please review the portion of the documentation about the classes; this explains how to use them and what they do, such as the "wrap around" border you mentioned. I suspect you were referencing the top and lower bars above and below a section of cards. I'm also going to expand the documentation of the classes to make it easier to understand; I realize it's lacking.
• Your sidebar still doesn't look right to me, as it's missing the outer radius in the top left. I'd like to investigate this further, but first, I would recommend ensuring you have the latest release. Can you send a screenshot of the expanded sidebar, please?
• You have not enabled the clock as instructed in the installation instructions. This will cause the right-side of the header to not render correctly.

[th3jesta]

I have updated the classes documentation to add more clarity. Please let me know if you find any deficiencies in it. Also, now that the holidays have wound down I can be much more attentive and responsive to help you out.

[mermelmadness]

First, the Default theme still does not show any red in my gauge cards.

Second, I don't really understand how classes work or where they belong in the YAML code configuration. Would it be possible to post screenshots of formatted cards and their corresponding YAML code as examples?

[th3jesta]

Sure, but before that, in your screenshot, where are you expecting red? I see a lot of red, and thought that's where you were expecting it. I'm not familiar with the gauge cards as I've never used them.

Here's an example of how to get to the YAML for a Markdown card and apply the header class to it:

[th3jesta]

Oh, I see, gold in the gauge should be red. My apologies for the goose chase. I'll have to work on this to fix the colors of the gauges themselves.

[mermelmadness]

Ok, got the header working, just gotta finagle the layout a bit. For the gauges, it goes green, yellow, red (in most cases).

[mermelmadness]

Sort of works...

[th3jesta]

Ah, if you add # in front of your text, that makes the text size H1 (largest size) as in my screenshot. Check out the Markdown card reference in HA documentation to learn how to format text in Markdown cards.

I figured out the red issue. It was a missing # on the color code defined in the theme, causing it to render transparent. (facepalm) Pushing the fix now and packaging it into a hotfix release.

[th3jesta]

Color is fixed in Release HA-LCARS-1.7.1

Now, regarding your header and sidebar, I'm beginning to suspect you may have another add-on that's modifying either one or both, since the custom styles appear to be applying everywhere but there. Do you have any kind of custom header or sidebar, or anything else that might conflict?

Also, at the bottom of the readme, I added a link to the new Discord server I set up for HA-LCARS.

[mermelmadness]

Joined the Discord. Ping me @mermel

[th3jesta]

Closing this since the original issue has (finally) been addressed. Will continue support for sidebar and header in Discord.