itās fine, just use the other thread next time.
glad I could help you, thx for the feedback
1 Like
I had to completely EDIT my entire post because I got it working. I was trying to switch the sidebar to the left side, make it smaller, and scroll the main. It works as instructed so I must have been doing something wrong at first. My working code is at the bottom but unfortunately it still doesnāt do everything I would it to.
Iām not sure that this would be the best place to ask this but is there anyway to use the sidebar layout along with the Grid (layout-car) by @thomasloven? Iāve used other sidebar integrationās but thereās a lot of glitches with them. Iād like to have a sidebar on every page which does not change. This sidebar seems to work fine but it doesnāt seem like I could use the Grid (layout-card) with it which is what Iāve have my entire frontend setup with.
If not and besides just dealing with the other glitchy sidebar integrations, Iāve tried using the Grid (layout-card) and the custom:declutter-card to make a sidebar which works but I need to find a way to keep the sidebar fixed in place. Can I use some type of theme or card-mod styling similar to what I have below to freeze the sidebar column in place (one column in the layout-card) and let the rest of everything scroll as normal?
Any suggestions?
side_bar_my_dark_theme:
card-mod-theme: side_bar_my_dark_theme
card-mod-view-yaml: |
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
}
hui-sidebar-view:
$: |
.container div#main {
max-height: calc(100vh - var(--header-height) - 4px);
overflow-y: auto;
}
@media (max-width: 760px) {
.container div#main {
max-height: unset;
overflow-y: unset;
}
}
.container div#sidebar {
max-width: 300px;
width: -webkit-fill-available;
}
@Ildar_Gabdullin instead of using the sidebar layout or one of the sidebar integrations, is there a way to just style a Grid (layout-card) so the left most column in the grid stays fixed but all of the other columns still scroll? Thanks.
I am not a css pro; imho you cannot make only a part of grid scrollable.
P.s. Please do not tag people, this is against rules.
Hi everyone, Iām coming to you with a question somehow I canāt figure out why this is happening. I use for custom popup card with browser mod integration and in it I modify styles for css using card-mod.
I have one main theme for the whole system, which contains only basic variables for HA and a small part for card-mod-more-info-yaml configuration, for the dashboard I have another theme separately, which contains its own variables and another card-mod-view-yaml for a specific dashboard view.
Moving on to the problem, lately Iāve been experiencing a little delayed response after opening a custom popup and css styles reload after with lag, depending on how much custom css is used in it. I donāt know if it happened before the card-mod update or after. To find out the cause of the problem in the dev tools where the error is, the cause of the delay is in the use of the card-mod module to modify the css popup content elements.
So I want to ask more experienced people if anyone has encountered and solved a similar problem, or advised how to properly use the css for the popup content with the browser mod without getting an error. Thank you in advance for your answersā¦
Main theme
Main Theme
card-mod-theme: Main Theme
card-mod-more-info-yaml: |
.: |
ha-dialog {
--vertical-align-dialog: var(--tablet-popup-align-dialog) !important;
--dialog-surface-margin-top: var(--tablet-popup-margin-top) !important;
--dialog-box-shadow: 0 0px 16px 4px rgba(101,115,134, .15), 0 16px 64px 32px rgba(101,115,134, .5) !important;
--mdc-theme-surface: rgba(34,38,39,1) !important;
}
ha-dialog > div.content > div.container {
padding: 0 !important;
}
@media (max-width: 800px), (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: 100vw !important;
--mdc-dialog-min-height: 100vh !important;
--popup-border-radius: 0 !important;
}
}
ha-dialog > div:focus {
outline: none;
}
$: |
.mdc-dialog__surface {
background-color: var(--popup-background-color) !important;
box-shadow: var(--dialog-box-shadow) !important;
}
Popup dialog
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: MBPro Server
card_mod:
style:
ha-dialog$: |
:host {
--ha-card-border-width: 0 !important;
--ha-card-border-radius: 0px !important;
--ha-card-border-color: none !important;
--bar-card-border-radius: 12px !important;
--ha-card-box-shadow: none !important;
--ha-card-background: none !important;
--mdc-theme-surface: rgba(34,38,39,1) !important;
}
.mdc-dialog__surface {
background-color: var(--popup-background-color) !important;
}
layout-card:
$grid-layout$:
# card divider border
.: |
#root > * {
margin: 0px !important;
}
@media (max-width: 450px), (max-height: 500px) {
#root {
display: block !important;
}
}
hui-entities-card:
$: |
ha-card {
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
border-radius: 0;
transition: none;
}
/* portrait */
@media screen and (max-width: 800px) {
ha-card {
border-right: none;
border-bottom: 0.1vw solid rgba(58, 69, 73, 0.2);
}
}
$hui-horizontal-stack-card:
$: |
#root {
justify-content: space-evenly;
margin-top: 1.7em;
}
hui-entities-card:last-child:
$: |
ha-card {
border: none;
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout: !include ../../snippets/popup_footer_layout.yaml
cards:
whole popop yaml codes
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: MBPro Server
card_mod:
style:
ha-dialog$: |
:host {
--ha-card-border-width: 0 !important;
--ha-card-border-radius: 0px !important;
--ha-card-border-color: none !important;
--bar-card-border-radius: 12px !important;
--ha-card-box-shadow: none !important;
--ha-card-background: none !important;
--mdc-theme-surface: rgba(34,38,39,1) !important;
}
.mdc-dialog__surface {
background-color: var(--popup-background-color) !important;
}
layout-card:
$grid-layout$:
# card divider border
.: |
#root > * {
margin: 0px !important;
}
@media (max-width: 450px), (max-height: 500px) {
#root {
display: block !important;
}
}
hui-entities-card:
$: |
ha-card {
border-right: 0.1vw solid rgba(58, 69, 73, 0.2);
border-radius: 0;
transition: none;
}
/* portrait */
@media screen and (max-width: 800px) {
ha-card {
border-right: none;
border-bottom: 0.1vw solid rgba(58, 69, 73, 0.2);
}
}
$hui-horizontal-stack-card:
$: |
#root {
justify-content: space-evenly;
margin-top: 1.7em;
}
hui-entities-card:last-child:
$: |
ha-card {
border: none;
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout: !include ../../snippets/popup_footer_layout.yaml
cards:
#################################################
# #
# HOME ASSISTANT #
# #
#################################################
- type: entities
title: ' '
show_header_toggle: false
card_mod:
class: header
entities:
- entity: binary_sensor.macbookpro
name: Active
state_color: true
- entity: sensor.mbproserver_connection_type
name: Connection
- entity: sensor.mbpro_uptime_usage
name: Uptime
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: &bar_card_positions
icon: outside
indicator: 'off'
name: outside
severity: &bar_card_severity
- color: '#9da0a2'
from: 0
to: 59
- color: '#9da0a2'
from: 60
to: 100
entity_row: true
entities:
- entity: sensor.mbpro_cpu_usage
name: Processor
- entity: sensor.mbpro_memory_usage
name: Memory
- type: custom:hui-horizontal-stack-card
cards:
- type: custom:button-card
name: Lock
icon: mdi:lock
tap_action:
action: call-service
service: shell_command.lock_mbpro
template: icon_name
- type: custom:button-card
name: Sleep
icon: mdi:power-sleep
tap_action:
action: call-service
service: shell_command.sleep_mbpro
template: icon_name
footer:
type: custom:mini-graph-card
# name: Speedtest
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.mbpro_cpu_usage
entities:
- entity: sensor.mbpro_cpu_usage
name: Processor
color: '#00bb33'
- entity: sensor.mbpro_memory_usage
name: Memory
show_state: false
color: '#2196f3'
y_axis: secondary
hours_to_show: 48
hour24: true
line_width: 3
animate: true
# upper_bound_secondary: 100
show:
name: false
icon: false
state: false
legend: false
fill: fade
labels: true
labels_secondary: false
average: false
extrema: false
points: hover
You might not be a pro but you do have a lot more experience and knowledge about bout it than me. If I get stuck trying to style something, I always check to see what you say first because your below post on using the card_mod: has some of the best examples.
And I apologize for tagging you but the majority of the time thatās how I begin my replies. I also never heard anyone say it was against the rules. The only thing Iāve heard people say is not to tag someone in a topic that theyāve never posted on because it sounds like youāre summoning themā¦
So I just checked the rules and tagging is allowed, they just say to be polite and respectful when you do it. They only suggest not to do it because of the same reason that I just stated above. Either way, Iāll make sure not to do it when it comes to your posts since you obviously donāt like it. Have a great dayā¦
1 Like
You are always welcome to ask! If I can, if I am home, if my HA test machine is on - will try helping.
A possible way:
ā layout card: a grid with 2 columns: vertical-stack + layout-card,
ā the 2nd layout-card has a grid layout + card-mod for scrolling
1 Like
Iām trying to use the theme features to reuse CSS for a mod-card that Iām using to wrap many of my cards that otherwise start with vertical stacks. The class attribute does not seem to be applied to the card. This is the yaml, and the markdown ha-card gets the class applied, but not the mod-card. Should I be using something other than a mod-card?
type: custom:mod-card
card_mod:
class: mod-card-wrapper
card:
type: vertical-stack
cards:
- type: markdown
content: Lampar
card_mod:
class: card-header
Edit: Trying to move this from mod-card to entities, but type: hui-markdown-card is not working.
Edit2: I just skipped the markdown card since all it was doing was acting as a title. Just used the entities card title instead and styled it the same.
I have the following code to make a card blink. It fades in, is it possible to make it blink without fading so just on/off.
card:
type: custom:mushroom-entity-card
entity: sensor.blue_bin
icon_type: entity-picture
card_mod:
style: |
ha-card {
border: solid 3px red;
box-shadow: none;
animation:
{% if state_attr('sensor.blue_bin', 'daysTo') < 3 %}
blink 2s linear infinite;
{% else -%} none
{% endif %}
}
@keyframes blink {
from {opacity: 100;}
to {opacity: 0;}
from {opacity: 0;}
to {opacity: 100;}
}
Thanks
Wrong thread. Go to a card-mod thread, this one is for themes.
Iām trying to remove the margin of a grid template area.
I can not figure out how to do this.
so far I have:
card-mod-theme: witbol
card-mod-view-yaml: |
grid-layout:
$: |
div#root {
margin: 0;
}
This removes the margin, outside the grid. which I want.
and also want to remove the margin from the template area.
Here is a image where I added the margin: 0 in the chrome developer tools.
and gives the result I need.
card_mod:
style: |
mushroom-shape-icon$: |
ha-icon {
{% if is_state('media_player.woonkamer', 'playing') %}
--icon-animation: music 2s ease-in-out infinite alternate;
transform-origin: 50% 100}
}
.shape {
perspective: 7px;
}
@keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
.: |
ha-card {
--chip-background: transparent;
border: none !important;
box-shadow: none !important;
}
my chip does not get transparent. what am I doing wrong ?
Try background: transparent without --chip-
1 Like
How can I change the color not only of the icon but also of the outside roundel?
card_mod:
style: |
:host {
--card-mod-icon:
{% if states(config.entity) == 'high' %} mdi:battery
{% else %}
{% if states(config.entity) == 'middle' %} mdi:battery-50
{% else %}
mdi:battery-20
{% endif %}
{% endif %};
--card-mod-icon-color:
{% if states(config.entity) == 'high' %} green
{% else %}
{% if states(config.entity) == 'middle' %} yellow
{% else %}
red
{% endif %}
{% endif %};
- This a themes thread. Ask in a card-mod thread.
- Consider using āelifā instead of āelse ifā.
Hey Guys,
is it possible to mod the mushroom theme so that every icon has no background?
Like this
did you find any solution to this?
i am looking for same
actually not! very disappointingā¦ā¦
Try adding an āafterā pseudo class after a title and define a background. Then show/hide this element conditionally