What I am trying to accomplish is to have the floorplan that I have created have transparency so that I can see a background picture. Picture elements do not natively have style and as such I tried to use the custom:card-modder component that the community had created. The custom:card-modder works for other cards, but does not seem to apply to picture elements. Any help would be appreciated. I am not scared trying to javascript a solution so if anyone can point me to the code for picture-elements I think I could figure out a way to have css applied. Either that or let me know if I am missing an easier solution.
You can go with transparency using themes…
Just make sure your floorplan is a png file.
Here is my theme:
darkblue:
# Main colors that can be changed
primary-color: "#508ad2"
light-primary-color: "#2f44a7"
dark-primary-color: "#c66900"
disabled-text-color: "#545454"
divider-color: "rgba(255, 255, 255, 0.12)"
paper-card-background-color: "#1d1d1d00" // this is the color you need to change for the transparent background
paper-grey-200: "#191919"
paper-item-icon-color: "#d3d3d3"
paper-listbox-background-color: "#202020"
primary-background-color: "#303030"
primary-text-color: "#cfcfcf"
secondary-background-color: "#131313"
sidebar-text_-_background: "#62717b"
# Colors based on variables, see above
paper-card-header-color: "var(--paper-item-icon-color)"
paper-item-icon-active-color: "var(--primary-color)"
paper-item-icon_-_color: "var(--primary-text-color)"
paper-listbox-color: "var(--primary-text-color)"
paper-grey-50: "var(--primary-text-color)"
paper-slider-active-color: "var(--primary-color)"
paper-slider-knob-color: "var(--primary-color)"
paper-slider-knob-start-color: "var(--primary-color)"
paper-slider-pin-color: "var(--primary-color)"
paper-slider-secondary-color: "var(--light-primary-color)"
paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
paper-toggle-button-checked-button-color: "var(--primary-color)"
paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"
secondary-text-color: "var(--primary-color)"
table-row-background-color: "var(--paper-card-background-color)"
table-row-alternative-background-color: "var(--sidebar-text_-_background)"
I like the theme, thank you! @argykaraz
The theme unfortunately did not extend the transparency.
I used this:
paper-card-background-color: “rgba(0, 0, 0, 0.8)”
and no joy.
It almost seems as though picture elements images cannot have transparency added to them.
I did double check that the picture was a png and at first it was not, but I updated it to a png and still no luck.
I’m somewhat stumped on this.
@andrey
Do you by chance have any suggestions?
Card modder seems to work with everything but transparency on picture-elements
If your source image has transparent background, picture-elements will use it. No special configuration is necessary. This is how I have my floorplan, just needed to modify my file using photoshop to remove all of the whitespace.
My bad, I didnt clarify that: If you just leave the theme as I pasted it, it is already with transparent boxes. You dont have to make any changes. I already have a floorplan and have it setup exactly as you have asked for.
paper-card-background-color: “#1d1d1d00”
This is already transparent. If you dont want transparency, just remove the last 2 zeros
I think I have resolved this just taking my picture into Adobe Photoshop and making changes, but the reason for my ask in the beginning still remains. From a css perspective it should be possible in css to do what I was wanting.
Thank you for the responses I appreciate the help.