Applying style to picture elements

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… :wink:
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 :wink:

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.