Transparent image not completely transparent - link tile

I'm trying to put a link tile with a transparent image over my "date and clock" tile. The date/clock tile contains a background image. That works fine, but the transparent image on the link tile isn't 100% transparent, it is maybe 90%. If I remove the transparent image on the link tile I get the same thing (a washed out underlying image). Is this just the way it works? Transparent isn't completely transparent? Or is there some CSS (Smartly) causing this?

No link tile With transparent image on a link tile

By default (not sure if it is HE or smartly) transparent link tile backgrounds are only 50% transparent. If you want more you can make it so via CSS

#tile-22 {
background-color: rgba(128,128,128,0.0) !important;
}

The 0.0 is the opacity play with it to see the effect.

Be sure and change the tile # to the one you are targeting.

before (0.5) / After (0.0)

image image

EDIT: If you want to remove the text so everything is transparent (making a overlay) include this code as well (change tile #)

#tile-22 .tile-primary {
 display : none !important ;
}

I left the 3 dots, so you could see there are 2 tiles there.
image

LMK if that works, if not we can tweak it.

1 Like

This worked great. Thank you!

1 Like

This is for your car HUD dash right? May I suggest you try adding this......

.dashboard div .header{position:fixed;bottom:-1em;right:1em;z-index:999;opacity:.2;zoom:.6;-moz-transform:scale(.6)}
.wrapper{height:100%;margin-top:0;padding-top:1em}
.dashBack,.dashName{display:none}
.dashboard div .header>.flex-auto.justify-end,.dashboard div .header>.flex-auto.justify-end>.flex{display:inline-block}

The code above removes a bunch of header stuff and moves the "green check + setting gear" to the bottom right and makes them small/semi transparent. Doing that plus removing the "3 dots" via the options menu will give a nice clean dash. (look closely to lower right below)

Only wish I could see it in action! (FYI wonder if it would do GIF backgrounds, on second hand may cause accidents. My wife is often caught watching the waves)

1 Like

That worked very well, thank you! Yes, this is for my car head unit (7" Android 9). I love everything about it as it will do everything my phone will do. But now I'm wanting a bigger unit, maybe 13" :cowboy_hat_face:

One of these days I need to figure out how to do a row of smaller icons at the bottom (like what you have at the top of yours). But for now this works well.

All my dashes (except some for testing) now run the smartly ‘quarter height’ and ‘half width’ mod. If/when you want to take that leap, copy your entire JSON to a new dashboard, and adjust the settings on your temp dash. It takes work to rearrange everything (more tiles = more work), and if you have a copy, it won't impact 'production' until your finished and ready.

On the dash above those 'small' tiles on top are 2x1 and the maps are 5x4. Making the grid that small allows for varying size tiles. Feel free to pm or tag me for any help.

1 Like