[smartly] bpt life360 css patch

Continuing the discussion from [RELEASE] Life360 Tracker - Works with the Paid and Free versions of Life360!:

Sure thing! Could you please grab the html of that tile and pastebin it in here? I don't have that tile but would be happy to get a CSS patch done for it.

Sent you a PM

1 Like

@aaron try this CSS after replacing '99' with your tile ID. It should end up looking something like this, but haven't tested in anything other than chrome. Once this CSS gets tested and finalized, I'll build it into smartly and have it automatically apply this CSS to all Life360 tiles.

Place it in 'Settings' > 'Advanced' > 'CSS' after /* ------- CUSTOM CSS BELOW THIS LINE - This CSS will be preserved during updates ------- */

/* be sure to scroll down to grab all of this CSS */

#tile-99 {
  background-color: rgba(0,0,0,.6);
}

#tile-99 table {
  border-collapse: collapse;
}

#tile-99 .tile-contents {
  padding: 0;
}

#tile-99 .tile-title {
position: absolute;
  bottom: .75em;
  right: 1.25em;
  width: auto;
  text-align: right;
  opacity: .5;
}

#tile-99 tr {
    display: flex;
}

#tile-99 .tile-primary tbody tr:nth-child(1) td p:nth-child(2) {
  position: absolute;
  top: 0;
  right: 0;
  padding: .5em 0 .25em .5em;
  background-color: rgba(255,255,255,.7);
  border-radius: 0 0 0 15px;
  color: rgba(0,0,0,0.7);
  width: unset !important;
  padding-top: 3em;
  font-size: 14px !important;
  margin-right: -1em;
}

#tile-99 .tile-primary tbody tr:nth-child(1) td p:nth-child(1) {
  text-align: left;
}

#tile-99 .tile-primary tbody tr:nth-child(1) td:nth-child(1) {
  text-align: left;
  width: 135px !important;
}

#tile-99 .tile-primary tbody tr:nth-child(1) td:nth-child(2) {
  vertical-align: top;
  padding: .25em .5em;
  text-align: left;
  vertical-align: top;
}


#tile-99 .tile-primary {
  line-height: 1.4em;
  padding: 0;
  vertical-align: top;
}

#tile-99 .tile-primary>div {
  overflow: hidden !important;
  height: unset !important;
  margin: 0;
}

#tile-99 .tile-primary img {
  text-align: left;
  margin-top: -1px;
  margin-left: -1px;
}

#tile-99 .tile-primary tbody tr:nth-child(1) td p:nth-child(2):after {
  content: " ";
  background-image: url(https://hubitat.ezeek.us/smartly-base/assets/images/logo_life360_75px.png);
  width: 100px;
  height: 3em;
  display: block;
  position: absolute;
  top: 0;
  margin-top: .5em;
  background-repeat: no-repeat;
  background-position: .25em 0;
}

Code below to remove the life360 logo:

/* REMOVE the life360 logo */

#tile-99 .tile-primary tbody tr:nth-child(1) td p:nth-child(2):after {
    display: none;
}

#tile-99 .tile-primary tbody tr:nth-child(1) td p:nth-child(2) {
    padding-right: .25em;
    padding-top: .5em;
}
2 Likes

This is how mine appears for some reason, it is most probably from me messing with something though haha.

image

1 Like

could you grab the HTML and pastebin it to me?

Here's mine... With a comparison to what it looked like before. Notice I lost my 'theme' background (coastal). Also using Chrome.

Html code...

<div id="tile-0" class="tile attribute h-full" style="grid-area: 3 / 1 / 6 / 4; font-size: 14px; border-radius: 20px; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden;"><div class="tile-title"> Life360 - Bryan </div><div class="tile-contents"><div class="tile-secondary"> bpt-statusTile1 </div><div class="tile-primary" style="font-size: 21px;"><div style="overflow:auto;height:90%"><table width="100%"><tbody><tr><td width="25%" align="center"><img src="https://www.life360.com/img/user_images/0dba473f-3153-49dc-901e-134c9a46a45b/70354fdf-9ae7-4ba3-84ba-07b66bedf324.png?fd=2" height="75%"></td><td width="75%"><p style="font-size:15px">At: <a href="https://www.google.com/maps/search/?api=1&amp;query=42.668064,-71.32476" target="_blank">Home</a><br>Since: Sat 01:34 PM<br>0.00 Miles from: Home<br>Not Moving - 0 MPH<br>Phone Lvl: 100 - BTRY - Wifi<br></p><p style="width:100%;text-align:right;font-size:12px">05-30 - 6:39:44 PM&nbsp; &nbsp; &nbsp; &nbsp;</p></td></tr></tbody></table></div></div></div><div class="tile-edit"><i class="material-icons"> more_vert </i></div></div>

1 Like

Hi, this is mine and I can't seem to get rid of the scroll bar, it literally scrolls like 2mm. I can make the tile wider, but then I have a big blank area below all the writing?

Life360

EDIT: I think it might be the picture size, I have tried to change this in the device settings, but does not seem to change it on the dashboard, is this size coming from the css code, also how can we make it more opaque so that the background comes through more.

Edit 2: Okay worked out the opacity change the last digit to a lower number, was .8 so made it .3
background-color: rgba(0,0,0,.3);

1 Like

From fiddling with mine i think i may have had the wrong attribute selected on the tile, i was using statustile1 and have changed it to bpt-statustile1 and it looked better. I also noticed you can change the font size within each devices preference's also.

1 Like

@bptworld and @greglsh I've updated the code in the original post above. Everything should bleed to the top of the tile, nothing should get cut off and the scrollbar shouldn't appear anymore.

@welby1978 good to know, yes we will all need to select bpt- prefix attributes in order for smartly to automatically detect and apply this css. re: the font sizes, we should be okay so long as nobody goes crazy with font size. smartly will have a 'zoomable' feature in the next release, so that should put an end to huge font size settings.

I have it set the picture size to 135px wide, which appeared to be a standard width Life360 uses for their images.

Much better :grin: Only thing is the background not matching the rest of the tiles. Anyway to change it?

Screenshot 2020-05-30 at 7.09.13 PM

Thanks!

1 Like

@bptworld

Look for the line of code with this, change the .8 to say .4, the lower the number the more "see through"

background-color: rgba(0,0,0,.8);

Thanks, that may answer my next question too...

Personal preference would be for the Life360 icon tab be smaller. Also, to make it see through or without the white background.

Edit: .4 is MUCH better, Also got rid of the white background and the icon. Just a personal choice. :grin:

Screenshot 2020-05-30 at 7.41.19 PM

1 Like

Look for this line

background-color: white;

Change the white to one of these (I think this is limited to these colours, could be wrong)
black, navy, blue, green, teal, lime, aqua, maroon, purple, olive, gray, silver, red, fuchsia, yellow and white.

Nope, just got rid of that line altogether. :wink:

@spelcheck

How would I make the font size slightly bigger below the logo, just slightly. This is the last update time so nice to see what is going on.

Thanks again for this looks fantastic.

So about that.. the smartly-base stock background color of attribute tiles I've been thinking is too light for white text to be over it. Evergreen skin has that overridden to be darker, which I like but there is probably a middle ground somewhere that would be good for all skins. I plan on changing smartly-base default attribute tile color at some point to be slightly darker.

For this tile, I just made it significantly darker to make it stand out, but I get that it should probably blend in more with the other tiles. I also branded it, etc to make our dashes look a bit more ah, commercial. I might have that as an option, to show the service logo or not because not everybody wants logos on their tiles :slight_smile:

This is looking good though, and thank you for building this device in the first place!! I'm just here adding CSS :stuck_out_tongue:

2 Likes

I just bumped the 'last updated' text up a few px in the OP code, and lightened the background 20%. :slight_smile:

I didn't make the logo smaller but I added a block of code to after the OP CSS to remove the logo altogether. :raised_hands: that will definitely be an option in the mod settings.

making the little last updated 'pill' transparent white won't work because of design, but maybe removing the logo will make that white space smaller so you'll keep it white :smiley: the more I can design for you guys the less I see the design changed and the happy I be :stuck_out_tongue:

1 Like