About Styling Tiles and Custom Cards (CSS)

[IamMrandrew]

Hey there, I am new to this repo but i am definitely in love with it. I got a few questions about styling.

Styling Individual Tile

First, I understand that we can style and change the variables of css with the whole views (which means apply to every cards/ classes). But is there any way for me to apply style to individual tile? (For custom card, I can use cardStyle)

Styling Custom Card

Also, for custom card (custom:mini-media-player), I cannot change the css (due to the shadow-root i guess?) the margin and padding seems a bit offset. I cant do it without handling the shadow-root on (custom:mini-graph-card) but not on the media player card. I tried to implement like card-mod but seems not working for me.

Here is my code for Mini-media-player, which is not important but just post for references

:host { height: 100%; } .flex { display: -webkit-flex; }
.flex.type-custom-mini-graph-card { padding: 0px; } .header {
margin-top: 8px; padding: 10px 13px 0px; } .header .name >
span { opacity: 1; font-size: 13px; }

.states { margin-top: 5px; padding: 0px 13px; } .state > span
{ line-height: 20px; } .states .state .state__value {
font-size: 20px; } .states .state .state__uom { font-size:
15px; } .states .state .state__time { font-size: 12px;
font-weight: 400; bottom: -1.3rem; }

.graph__labels { top: -20px !important; flex-direction: row !important; } .icon {
color: #F7CD47 !important;} .graph__legend { padding: 0 5px
35px !important }

Here is my code for Mini-media-player (Not working)

cardStyle: 
  .: |
    .mmp-player { }

  mmp-media-controls: 
    $: |
      .mmp-media-controls__volume { margin-top: -7px !important} .mmp-media-controls__media { margin-top: -10px !important}

Color of Tile's Icon

Thirdly, the icon of light change according to its color. I have already set useBrightness and useTemperature to false. But it still following to the light's color (RGB lights), which is not convenient as white light is kind of invisible on my tile

Different Popup Cards in Same Row

Also, is there any option for me to have different pop up cards for different entities in the same rows?

There are a lots of question xddd. Thanks a lot!! You have done a great job

[DBuit]

Hi @IamMrandrew ,

The question is a bit old but might help others also.

Styling Individual Tile: Yes, but with a work around, you can use the conditionalClass option to add a class to a specific tile like this:

conditionalClass: >
      [[[
          return "your-custom-class";
      ]]]

This class can than be used in the style part for specific styling.

Styling Custom Card: Can really help with card-mod but it is trial and error to get the style of custom card right.

Color of Tile's Icon i am gonna search for this bug as it is mentioned multiple times

Different Popup Cards in Same Row: Yes it is possible. You can define the popup on the row and use popupExtend to set specific settings for a tile. But you dont have to set in on the row, you can also just use popup on one tile or on multiple tiles in a row. The option to put it on the row was to get less configuration when using the same popup for a row of lights for example.