#Colours and formatting

1 messages · Page 1 of 1 (latest)

bronze iron
#

Despite lots of upgrades I still have problems with colours.

I'm using sections and I generally use TILE CARDS. As I can't figure out how to change colours easily - I end up using card-mod. Until a couple of months back I used card-mod to put the text on the tite of the tile - right-justified.. But recently that's stopped working on all my cards... ie the text i right justiufied but not on the extreme right side of the card and not predicatable where. for example....

card_mod:
  style: |
    ha-card {
      border: 1px solid darkcyan;
      text-align: left;

text-align: left is normal anyway and works as expected. text-align: right; no longer puts the text on the extreme right. WHY? And why do we need card-mod to do something so straightforward anyway?

See in the image - Ext Blue has text-align: right; whereas Pergola red has text-align: left (I could have left the latter out). Unil recently the Ext Blue tile text woulc have been over on the right, not just right-justified - why is this impoetant - without pudhing it to the right, diffeent amounts of text ersult in tiles which don't match..

Has anyone any idea WHY? I'm using the very latest non-beta HA on Docker.

Also in the above using green only as an example - color: green; does nothing - same with colour: green;

image.png
silver barn
#

type: tile
entity: sensor.ir_bep_temperature
card_mod:
style:
.: |-
ha-state-icon {
{% if states(config.entity)|float(0) > 26 %}
color: rgba(255, 106, 106,1) !important;
{% elif states(config.entity)|float(0) > 21 %}
color: rgba(99, 184, 255,1) !important;
{% else %}
color: rgba(0, 191, 255,1) !important;
{% endif %}
}
ha-card {
--ha-card-background: rgba(255, 228, 181, 0.3) !important;
}
ha-tile-info$: |-
.primary {
font-size: 20px !important;
font-weight: 500 !important;
color: white !important;
padding-bottom: 4px;
}
.secondary {
font-size: 12px !important;
color: rgba(24, 188, 242, 1) !important;
}
ha-tile-icon$: |-
.shape::before {
{% if states(config.entity)|float(0) > 26 %}
background-color: rgba(255, 106, 106,1) !important;
{% elif states(config.entity)|float(0) > 21 %}
background-color: rgba(99, 184, 255,1) !important;
{% else %}
background-color: rgba(0, 191, 255,1) !important;
{% endif %}
opacity: 0.3 !important;
}
layout_options:
grid_columns: full

image.png
#

This one for Text format

          .primary {
           font-size: 20px !important;
           font-weight: 500 !important;
           color: white !important;
           padding-bottom: 4px;
          }
          .secondary {
            font-size: 12px !important;
            color: rgba(24, 188, 242, 1) !important;
          }```
bronze iron
#

Good but doesn't seem to address the right formatting at all - and the new heading card as of 2024.10 - how would you change text color, background, border on that?

silver barn