Because you are not exactly following Docs - it contains an example for Entities card.
No, because I tend to provide a closing ā}ā bracket:
Have you tried clearing the cache on your phone? In the ios app code also works.
Settings > Companion app > Debugging > Reset frontend cache
Hi im not into css / coding but im learning slowly.
is there a way to format the text size along a line so as to make some text smaller?
any help would be much appreciated, thanks
Only a text in a dedicated element (h3, prev, ā¦) may be styled.
Or, in case of a Markdown card, you can use ābā tags to make a text bold.
I have a markdown card with dynamic heigh. It includes some h1/h2 + weather forecast for today and tomorrow - each forecast is a variable coming from a sensor (weather website), and each is in its own separate paragraph. Each forecast could be 1-3 lines (on mobile even 1-6 lines).
How can I make the height of the markdown card dynamic? I sometimes just get part of todayās weather and canāt see next day.
For context - the dashboard has a āsectionsā layout, and the markdown is the top element with āfull width cardā setup
grid_options:
columns: full
rows: 6
Basically I want ārows:6ā to to be adjusted dynamically based on the actual markdown height
- type: custom:mushroom-template-card
primary: Deur Openen
tap_action:
action: fire-dom-event
browser_mod:
service: script.deur_openen
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
text-align: center !important;
.: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
width: 160px;
height: 100px !important;
}
ha-card:active {
transform: scale(1.02);
transition: 0s;
}
how do I center the button ?
which button?
this seems centeredā¦:
btw, why use template card if you dont use templates in the mushroom config?
might just as well use a core type:button
kiss
1 Like
type: vertical-stack
cards:
- type: picture-entity
camera_image: camera.deurbel_profile_name
camera_view: live
entity: camera.deurbel_profile_name
show_state: false
name: livebeeld
- type: custom:mushroom-template-card
primary: Deur Openen
tap_action:
action: fire-dom-event
browser_mod:
service: script.deur_openen
my excuses, it was half of the code. the ādeur openenā button has to be in the center ā¦
well do as I suggested, use a core button card, and it auto centers
you can ditch the browser_mod stuff too, just have the button execute the script
type: vertical-stack
cards:
- type: picture-entity
entity: camera.deurbel_profile_name
camera_view: live
- type: button
name: Deur Openen
tap_action:
action: perform-action
perform_action: script.turn_on
data:
entity_id: script.deur_openen
heck, you can even ditch the complete button and set the action to the picture-entity if you want 
1 Like
Howdy, I am stumped after days of trying to change the āha-tile-badgeā icon on a Tile card (the small gray clock in the attached image).
The example Iām using is a climate sensor (thermostat). The badge changes based on the hvac action but I want to change it with card-mod depending on different situations.
Iāve had great success changing the main icon with if/else statements in the card-mod style, but can do nothing but hide the badge icon. To hide it, I used:
ha-tile-badge { display: none; }
Iām wondering if it has something to do with the shadow DOMs but canāt quite decipher what to do.
Thanks for any help.
thanks to @arganto I learned today we can mod the view badges after all (I had repeatedly posted we couldnāt, so sorry for that), using mod card and the hui- version of the ha card to mod
- type: custom:mod-card
card:
type: custom:hui-entity-badge
show_name: false
show_state: true
show_icon: true
entity: sensor.processor_use
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 28px;
}
and can even colorize the icon using
color: {{'var(--ok-color)' if states('sensor.processor_use')|int(0) < 14
else 'var(--alert-color)'}};
inside the same mod.
which is very nice.
I dod blow up my processor with several syntax errors there, so be carefulā¦
now looking for a way to
use the config.entity in those templates and make the mod easily transferable to other badges
a way to set this icon size in card-mod- theme, so we dont have to adjust each and every individual badge.
(aware that is for the other thread, but so intricately related, I keep it here firstā¦)
You seem to miss a post where it was described how to style badges w/o mod-card.
I am not sure. at all. anymoreā¦
I figured it was not possible at all, then Arganto told me it is with mod card, and I had known that, and had posted about that (I really truly didnt remember, still dontā¦) and now you tell me there is a post without mod-cardā¦?
for now I have to go with this
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 28px;
color: {{'var(--success-color)' if states('sensor.processor_use')|int(0) < 24
else 'var(--error-color)'}};
}
state-display {
color: pink;
}
and am looking for a way to set the background
if all of the above can be done without mod-card, and with the release version of card-mod, I really want to knowā¦
Argantoās way is nice & does not need manual edit of card-mod.js.
My way needs manual edit of card-mod.js, probably both ways have pro & contra.
wait I now found this š¹ Card-mod - Super-charge your themes! - #1765 by Ildar_Gabdullin
card-mod-view-yaml: |
hui-masonry-view:
$:
hui-view-badges $:
hui-badge:
hui-entity-badge $: |
.badge {
background-color: cyan !important;
--badge-color: red !important;
--mdc-icon-size: 32px !important;
--primary-text-color: orange !important;
}
does that rely on your hacked version too? I could set the view to sections view, and only use the --mdc-icon-size (that is, until they respond to my FR/Discussion and add a theme variable for the icon size )
talking about theming, it would be cool if we could also limit the horizontal space (width) of the complete badge area to a single column. maybe a nice challenge for card-mod themes tooā¦
No, it is a ānormalā way with addressing a badge from a hui-view level.
Can be used in a theme and this is a very hard way (difficult to use for a particular entity).
I sure is (though be careful).
would you know how to set the background of the badge?
we can set background on that state-display, but not yet found the correct element to colorize the badges background completely
on hui-entity-badge ha-badge .badge
as usual - 1st post ā ā¦ ā badges 2024.8
but it needs a āhackā
This is working on chrome, but not Firefox and Fully Kiosk Browser. Any idea how to achieve this into these two? At least in FKB, would be great.