I see, the image is not removed.
Check this:
The upper is with card-mod.
Image is not removed, it just became less visible))))
I see no difference between my & your variant:
(modded your variant a bit by using ānot()ā)
I compared to my simplification:
card_mod:
style: |
.player.no-image {
background-color: var(--state-unavailable-color);
}
which removes the image ā¦
Confirm, it removes:
because it is overlaying it, check with a transparent color:
So, this ā.playerā variant may be used to mark an adult content ))))
Iām trying to increase the size of the font for the events in ālistWeekā view of the built-in calendar card. I think I donāt understand how to get down to the proper class. Iāve tried all manner of things. I think .fc is inside #calendar, and I know that #calendar is in the shadow-root of ha-full-calendar, but I canāt figure out how to access it. The highlighted line in the screenshot below changes the text size in the developer panel. Current code, after many many iterations:
ha-full-calendar$: |
.fc {
font-size: 2em;
}
I filmed it using your mod. Some colors work, some dont.
I suppose I am seeing my primary-color when not modding, but since the card seems to be applying some filter, it changes my primary-color so something toned down, making the image appear. (and making the color no longer fit my theme
I suspect your example with red also isnt showing a true red, but a red with opacity, just check it without anything further, and compare
this brings the true color:
type: media-control
entity: media_player.googlehome_hub
card_mod:
style: |
.player {
{{'background: grey'
if is_state(config.entity,['off','idle'])}};
}
and solves the complexer path, but, ofc, it again covers the imageā¦
can even set it to use my main gradient in the theme:
type: media-control
entity: media_player.googlehome_hub
card_mod:
style: |
.player {
{{'background: radial-gradient(var(--primary-color),var(--card-background-color))'
if is_state(config.entity,['off','idle'])}};
}
building on that:
type: media-control
entity: media_player.googlehome_hub
card_mod:
style: |
{% if is_state(config.entity,['off','idle']) %}
.player {
background: var(--lovelace-background)
}
.controls {
color: var(--no-power-color);
}
.top-info {
color: var(--no-power-color);
}
{% endif %}
I would think not even this.
Something is above this color. If it is another with opacity or a image with opacity, you can search. Donāt have the time now.
E.g. if your assign red #ff0000 and take the color picker afterwards, you will get #f3121b and then #e81c28 if you do it again, ā¦
I stumbled onto a variable that controls this, that I can reference under ha-card to achieve this result. The code below adjusts the font size for the event times and descriptions (āpaper-font-body1_-font-size), and for the weekly heading (āpaper-font-headline-_font-size) at the top of the card. It adjusts the font size for the day (.fc-list-day-text) and date headings (.fc-list-day-side-text) for each section. It also adjusts for the height of the scrollable portion of the list view.
card_mod:
style:
ha-full-calendar:
$: |
.fc-list-day-text {
font-size: 24px !important;
}
.fc-list-day-side-text {
font-size: 24px !important;
}
.: |
ha-card {
border: none;
align-items: center;
height: 900px !important;
background-color: rgba(0, 0, 0, .1);
--paper-font-body1_-_font-size: 20px;
--paper-font-headline_-_font-size: 32px;
}
ha-full-calendar {
--calendar-height: 750px !important;
}
Last step is to increase the font size for the Day and Date Labels for each event section of the card. I cannot find a variable that controls these font sizes, so I need to reference these objects directly and adjust the font-size parameter. Based on what I see in the developer console, which is pasted below, I really think this code should work, but it doesnāt. What am I missing?
ha-card {
ha-full-calendar {
$: |
.fc-list-day-text {
font-size: 40px !important;
}
}
}
Adjusting the font size here in the developer console works:
Here is the structure in the developer console:
Compare your code with any other working code here in the exmaples and thread and you will directly see, that yours ist completley wrong syntax.
I guess thatās why Iām here. Iāve tried many iterations of syntax. It appears to me that ha-full-calendar is under ha-card, and that .fc-list-day-text is inside the shadow-root of ha-full-calendar, so thatās the reason for the $ to traverse. Is that correct? Syntax is definitely wrong in the above screenshot due to a copy paste error. The code still doesnāt work and probably the syntax is still wrong, but here it is at the moment. Iāve not found other examples of such nexted objects unfortunately.
ha-card {
ha-full-calendar$ {
.fc-list-day-text {
font-size: 40px !important;
}
}
}
Help to help yourself: As said compare to others, who did it. Here a random example from this thread, I have just scrolled a little bit up. But why is it not possible to search at least a little bit on your own?
- type: entities
entities:
- type: custom:multiple-entity-row
entity: sensor.phase_3
unit: false
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
margin-left:0 !important;
display: none;
}
So remove the ha-card in your case (not needed here) and format the rest according to the given example.
Just try it without your first styles from the post before. And I imagine, then the next question will be, āhow to combine the two of themā. Therefore already the anser: First thread. Link to Ildars examples. And there you will find an entry how to combine such shadow root things with other styles on other levels. .:| will be your friend.
2 Likes
Thank you for the direction. I did not know about specific syntax for combining elements. This is my current code, and it is working. Would you suggest any modifications?
card_mod:
style:
ha-full-calendar:
$: |
.fc-list-day-text {
font-size: 24px !important;
}
.fc-list-day-side-text {
font-size: 24px !important;
}
.: |
ha-card {
border: none;
align-items: center;
height: 900px !important;
background-color: rgba(0, 0, 0, .1);
--paper-font-body1_-_font-size: 20px;
--paper-font-headline_-_font-size: 32px;
}
ha-card {
ha-full-calendar {
--calendar-height: 750px !important;
}
}
Last part. Use this. without nesting {}, which are here wrong as well.
1 Like
Thank you very much for your help.
After upgrading to 2024.3.0 not all modifications are stll working. For some reason the margins, border width are back to normal. Anyone else noticed this and has a fix for it?
type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root > * {
--ha-card-border-width: 0px;
}
.: |
hui-vertical-stack-card {
--vertical-stack-card-margin: 1px;
}
ha-card {
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-color,var(--divider-color,#e0e0e0)) solid var(--ha-card-border-width,1px);
}
Because this var seems to be not used any more for margins - they are set by a āgapā now.
Thank you, problem solved:
--vertical-stack-card-gap: 1px;
How can i change the spacing in the dropdown card to match that of the first pic? I would also like to keep the title of dropdown in the center.
Code:
type: custom:collapsable-cards
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
icon: mdi:lightbulb-group
double_tap_action:
action: none
name: Living Room
entity: light.living_room_lights
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: custom:mushroom-light-card
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
icon: mdi:light-recessed
double_tap_action:
action: none
entity: light.kitchen_main_lights
name: Kitchen Main
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
fill_container: true
use_light_color: false
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
icon: mdi:lightbulb-group
double_tap_action:
action: none
entity: light.kitchen_table_lights
name: Kitchen Table
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: custom:mushroom-light-card
icon: mdi:track-light
show_color_control: false
collapsible_controls: true
show_brightness_control: true
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
name: Kitchen Sink
entity: light.kitchen_sink
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;
}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.dining_room_lights
name: Dining Room
card_mod:
style: |
ha-card {
--control-height: 15px;
--icon-size: 40px;
}
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
icon: mdi:lightbulb-group
fill_container: true
show_brightness_control: true
tap_action:
action: toggle
hold_action:
action: more-info
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.garage_lights
name: Garage
icon: mdi:lightbulb-fluorescent-tube-outline
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
collapsible_controls: true
fill_container: true
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
{%- endif %}
}
Not sure if itās right place to ask, but please help me to reduce space between icon and text. TY
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: First Floor
icon: mdi:home-floor-1
icon_color: teal
card_mod:
style: |
ha-card {
--card-primary-font-size: 1rem;
border: none;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: rem;
margin-left:5rem
}
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:sofa
size: 25px
color: teal
card_mod:
style: |-
ha-card {
{% if states('light.living_room_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.living_room_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
font-size: 10px !important;
}
tap_action:
action: navigate
navigation_path: living-room
layout: icon_name
name: Living Room
theme: ios-dark-mode
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:pot-steam
size: 25px
color: teal
card_mod:
style: |-
ha-card {
{% if states('light.kitchen_lights_2') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.kitchen_lights_2','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
font-size: 10px !important;
}
tap_action:
action: navigate
navigation_path: kitchen
layout: icon_name_state
name: 'Kitchen '
theme: ios-dark-mode
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:hat-fedora
size: 25px
color: teal
card_mod:
style: |-
ha-card {
{% if states('light.hallway_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.hallway_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
font-size: 10px !important;
}
tap_action:
action: navigate
navigation_path: hallway
layout: icon_name_state
name: Hallway
theme: ios-dark-mode
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:bathtub
size: 25px
color: teal
card_mod:
style: |-
ha-card {
{% if states('light.light') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.light','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
font-size: 10px !important;
}
tap_action:
action: navigate
navigation_path: my-bathroom
layout: icon_name_state
name: My Bathroom
theme: ios-dark-mode
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
icon: mdi:go-kart
size: 25px
color: teal
card_mod:
style: |-
ha-card {
{% if states('light.garage_lights_light') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.garage_lights_light','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
font-size: 10px !important;
}
tap_action:
action: navigate
navigation_path: garage
layout: icon_name_state
name: Garage
theme: ios-dark-mode
- type: custom:button-card
show_name: true
show_icon: true
icon: phu:outside
size: 25px
color: teal
card_mod:
style: |-
ha-card {
{% if states('light.outside_lights') == 'on' %}
box-shadow: 0px 0px 5px 5px #CBC3E3 !important;
{% else %}
box-shadow: 5px 10px 5px -3px rgba(0,0,0,0.75);
{% endif %}
{% if is_state('light.outside_lights','on') %}
background: rgba(255, 152, 0, 0.1) !important;
{% endif %}
font-size: 10px !important;
}
tap_action:
action: navigate
navigation_path: outside
layout: icon_name_state
name: Outside
theme: ios-dark-mode
card_mod:
style: |
ha-card {
background-size: 100% 100%;
background-image: url({{/local/png/weather/cloudy.gif}});
}
TY