Adjust the top panel width and icon size

[vinodnx (Vinod)]

Hi friend
I am new in home assistant, I’m attempting to make my dashboard narrower and the icons smaller. It looks good and is taking up more room on my tablet

any help will much apricated

[LiQuid_cOOled]

check out this thread. @Ildar_Gabdullin has put together a massive comprehensive guide on modifying dashboard CSS styles.

Card-mod - Add css styles to any lovelace card

Here all my posts which may be useful: NOTE: Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3). And also read this important note to create optimized code. In most examples here a code is NOT optimized - just to describe a DOM navigation. Entity card post rotating icon (by @dolodobendan) disabled tap_action Entities card (including some special row elements - button, section, divider) post font-size for Entities card post Entities card with attributes …

[d_sellers1 (Derek)]

The thread mentioned above is awesome but, generally, it shows how to use card_mod on cards. The header is a special case. It can be done but requires doing some stuff with the theme. I just found out about this recently in the HA Discord.

I think a better place to start would be custom/compact header from the Theme cookbook on card_mod’s Wiki.

[LiQuid_cOOled]

Individual card modding is the best way to learn/understand the process before tackling card-mod based themes… Just my opinion

Card-mod - Super-charge your themes!

A while ago, I created card-mod, a custom card* that lets you change various css options for other lovelace cards. Much more skilled people than I have used that to create beautiful and awesome things. Today, I’ve added theme support to card-mod. Your ordinary theme file can now be used to Give cards a flashing border Make that border only flash when a certain entity is in a certain state Make fan icons spin when they are on Change the border color of the badges at the top of the screen dep…

[d_sellers1 (Derek)]

Individual card modding is the best way to learn/understand the process before tackling card-mod based themes… Just my opinion

I totally agree. I’ve been using card_mod for years and not ventured into using it in themes, but given this use case and the examples in the doc, it should be relatively straight-forward. It won’t work without the use of a theme though.

[LiQuid_cOOled]

I’m not an expert by any means, but fairly well-versed with coding. Theme modding is not straight forward, especially if combining several card types into a single theme. I switched from individual card mods to forked JS editing to theme controlled edits and it’s by far the most intensive learning curve of the three.

[Ildar_Gabdullin]

@d_sellers1

The header is a special case

It was already suggested to go to card-mod thread → 1st post → link at the bottom → themes → header
Better to check once by yourself.

[vinodnx (Vinod)]

Thanks a lot . I will check

[LiQuid_cOOled]

Thank you!

[vinodnx (Vinod)]

Hello IIdar,
We all apricated your contribution in HA you are just like a Lion Messi in Automation, and I just touch the football.

your are the best