CSS Tile Hiding

[kubawandzik]

Hello All - I am trying to hide tertiary part of the tile using CSS. I have two identical tiles representing water leak sensors. It works for one but does not remove part of the other. CSS code below
removes temperature reading - #tile-80 .tile-tertiary {visibility: hidden}. What can cause this behavior?

[Navat604]

@kubawandzik

removes temperature reading - #tile-80 .tile-tertiary {visibility: hidden}

Try adding !important;

tile-80 .tile-tertiary {visibility: hidden !important;}

[kubawandzik]

I tried and still not working any other ideas?

[Navat604]

Tagging @sburke781 . He knows a thing or 2 about CSS.

[william2]

You may also want to check out this thread for dashboard CSS, loads of information.

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

[kubawandzik]

Thanks-I am familiar with the guide and it helped me greatly! I am struggling with something that works for one tile but for some reason doesn’t for another one.

[sburke781]

You could play around with my CSS editor to see what is coming through where. And editing the tile css. Otherwise I can take a look later tonight if needed.

[william2]

@kubawandzik

I am familiar with the guide

Have you tried clearing your cache? if not try Ctrl+Shift+Del on Windows or Command+Shift+Delete on a Mac.

[kubawandzik]

Thanks very much! What would you need from me? I am just using the advanced section of dashboard CSS. Anyway to verify/inspect where the problem might be?

[sburke781]

I'm out at the moment, so thinking about it again it will probably be easier to work with the CSS manually for now.

[sburke781]

I feel like it may be worth getting a few base details to start with:

• The driver(s) used for the two devices on HE
• The template used for the two tiles on the dashboard
• A screenshot of the two tiles with no CSS editing applied
• Optional - A screenshot of the developer tools from your browser of choice would be handy, i.e. the HTML for each tile, but if you are not familiar with doing that, we can focus on the details above to start with.

If you want to try using my CSS Editor, it is located in the topic below.

[RELEASE] Simple CSS Editor

The Simple CSS Editor is now released, allowing easy access to common Dashboard styling options without any CSS knowledge required. Find it on Hubitat Package Manager (HPM) under the convenience tag. Why Would I Use Simple CSS Editor? Many people, after having used HE's built-in dashboards, want to take the next step in polishing their new creation, making it a showpiece in their home. Three common barriers to this are: Easy access to basic formatting options for dashboards and tiles A lac…

The setup includes:

• Install the drivers from HPM
• Ccreate a virtual device using the driver
• Add it to a dashboard, including adding a tile
• Add an import statement in the same CSS dialog you have been working in so far for the CSS file produced
• Click on the tile and start editing the formatting of tiles

The CSS Editor that pops up includes options to edit most text displayed in a tile, and displays the text HE includes in each spot, so may be useful in this situation. E.g. Notice the "TextTile section displays the text "Bathroom". Other areas like Primary, Secondary, etc will display a value where one exists on other tile types.

[kubawandzik]

Thanks for all the help and pointing me in the direction of CSS editor. For some reason I was not able to hide the third section but when I selected replace and left blank, it worked. Thanks again!