How to reduce the space in red area

[sasukebinbin]

[ktownsend-personal]

I agree! This is the very first thing I wanted to change when I started using this card. I love the simple and clean layout of this card, but that margin is enormous when you reduce the heading size. I'm trying to use this on a tablet wall panel where space is at a premium.

[ktownsend-personal]

@sasukebinbin today's release added a template variable for the heading margin to fix this: --banner-card-heading-margin

[sasukebinbin]

Awesome

[gasm67]

Would it be possible for someone to give me some advice on how to accomplish this (possibly with an example) ? I have been trying to follow the instructions in the repository, and this is the only thing I'm having difficulty in understanding.. Many Thanks in advance....

[ktownsend-personal]

@gasm67 you can put the settings in your theme file, which is likely in your /config/themes folder.

Here are a few settings I have in my theme for this card:

  banner-card-heading-size: 1.5em
  banner-card-media-title-size: 0.7em
  banner-card-entity-value-size: 1.2em
  banner-card-spacing: 0.135em
  banner-card-heading-margin: 0.3em

[gasm67]

Thanks for the reply.

If I can re-iterate...

I have a themes.yaml file with lots of themes contained within.

So which ever theme I am wanting to use, I should add the lines you have provided into the theme.

For example

sunset: background-image: "radial-gradient(at 50% 50%, rgb(244, 67, 54) 0%, rgb(11, 49, 97) 100%)"

Main colors

primary-color: "#e14b4c" # Header accent-color: "#E45E65" # Accent color dark-primary-color: "var(--accent-color)" # Hyperlinks light-primary-color: "var(--accent-color)" # Horizontal line in about

Text colors

primary-text-color: "#FFFFFF" # Primary text colour, here is referencing dark-primary-color text-primary-color: "var(--primary-text-color)" # Primary text colour secondary-text-color: "#5294E2" # For secondary titles in more info boxes etc. disabled-text-color: "#7F848E" # Disabled text colour label-badge-border-color: "green" # Label badge border, just a reference value

Background colors

primary-background-color: "#433557" # Settings background secondary-background-color: "#383C45" # Main card UI background divider-color: "rgba(0, 0, 0, .12)" # Divider

Table rows

table-row-background-color: "#353840" # Table row table-row-alternative-background-color: "#3E424B" # Table row alternative

Nav Menu

paper-listbox-color: "var(--primary-color)" # Navigation menu selection hoover paper-listbox-background-color: "#433557" # Navigation menu background paper-grey-50: "var(--primary-text-color)" paper-grey-200: "#414A59" # Navigation menu selection sidebar-selected-text-color: "#e14b4c" sidebar-selected-icon-color: "#e14b4c"

Paper card

paper-card-header-color: "var(--accent-color)" # Card header text colour paper-card-background-color: "#433557" # Card background colour paper-dialog-background-color: "#434954" # Card dialog background colour paper-item-icon-color: "var(--primary-text-color)" # Icon color paper-item-icon-active-color: "#F9C536" # Icon color active paper-item-icon_-color: "green" paper-item-selected-_background-color: "#434954" # Popup item select paper-tabs-selection-bar-color: "green"

Labels

label-badge-red: "var(--accent-color)" # References the brand colour label badge border label-badge-text-color: "var(--primary-text-color)" # Now same as label badge border but that's a matter of taste label-badge-background-color: "#2E333A" # Same, but can also be set to transparent here

Switches

paper-toggle-button-checked-button-color: "var(--accent-color)" paper-toggle-button-checked-bar-color: "var(--accent-color)" paper-toggle-button-checked-ink-color: "var(--accent-color)" paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)" paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)" paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"

Sliders

paper-slider-knob-color: "var(--accent-color)" paper-slider-knob-start-color: "var(--accent-color)" paper-slider-pin-color: "var(--accent-color)" paper-slider-active-color: "var(--accent-color)" paper-slider-container-color: "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat" paper-slider-secondary-color: "var(--secondary-background-color)" paper-slider-disabled-active-color: "var(--disabled-text-color)" paper-slider-disabled-secondary-color: "var(--disabled-text-color)"

Google colors

google-red-500: "#E45E65" google-green-500: "#39E949"

#Banner Card Changes

banner-card-heading-size: 1.5em

banner-card-media-title-size: 0.7em

banner-card-entity-value-size: 1.2em

banner-card-spacing: 0.135em

banner-card-heading-margin: 0.3em

Thanks, Graeme

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

From: ktownsend-personalmailto:[email protected] Sent: 07 November 2020 20:32 To: nervetattoo/banner-cardmailto:[email protected] Cc: gasm67mailto:[email protected]; Mentionmailto:[email protected] Subject: Re: [nervetattoo/banner-card] How to reduce the space in red area (#76)

@gasm67https://eur05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fgasm67&data=04%7C01%7C%7Ca3b83b3739e241e0d9aa08d8835c34a9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637403779320056209%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=hM8Co8wQDfI%2B8sKYCmjzIhLTYGu2lt82VT5rB%2Bpe3yM%3D&reserved=0 you can put the settings in your theme file, which is likely in your /config/themes folder.

Here are a few settings I have in my theme for this card:

banner-card-heading-size: 1.5em

banner-card-media-title-size: 0.7em

banner-card-entity-value-size: 1.2em

banner-card-spacing: 0.135em

banner-card-heading-margin: 0.3em

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://eur05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnervetattoo%2Fbanner-card%2Fissues%2F76%23issuecomment-723492020&data=04%7C01%7C%7Ca3b83b3739e241e0d9aa08d8835c34a9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637403779320056209%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=T8s9%2FfxbiSYT%2BsZoodfOcwoB7ksEDmDsH5SXaKPoC78%3D&reserved=0, or unsubscribehttps://eur05.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAIHHNYLTFC6UUY4YIYYGFJTSOWVEVANCNFSM4NFB5DYA&data=04%7C01%7C%7Ca3b83b3739e241e0d9aa08d8835c34a9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637403779320066204%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=dI98pfJamtcRbxEa3m41Z5FdApXVyuh62d%2Bvoi1AJy0%3D&reserved=0.