Can you clarify? You can always add a gap-card to the bottom.
Donāt post in the theme section, post in the regular area.
You can try adding a gap-card.
sorry didnt see that, thx for the headup, reposted in correct topic
Sorry for the cross-post, but perhaps there is a global way to fix the new issue that Iām having with how markdown styling works. I need to set the height of the markdown card globally (or better yet, completely remove it and use the one I already have set up).
With HA 117 thereās a new constructed stylesheet option that sets height to 100% of all my markdown cards. For the time being I fixed it by using !important everywhere, which now overrides the new variable. Though this is very hacky and doesnāt look nice when reloading (starts spaced then applies the height). I really hope some has a decent global solution for this.
Is there a way to set this in theme.yaml so that stylesheet gets ignored completely, so I have markdown syling as I had?
I wonder why HA is so keen on changing how markdown styling works every few releases
would there be any way to alter the option dots? have it show something else than the 3 dots (like with below screen of the Custom Header) and, control which option is visible?
would really love to be able to customize that, as the current core way is so limited on the one hand, and shows all options I dont need in yaml mode on the other.
really hurts looking back to this realizing this is no longer supportedā¦
Yeah, you can! Once you enter edit mode, though, the element will be recreated and itāll stop working. Look in the history of the wiki, and search for box-shadow. Thatāll get you started.
Hi all. Iām getting close to making sense of the post custom header world and the below is working pretty well for me, but there are still a couple things I canāt figure out.
-
The solution to remove the mic is apparently to disable almond, but I never enabled it. I donāt have it anywhere in my config or integrations. What am I missing, how do I get rid of that mic button?
-
The example Iām using below to remove the overflow menu from only mobile works okay but relies on the orientation of the device. I have some kiosk tablets where I want to keep the header but turn the overflow menu into a clock. This raises 2 issues.
a) Can I target only the kiosk tablets (in landscape mode) via their user agent or logged in user but not affect my desktop clients?
b) Is it possible to make clicking the clock bring up the overflow menu items as was possible in custom-header?
Hereās what Iām running to get rid of superflous buttons under .117 with the now built in compact header if anyone wants similar:
card-mod-theme: "midnight"
card-mod-root-yaml: |
ha-app-layout$: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
}
Thanks in advance for any ideas. I donāt really understand most of whatās going on here, but have gotten close via frankensteining stuff together.
- Does it still show up with the default theme?
- a) You can use the
uservariable in Jinja
b) Nope, thatās not how CSS works, unless you use ::before on the overflow menu instead of ::after on the tabs.
1 Like
Kendell, you are our savior.
- Unfortunately yes
- Could you expand a bit? Iām hopeless with CSS unfortunately and just kind of stealing otherās creations. I went searching for the user variable in the template editor as hass.user, user.name, user etcā¦ but I couldnāt get a value and even if I did I wouldnāt know what do do with it. Iām guessing something like:
@user (username) {
? also unsure on what the ::before on the overflow menu. I assume you mean something like the below, but how do I get it to replace the overflow menu while still keeping the menu functional?
/* This adds the time */
ha-tabs::before{
display: inline-block;
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }} - {{states.weather.dark_sky.attributes.temperature }}Ā°";
- Huh. Try creating a new topic, or checking all of your YAML files and grep for āconversationā.
- a) Itād be something like this:
{% if user == 'Kendell' %}
ha-tabs {
display: none;
}
{% endif %}
b) target ha-button-menu::before, but I havenāt tested this yet
1 Like
Thanks. I have changed this as follows to avoid the icons moving down and 6px gives enough space between the icons for me.
paper-tab {
padding-left: 6px !important;
padding-right: 6px !important;
}
Have you setup the menu at the bottom?
Please share you code!
Can you check your grammar?
1 Like
KTibow fixed an example a few posts up that moves the header to the bottom. I tried it and it worked for me on .117 (just not for what I wanted to do).
card-mod-theme: yourname
# Header
header-height: 0px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there. */
#selectionBar {
bottom: unset !important;
}
.: |
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: transparent !important;
color: #A9A9A9 !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: #D2691E !important;
}
paper-tab[aria-selected=true] > ha-icon {
color: #FF8C00 !important;
}
paper-tab[aria-selected=true] {
color: #D2691E !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there. */
app-header {
top: calc(101vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
1 Like
Crap, thanks, Iām an idiot. Based on this, It looked like the key was almond: and since I didnāt expect it would be anything else, I didnāt bother to look further than that.
I tried the clock snippet without any conditionals both with ::before and ::after, and with both paper-tabs and ha-tabs, and moved it around in the config a bit but I actually couldnāt get it to display anythingā¦ Hereās one of the attempts, any idea?
card-mod-theme: "midnight"
card-mod-root-yaml: |
/* This adds the time */
ha-tabs::after {
display: inline-block;
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }} - {{states.weather.dark_sky.attributes.temperature }}Ā°";
ha-app-layout$: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
Can you post your theme file? I know itās mean, but this is the way for me to quickly help you and everyone.
Not mean at all! I just wanted to save you some scrolling. Here it is in itās entirety, warts and all.
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-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-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
/* This adds the time */
ha-tabs::after {
display: inline-block;
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }} ";
ha-app-layout$: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
#- {{states.weather.dark_sky.attributes.temperature }}Ā°
# @media (orientation: portrait) {
# ha-menu-button {
# display: none !important;
# }
# }
Check this out
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-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-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
ha-button-menu::before {
font-size: 12px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 16px;
right: 48px;
}
#- {{states.weather.dark_sky.attributes.temperature }}Ā°
# @media (orientation: portrait) {
# ha-menu-button {
# display: none !important;
# }
# }
1 Like
Thanks so much. That did it. I wish I was as good as you at this. Iām taking a CSS class, but just looking at the way it works in hass, I donāt think it will be enough.
So, Iāve recreated all the functionality I had in custom-header except one thing. In custom-header, I could make the clock go in the location of the overflow menu, but still have the menu activate when I clicked on the clock. It would be the cherry on top if I could make the ā¦ for the overflow menu disappear but the clickable area for the menu remainā¦ Any idea if itās possible? This is what I have now when viewing as user kiosk:
and here is the latest of the themeā¦
Also do you have a buy a coffee link?
PS, nice clippy!
---
#
# Midnight Theme
#
midnight:
accent-color: "#E45E65"
card-background-color: "var(--primary-background-color)"
dark-primary-color: "var(--accent-color)"
disabled-text-color: "#7F848E"
divider-color: "rgba(0, 0, 0, .12)"
google-blue-500: "#4285f4"
google-green-500: "#39E949"
google-red-500: "#E45E65"
google-yellow-500: "#f4b400"
# ha-card-background: "#434954"
label-badge-background-color: "#2E333A"
label-badge-blue: "#039be5"
label-badge-border-color: "green"
label-badge-green: "#0DA035"
label-badge-grey: "var(--paper-grey-500)"
label-badge-red: "var(--accent-color)"
label-badge-text-color: "var(--primary-text-color)"
label-badge-yellow: "#f4b400"
light-primary-color: "var(--accent-color)"
markdown-code-background-color: "var(--paper-listbox-background-color)"
paper-card-header-color: "var(--accent-color)"
# paper-dialog-background-color: "#434954"
paper-grey-200: "#414A59"
paper-grey-50: "var(--primary-text-color)"
paper-grey-500: "#9e9e9e"
paper-item-icon_-_color: "green"
paper-item-icon-active-color: "#F9C536"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-selected_-_background-color: "#434954"
# paper-listbox-background-color: "#2E333A"
paper-listbox-color: "var(--primary-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-disabled-active-color: "var(--disabled-text-color)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
paper-slider-knob-color: "var(--accent-color)"
paper-slider-knob-start-color: "var(--accent-color)"
paper-slider-pin-color: "var(--accent-color)"
paper-slider-secondary-color: "var(--secondary-background-color)"
paper-tabs-selection-bar-color: "green"
paper-toggle-button-checked-bar-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "var(--accent-color)"
paper-toggle-button-checked-ink-color: "var(--accent-color)"
paper-toggle-button-unchecked-bar-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-button-color: "var(--disabled-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--disabled-text-color)"
# primary-background-color: "#383C45"
primary-color: "#5294E2"
# primary-text-color: "#FFFFFF"
secondary-background-color: "#383C45"
secondary-text-color: "#5294E2"
sidebar-background-color: "var(--paper-listbox-background-color)"
sidebar-icon-color: "rgba(255, 255, 255, 0.70)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-selected-text-color: "var(--primary-text-color)"
sidebar-text-color: "var(--primary-text-color)"
slider-bar-color: "var(--disabled-text-color)"
slider-color: "var(--primary-color)"
slider-secondary-color: "var(--light-primary-color)"
st-mode-active-background: "var(--dark-primary-color)"
st-mode-background: "var(--primary-background-color)"
state-icon-active-color: "#FDD835"
state-icon-color: "#44739e"
state-icon-unavailable-color: "var(--disabled-text-color)"
switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
switch-unchecked-button-color: "var(--disabled-text-color)"
switch-unchecked-color: "var(--disabled-text-color)"
switch-unchecked-track-color: "var(--disabled-text-color)"
table-row-alternative-background-color: "#3E424B"
table-row-background-color: "#353840"
text-primary-color: "var(--primary-text-color)"
toggle-button-color: "var(--primary-color)"
# Sean's additions
ha-card-border-radius: "10px"
# ha-card-box-shadow: "4px 4px 4px #2E333A"
ha-card-box-shadow: "4px 4px 4px #1B1E1F"
# ha-card-header-color: "#FFFFFF"
primary-background-color: "#181A1B"
paper-dialog-background-color: "#1f2223"
ha-card-background: "#1f2223"
paper-listbox-background-color: "#1f2223"
primary-text-color: "#E8E8E8"
ha-card-header-color: "#FFFFFF"
header-height: 48px
app-header-background-color: "#181A1B"
card-mod-theme: "midnight"
card-mod-root-yaml: |
.: |
/* This hides the help button, menu button and title */
ha-menu-button {
display: none !important;
}
@media (orientation: portrait) {
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-right"] {
display: none;
}
paper-icon-button[icon="paper-tabs:chevron-left"] {
display: none;
}
}
/* This adds the time */
{% if user == 'kiosk' %}
ha-button-menu::after {
font-size: 22px;
height: 20px;
width: 100px;
margin-left: 0px;
margin-right: 0px;
content: "{{ states('sensor.time') }}";
position: absolute;
top: 14px;
right: 0px;
}
{% endif %}
#- {{states.weather.dark_sky.attributes.temperature }}Ā°
# @media (orientation: portrait) {
# ha-menu-button {
# display: none !important;
# }
# }