[smartly] hubigraph CSS patch

Continuing the discussion from [RELEASE] smartly v1.06 - custom icons, thermostat re-design, custom dashboard link labels and icons:

@Navat604 Yep, we have some CSS in the works.

@Navat604 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 hubigraph 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 {
  border: 0px none;
}

#tile-99 .tile-contents {
  height: calc(100%);
}

#tile-99 .tile-contents,
#tile-99 .tile-primary,
#tile-99 .tile-primary>div {
  margin: 0;
  padding: 0;
}

#tile-99 .tile-title {
  position: absolute;
  z-index: 9;
  padding: .25em;
  width: 100%;
  text-align: center;
  opacity: .5;
  font-weight: normal;
  font-size: .9em;
  z-index: 1;
}

Code below to make the title black (if you have configured hubigraph for a white background)

/* make hubigraph title black */

#tile-99 .tile-title {
    color: black;
}
2 Likes

Thank you sir! that was quick and fixed the extra border.

1 Like

Is the tile title visible? I just added z-index: 1 to the title to make sure it's visible.

Edit: could use a screenshot of a good lookin graph with the CSS fix if you can take one!

It's visible at the bottom. I am just starting all the dashboard for my brother. He's just dipping his toe in HE. Was a die-hard Wink user.

1 Like