Question about styling

[ghost]

Hi

I'm trying to fine tune the css to my liking, but apparently I'm not very good at it, and could use some pointers. I'm trying to modify the card title size, like so

style: |
  :host {
    --tile-background: rgba(115, 115, 115, 0.2);
    --tile-on-background: rgba(255, 255, 255, 0.8);
    --tile-width: 120px;
    --tile-height: 120px;
    --tile-icon-color: #9da0a2;
    --tile-name-text-color: rgba(255, 255, 255, 0.3);
    --tile-state-text-color: rgba(255, 255, 255, 0.3);
    --tile-on-name-text-color: rgba(0, 0, 0, 0.6);
    --tile-on-state-text-color: rgba(0, 0, 0, 0.6);
    --tile-width-mobile: 120px;
    --tile-height-mobile: 120px;
    --tile-icon-size: 50px;
  }
  .card-title {
  font-size: 22px;
  padding-top: 30px;
  }

But this gets overwritten. I'm very new to css, so I have no idea what I'm doing wrong

[DBuit]

Hi @elfhack ,

the css you are using if good. But because the card it self also sets a size for the tile it prefers that css. But you can overwrite it! 👍

As you see in you inspect you see the .card-title css the first part it the css that is applied. The second part with .card-title it is crossed out, so it is not applied but this the part you added. So to say it should use your css no matter what add !important to it.

So this would make your configuration like this:

style: |
  :host {
    --tile-background: rgba(115, 115, 115, 0.2);
    --tile-on-background: rgba(255, 255, 255, 0.8);
    --tile-width: 120px;
    --tile-height: 120px;
    --tile-icon-color: #9da0a2;
    --tile-name-text-color: rgba(255, 255, 255, 0.3);
    --tile-state-text-color: rgba(255, 255, 255, 0.3);
    --tile-on-name-text-color: rgba(0, 0, 0, 0.6);
    --tile-on-state-text-color: rgba(0, 0, 0, 0.6);
    --tile-width-mobile: 120px;
    --tile-height-mobile: 120px;
    --tile-icon-size: 50px;
  }
  .card-title {
    font-size: 22px!important;
    padding-top: 30px!important;
  }