Is it possible to use CSS to remove the text shadow on tiles?

🧰 Built-In Apps and Drivers Dashboard
1

I'd like to remove the text shadow effect from a tile. I've tried various forms of text-shadow CSS in the layout, but it doesn't seem to recognize the command.

2

Try this

.tile { text-shadow: none; }

1 Like
3

That worked great! Is there a way to apply it to a specific type of tile?

4

Yup --- what type? You can use web inspector to find the class name for your tiles (right click > inspect element) and then use .className {text-shadow: none;}

5

Been following this. I did the inspect, got a lot of info. But don't see a tile class name. I found a div ID, but that didn't seem to work.

6

Here's an example. See where it says: class="tile themostat etc..."? That's where you'll find the class name you need :slight_smile:

inspector

Edit: This is found by inspecting the top-most level of each tile.

7

Ok, I see that. But if there is more than one tile of the same type then it would apply to all of them. Course I can't really see a reason for not doing it to all tiles anyway, but just trying to learn for my own knowledge.

8

Using the class name for a tile type (in my example, thermostat) will apply it to all tiles of that type.

Edit: If you're wondering how to apply it to an individual tile, you'd want to use its ID name---which, in my example, is #tile-0{ style here }

IDs are for individual elements, Classes can be reused.

9

AH, got it. Didn 't know about the #. Thanks for the info.

1 Like
10

How do I access the following attribute?

image
image1408×98 9.9 KB

#tile-26{padding:0px;} (or 8px etc) works, but it does not work for font-size. The size of "Solar Panel Statistics" is controlled by the font-size to the left of it.

11

#tile-26 > div > div {font-size: 21pt;} will select the innermost element.

If you want to override all elements, #tile-26{font-size: 21pt !important;} will also work, but good CSS practice is to never use this attribute :slight_smile:

12

Just curious, what is the div mean?

13

DIV is a section in HTML. If you look closely at the picture, you can see where it says “<div id=...”, and the CSS I sent says to look for ID tile-25, then look for a child div, and then apply the style to the next set of child DIVs.

There are lots of different tags used to define certain attributes and change how web pages are rendered, though.

14

Thanks a lot this help !
Could you point me to a tutorial or a learning resource to improve my knowledge on these?

15

There are quite a few places to start learning CSS---I'm not sure any of the resources I used so long ago still exist. :slight_smile: W3Schools is a great resource to learn more, as is Mozilla's documentation.