🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
689

I dived into the wonders of customizing Lovelace triggered by this awesome layout: A different take on designing a Lovelace UI

I’ve come a long way But I’m struggling now with styling a markdown card. This markdown card is within a picture-elements card. I’m still a bit confused about styling lovelace. It’s not consistent or every type of card. I also don’t understand the $ signs in the style definitions $: Couldn’t find a definition of this, searching for it is impossible :slight_smile:

So when I define the card as follows, my styles end up at the wrong place (at least I assume), because they are ignored by the

s with icons I want to layout. 
<hui-markdown-card class="element">
	<ha-card class="type-custom-hui-markdown-card">
		<slot></slot>
		<ha-markdown breaks="" class="no-header">
			<ha-markdown-element>
				<div>
					<ha-icon icon="mdi:sofa"/> 24.2º
				</div>
				<div>
					<ha-icon icon="mdi:bed"/> 24.6º
				</div>
				<div>
					<ha-icon icon="mdi:desktop-tower-monitor"/> 23.91º
				</div>
			</ha-markdown-element>
			<card-mod slot="none"><!---->
				<style>
					ha-markdown-element > font > ha-icon {vertical-align: 3%; opacity: 0.6;}
					ha-markdown-element > p > span {font-family: SF Text; font-size: 5vw; 
					font-weight: 200; margin-left: -0.3vw; letter-spacing: -0.05vw;}
				</style>
				<!---->
			</card-mod>
			<card-mod slot="none"><!---->
				<style>
					
				</style>
				<!---->
			</card-mod>
		</ha-markdown>
    <card-mod slot="none"><!---->
		<style>
        .: '* {display: here}'
		ha-icon {
			color: red
		}
		ha-card {
			top: 65%, left: 60.5%, width: 21%
		}
		ha-markdown-element {
			display: grid, grid-template-columns: repeat(3, 1fr)
		}
      </style>
	  <!---->
	</card-mod>
</ha-card>

Thanks in advance for helping me out.