Hey all. Beginner here. Is it possible to use card-mod to hide elements of a webpage I’m pulling in to my dashboard using a website card, presumably using an iframe?
I’ve seen various examples on here of scaling the iframe contents, but nothing where people are styling the actual contents within. Perhaps that’s not possible?
It’s not, by definition of how an iframe works. It’s like trying to style a page open in another tab in your browser.
Also note that this is the card-mod theme topic and not the general one.
Thanks Pieter.
I’m trying to toggle the sidebar and topbar which is enabled (hidden for mobile view) by the Bubble theme.
card-mod-view-yaml: |
hui-sidebar-view:
$: |
.container {
overflow: hidden;
/* padding: 6px; */
}
@media only screen and (min-width: 768px) {
.container {
max-width: 520px;
margin: auto !important;
width: -webkit-fill-available;
}
}
#wrapper: |
$: |
#progressContainer {
border-radius: 14px !important;
}
.: |
"#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
border-radius: 14px !important;
}
How I do that by just a simple toggle button ?
Hi, is there a way to change colors of a view header (a.k.a. app-header/app-toolbar) when a theme is assigned in the definition of the view?
- title: Test
path: overview-test
theme: my_attempt
my_attempt:
# both variables work only if theme is set in user settings
app-header-background-color: "#963484"
app-header-text-color: "#EFD6D2"
# card_mod theme also works only if theme is set in user settings
card-mod-theme: my_attempt
card-mod-root-yaml: |
.: |
app-header {
--app-header-background-color: "#963484" !important;
background-color: "#963484" !important;
}
I also tried things like:
card-mod-root-yaml: |
.: |
div>div.header {
--app-header-background-color: "#963484" !important;
}
card-mod-root: |
:host {
--app-header-background-color: "#963484" !important;
}
Because that seem to do the job in dev tools:
I’ve tried the following code to Hide/Show the sidebars but its not working
Bubble:
# Existing theme settings...
card-mod-theme: Bubble
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,.6);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
card-mod-view-yaml: |
hui-sidebar-view:
$: |
.container {
overflow: hidden;
display: {{ 'none' if states('input_select.sidebar_topbar_visibility') == 'Hide' else 'block' }};
}
@media only screen and (min-width: 768px) {
.container {
max-width: 520px;
margin: auto !important;
width: -webkit-fill-available;
}
}
#wrapper: |
$: |
#progressContainer {
border-radius: 14px !important;
}
.: |
"#view>hui-view>hui-sidebar-view$#main>hui-card-options:nth-child(7)>vertical-stack-in-card$ha-card>div>hui-horizontal-stack-card$#root>hui-grid-card$#root>hui-entities-card$#states>div:nth-child(4)>slider-entity-row$div>ha-slider$#sliderBar$#progressContainer" {
border-radius: 14px !important;
}
I’ve tried solutions Frontend.set_theme not working - #25 by ausfas
but none working
templates like this should work:
{% set kerst = is_state('input_select.theme','Kerst') %}
overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}};
background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}};
maybe start experimenting with a subset (the minimal you want to customize) and then build from there
Finally some progress.
The following allows switching of the theme … that is working 
input_select:
theme_selector:
name: Theme Selector
options:
- "default"
- "ios-dark-mode"
initial: "default"
icon: "mdi:theme-light-dark"
alias: Switch Theme
description: ""
trigger:
- platform: state
entity_id: input_select.theme_selector
action:
- data_template:
name: "{{ states('input_select.theme_selector') }}"
action: frontend.set_theme
Now need to make the browser_mod and card-mod to work ( the reason I came to this thread), so that I can enable and disable side and topbars by injecting the code within the Bubble theme.
Once I’m all done will document this for everyone on a separate thread for inexperience users before they dive into more complicate experiments.
the following isn’t working yet.
- action: browser_mod.set_theme
data:
dark: dark
theme: auto
make that
data:
yeah these changes have always been like that, no news there.
Still not sure what you are trying to use card-mod theming for. Ofc, I dont have Bubble theme, but for the hiding of the sidebar, you can easily use Kiosk-mode plugin. No need for theming at all, just flip the toggle and you’re set.
Thanks, I tried Kiosk mode but that’s not working
so moved here
I have folowing card-mode style for cards:
- type: custom:mushroom-select-card
entity: input_select.battmgmt_timeplan_po5
fill_container: false
layout: vertical
icon_type: none
name: '5'
secondary_info: none
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__selected-text {
font-size: 12px !important;
}
.mdc-select__anchor{
background: black !important;
border: 3px !important;
border-style: solid !important;
border-color: black !important;
padding: 3px !important;
}
.mdc-select__dropdown-icon {
display: none !important;
}
mwc-menu {
--mdc-menu-item-height: 16px;
}
.: |
ha-card {
padding: 0px !important;
margin: 0px !important;
}
.actions {
padding: 0px !important;
}
mushroom-state-info$: |
.container {
--card-primary-color: blue;
align-items: middle;
}
Because there are a lot of those cards with same style setting, I’d like to set this style in theme.
Can you help me, how to set this style in the theme style setting?
Hi,
My CSS skills are somewhat lacking, I just can’t seem to understand how to get from the inspector to the card mod syntax. I’m trying to set the background underlined in red in the image below, I don’t suppose somebody could give me an example of the card mod syntax ?
Thanks,
dont think so no… cant even decipher the screenshot.
set the background of what exactly? give us the yaml and we might be able to help
https://matt8707.github.io/card-mod-helper/
Also seems like you’re not asking about themes. This is the theme topic. You might be better off asking on the general topic.
That should help, although I think my knowledge is still a bit primitive, especially as it doesn’t seem to know which card-mod-thing to use:
I didn’t know I could spend 3 days researching HA/jinja2/css/card-mod to have full dynamic background images set in a sections view, but such is life! It seems that all the older methods are not applicable anymore due to the new sections view.
I posted it in themes as it is to put in the themes file to set the section view background image with an input select entity on a card. If I could set the --lovelace-background var in the themes file using jinja2, that would be another satisfactory solution as that seems to do exactly what I’m looking for.
Thanks again.
not sure what you are trying to achieve but this just works:
card-mod-view: |
hui-sections-view {
background:
{% set dark = is_state('binary_sensor.donker_thema','on') %}
{% set extension = '_dark' if dark else '' %}
{{"center/cover no-repeat url('/local/wallpapers/map"~extension~".png') fixed"}};
}
Thanks,
I’ve done that before, but it only covers the part of the view that has cards on it, the rest of the screen remains black. If I set the background image from the sections view/edit interface in HA (new feature), it shows full screen, hence I’m trying to trace which css value to change to emulate this, and put it in the themes file.
yes that is a bummer indeed.
ive moved to sections where I can, but, because of this, I didnt do that for those views I have a background …
dont think there is any css that can fix that, it is a imitation of the sections view.
as a matter of fact, it is the reason I filed a FR to give us 1 column masonry views (and not require custom: vertical-view from layout-card), so we can keep that background full view…
card-mod-root: |
#view {
{{ states('sensor.energy_solar_theme_background') }}
}
I did it by accident and it works full screen. This is the value of the sensor:
background: center / cover no-repeat url('/local/solax/background-04.jpg') fixed !important;