Horizon-card customize with card-mod.

[WarC0zes]

Hi, Already, a big thank you for taking over the sun-card project.

I use sun-card and I customized the font with card-mod to be able to display well with 2 cards side by side. code:

              - type: custom:sun-card
                showAzimuth: true
                showElevation: true
                card_mod:
                  style: |
                    .sun-card-footer .sun-card-text-subtitle {
                        font-size: 0.91rem !important;
                        color: var(--primary-text-color) !important;
                    }
                    .sun-card-header .sun-card-text-subtitle {
                        font-size: 0.91rem  !important;
                        color: var(--primary-text-color) !important;
                    }
                    .sun-card-header .sun-card-text-time {
                        font-size: 0.8rem  !important;
                        color: var(--primary-text-color) !important;
                    }
                    .sun-card-footer .sun-card-text-time {
                        font-size: 0.8rem  !important;
                        color: var(--primary-text-color) !important;
                    }
                    ha-card > div > div.sun-card-body {
                      padding-top: 0;
                    }
                    ha-card > div > div.sun-card-footer > div:nth-child(1) {
                      padding-top: 0;
                    }
                    ha-card > div > div.sun-card-footer > div:nth-child(2) {
                      padding-top: 0.5rem;
                    }               

with Horizon-card by default:

I want to do the same with horizon-card, but it's impossible. When I modify the code with the editor it works and when I save it comes back to the default values.

code:

type: custom:horizon-card
fields:
  azimuth: true
  dawn: true
  dusk: true
  elevation: true
  noon: true
  sunrise: true
  sunset: true
card_mod:
  style: |
    ha-card > div > div.horizon-card-header > div:nth-child(1) >
    span.horizon-card-field-name {
      font-size: 1rem !important;
    }
    ha-card > div > div.horizon-card-header > div:nth-child(2) >
    span.horizon-card-field-name {
      font-size: 1rem !important;
    }

after save:

Can you make the modifications possible with card-mod or do you have a workaround?

[captSL]

Same for me. I'm not able to apply any styling with card-mod to this.

[avataar]

I'm not sure why it happens but as part of the major changes I'm working on I also reworked the css and it seems to work with card-mod. So while I can't offer you a fix right now it will work in the very near future.

[WarC0zes]

@avataar Thank you for this information, I will wait for a next release.

[ildar170975]

card-mod style does not stick. Consider this small (and useless styling):

The color: red is applied - check in Code Inspector.

Then save the card, check with Code Inspector - the style is lost. Reopen the Editor - still lost:

Type a "whitespace" somewhere - the style is here again:

[avataar]

I just opened the above PR that coincidentally should also fix this issue. If you could give a try, I'd appreciate it. You can either build a version from the branch or download lovelace-horizon-card.zip (built from the branch).

[ildar170975]

@avataar I downloaded the zip file and copied js into community/lovelace-horizon-card. Seems that styles are applied & consistent after F5:

type: custom:horizon-card
card_mod:
  style: |
    .horizon-card-header {
      margin-top: 0px !important;
    }
    .horizon-card-graph {
      margin-top: 0px !important;
      margin-bottom: 0px !important;
    }
    .horizon-card-footer {
      margin-bottom: 0px !important;
    }
    .horizon-card-footer > * {
      margin-top: 0px !important;
    }
    .horizon-card-field-name {
      font-size: 0.8rem !important;
      color: red !important;
    }
    .horizon-card-field-value {
      font-size: 1.8rem !important;
      color: cyan !important;
    }

[Opontios]

@ildar170975 How can the below be applied to the new version of the card? Thanks

card_mod:
  style: |
    ha-card {
      --ha-card-background: transparent;
      box-shadow: none;
    }

[WarC0zes]

@Opontios

card_mod:
  style: |
    ha-card {
      --ha-card-background: transparent;
      box-shadow: none;
    }

Hi, like this:

type: custom:horizon-card
moon: true
fields:
azimuth: true
elevation: true
moonrise: true
moonset: true
moon_phase: false
time_format: 24
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
box-shadow: none;
}

[ildar170975]

@Opontios Another example:

type: custom:horizon-card
card_mod:
  style: |
    ha-card {
      --ha-card-background: red;
      box-shadow: 5px 5px 8px red, 10px 10px 8px green, 15px 15px 8px blue;
    }

[fredrikpersson92]

Has anyone been able to style the grey lines? hc-lines in the web inspector

[WarC0zes]

Has anyone been able to style the grey lines? hc-lines in the web inspector here's for hc-lines:

card_mod:
style: |
:host {
--hc-lines: yellow !important;
}

[fredrikpersson92]

Legend! Thank you On 10 Jun 2024, 06:07 +0200, WarC0zes @.***>, wrote:

Has anyone been able to style the grey lines? hc-lines in the web inspector here's for hc-lines: card_mod: style: | :host { --hc-lines: yellow !important; } — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>