The Noob's (in)complete guide to CSS for Hubitat

[markus]

Replace all CSS with this:

.tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}

#tile-57 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}
#tile-57 .tile-title:after {
    content: 'All Leak Sensor';
}

[danderson]

That worked! Thank you very much!!!

[cj_rezz]

Thanks, that worked! Man it's crazy how complicated it is just to change the name of a tile!! Thanks for your help!

[arnb]

Should you have image tiles with large margins, and you are unconcerned about changing the image's perspective, here's how I changed it to fill the entire tile.

Using Firefox with Windows 10 (should be similar with Chrome)

1. display the dashboard

2. Place cursor over image tile element; right click to display a menu, click on Inspect Element

3. You should see something like this in the "pseudo elements" display

image[data-v-4784b085] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;}

3. Copy text image[data-v-4784b085] (your letter and numbers will vary) should you want to paste this information in the next step

4. Click on the dashboard's gear, click advanced, click CSS, then add the following: (note the leading period)
   .image[data-v-4784b085] {object-fit:fill;}

5. Save. Image should fill the tile and does in Fully

[arnb]

Should you be using an app generating large tiles that may overflow the defined tile space, here's how to modify the tile's CSS so the information is scrolled.

[RELEASE] DarkSky.net Weather Driver, no PWS Required

Should your dashboard be short of screen real estate and the mytile, 3day, or summary tile is truncated, it can be made to scoll as follows; get the tile id for the element In windows an easy way to do this using Chrome, place the cursor over tile element, right click, select Inspect. HtML source displays, get tile element id. Display the dashboard page, Click gear on tile's dashboard. Click advanced Click CSS add the following #tile-n {overflow: auto !important;} replace 'n' above w…

[JNS]

@adamkempenich just posted this and I thought I would share it here. Very cool!

[Dashboard CSS] Percentage in Slider Dot

I wanted to release this mod for dashboards. It's nice to see the percentage at a glance, sometimes. [image] All you need to do is copy/paste the following CSS into your Dashboard's custom CSS pane /* Dimmer Slider Bar */ .vue-slider-dot-handle{ width:170% !important; border-radius: 75px !important; margin-left: -30%!important; box-shadow: none !important; background-color: rgba(70,70,70); border: 2px solid rgba(255,255,255,0.75); } /* Percentage Text */ .vue-slider-dot-hover:h…

[stephen_nutt]

Is there a way to change the font globally on dashboard using CSS? I haven't seen it mentioned in this thread.

[stephen_nutt]

Nevermind, I found it will extensive Googling. This is the method I found:

• {
  font-size: 100%;
  font-family: Gill Sans MT Condensed;
  }

I love that I can use a Condensed font so I can make a bigger font and take up same width.

I did find that that font doesn't get used when i open on my Android. The new font works when using the skin that mentioned within this thread:

Underwhelmed and Overwhelmed (I couldn't look at Underwelmed any longer) all Welcomed

I've used the openvpn capability of my Asus Router and the app on phone and it works nice.

Is there something that I am missing?

[stephen_nutt]

Bumping. Any suggestions on why my Android phone won't use the correct font? If I use the Barlow Condensed font (default font in the Smartly skin) on a dashboard I created, my phone doesn't use BC. However, if i open a dashboard that uses the Smartly Skin, my phone does use the BC font.

I am using Google Chrome on my phone.

[markus]

@stephen_nutt Font changes in CSS needs to use "!important" in most cases, this is due to the fact they are defined in the element in the HE Dashboard, not in CSS.

[stephen_nutt]

Adding "!important" worked (sort of). Unfortunately it changed this:
to this:

I will go back to the beginning of this thread figure out how change font on a section by section basis instead of trying to be lazy and do it all with one CSS setting.

[markus]

@stephen_nutt ah, yes, global changes with !important can have some not so desired effects. This thread should help you define the right groups of elements to change.

[TechMedX]

Is there CSS to remove the "icon helper text" per tile rather than the entire dashboard?

[markus]

Very likely, yes. With "icon helper text", what do you mean? For a switch it would be the text "on" and "off", right? In general it is just a matter of prepending your selector with something like this

#tile-57

for the tile-title:

#tile-57 .tile-title {

Per tile-type would be a different thing. That is a bit more complex.

[TechMedX]

I want to take "Open Closing Closed Open" off Garage

found it here

[Angus_M]

Hi, collective wisdom of the forum,

Is there any way to suppress/remove the top banner on a dashboard (the home icon, green tick, + and settings gear icon)? I want to add multiple dashboards into iframes on html pages and they look a bit daft with all these top banners repeating everywhere.

Thanks.

woops - found it. Thanks.

Dashboard Header

Is it possible to hide the header with the dashboard name and hubitat logo?

[TechMedX]

@Angus_M I was given his code which allow the icons only to remain, but hides them in the bottom right of dash. Handy to still allow access to changes but "outta sight"

.dashboard div .header {
    position: fixed;
    bottom: 0;
    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: block;
}

Change the last line to " display: inline-block; " for horizontal.

[Angus_M]

Ok great, thanks.
Works beautifully!

[TechMedX]

Been playing more with CSS and figured out a few things I wanted to share

To change the thermostat up/down icon size...

.thermostat .pl-3 {
  font-size: 55px !important
}

.thermostat .pr-3 {
  font-size: 55px !important
}

This one resizes the music player icons and moves a few things around to make it more usable. I am using this with smartly YMMV

}
#tile-17 .material-icons {
   position: relative;
    top: -7px;
   font-size: 43px !important;
}
#tile-17 .tile-primary > div.dimmer > div.trackDescription {
 position: relative;  
 top: 15px !important;
}
#tile-17 .tile-primary > div.music-player.playing {
 position: relative;  
 top: 3px !important;
}

[mark.cockcroft]

is there a way to set all tiles transparent value to the same?