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

[arnb]

@shawn.foist

Can I 'hide' it and then replace it?

Not exactly intuitive, but this worked for me in the Vivaldi chrome based browser. YMMV.

#tile-nn>.bottom-0 {
text-indent: -9999px;
line-height:0;
}

tile-nn>.bottom-0:after {
text-indent:0;
content:'Ecobee';
display:block;
line-height: initial;
}

When there is a single thermostat on the dashboard you may safely eliminate the #tile-nn> text

Similar concept to @thebearmay's above. Hide the current stuff, then put something back in to replace it.

[shawn.foist]

@thebearmay

#tile-xx .absolute{
         font-size:0;
         }
#tile-xx .absolute:after {
          content:"Hallway";
          font-size:12px;
         }

Worked like a charm!!!

[arnb]

Both solutions work for me almost every place I've tried, except the Android Hubitat app.

@thebearmay's shows three extra characters "uto' after the content.
my solution shows nothing in the text field

No one ever said CSS is browser agnostic.

[thebearmay]

Unfortunately there are standards and then there are standards. (Just checked the iOS app and don't see the extra characters)

Those 3 characters look like the word Auto may have gotten split out somehow, not sure how that would occur, but as you said

@arnb

No one ever said CSS is browser agnostic.

[arnb]

@thebearmay

Those 3 characters look like the word Auto may have gotten split out somehow

Exactly what I thought when I first noticed it. Just not worth my time tracking it down. I'm guessing it has something to do with whatever browser version is used with, or embedded in, the Hubitat Android app.

[tbird412]

How would you hide the "footer" of just one tile though? For example my weather tile has "Weather" at the bottom which overlaps some of the graphics. Here is the inspect ...

[thebearmay]

To start, you'll need to find the tile ID number - click on the three vertical dots on the tile and it should display something like

Using ID number displayed in the upper left, click on the Cog in the upper right of the dashboard and go to the CSS tab and enter

#tile-xx .tile-title {
          display: none;
}

where xx is the ID number from above. Click Save

[mr.turbo750]

Question... On your Nav bar at the bottom are you just linking to other Dashboards? Trying to figure out a way without linking to another dashboard to change what show up in the body of the dashboard. In my experience swapping between dashboards takes too long.

[rocketwiz]

Links will open a new dashboard (I have similar navigation links on mine) and yes it does take time to load unfortunately.

[TechMedX]

@rocketwiz is correct they open other dashes. It shouldn't take more then 1-2 second it switch.

[alan564923]

Oh Great @rocketwiz and anybody else

I'm trying to "increase" the font size of the value of the Mode tile. (Note: this is a smartly modified dashboard). As you can see in the below image, the value "Night" is smaller than the value of Floor "3". Now Floor is a tile master tile and Mode is a regular tile.

Here is my code in the CSS portion of the JavaScript attempting to force the font size (with important):

Here is the style from debug:

as you can see near the top, my code is wiped out

Your assistance is appreciated.
Alan

[alan564923]

Typos galor:

Fixed Code here:

#tile-110 .tile-primary {
font-size : 24px !important;
}

Worked. Courtesy of the Smartly people.
Alan

[j.smulders]

Hello,

Is there anybody who can help me. I want to hide the following element in the Weather forecast tile:

Thank you very much for your help.

Regards,

John

[mbarone]

.dewpoint {
    display:none;
}

If you have other elements with class="dewpoint" that you want to remain visible, you may need to add another identifier to only hide this specific element.

.dewpointContainer .dewpoint {
    display:none;
}

This will only hide the class="dewpoint" if it is inside another element with class="dewpointContainer"

[j.smulders]

Hello mbarone,

Thank you for your quick reply. I copied it into the CSS, but it is not working. I just started with CSS, so I have no idea what I did wrong.

[mbarone]

Hmm. After you save the css, the dashboard will need to be refreshed for the css to take affect.

Also, you can check to make sure the css is getting read properly in the developers console (the screenshot you posted). When you select any element in the dev console, it will show yoy all css that applies to that element, even if its disabled/overridden/not applied.

And just to confirm, you are using the first example, not the one with 'dewpointContainer'

[j.smulders]

I used the first example and refreshed the dashboard. I need to study more about the CSS programming, now I have no idea where it goes wrong. I was able to do some simple changes in CSS, but it looks like this is a little more complicated.
I will continue tomorrow. Thanks for your help so far.

[paul]

I have one contact sensor that I am using in the reverse. All of my contact sensors are white when closed and blue when open for the background. What I would like to do is the one that works in reverse I would like it to be white when open and blue when closed. I am having trouble with css for it.

[sdonaghe]

Does anyone know how to fix Attribute tiles from having an outline?

If I go into the Template settings for Attribute tiles and change the background to black it removes it, but then the 3 temperature tiles in the screen shot show a black border around them and ruins the display.

Is there a CSS setting to remove that grey border or whatever it is called? It seems to only be on Attribute tiles afaik.

[thebearmay]

Might try:

.tile {
        border:none;
}