# CSS stylizacja karty w aplikacji - przykłady

**URL:** <https://ai-speaker.discourse.group/t/css-stylizacja-karty-w-aplikacji-przyklady/1839>\
**Category:** faq\
**Created:** [9 Czerwiec 2021 13:47 UTC](https://ai-speaker.discourse.group/t/css-stylizacja-karty-w-aplikacji-przyklady/1839 "2021-06-09T13:47:59Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

Autor: ![jolka](https://yyz2.discourse-cdn.com/free1/user_avatar/ai-speaker.discourse.group/jolka/32/5_2.png) [@jolka](https://ai-speaker.discourse.group/u/jolka)\
Data publikacji: [9 Czerwiec 2021 13:47 UTC](https://ai-speaker.discourse.group/t/css-stylizacja-karty-w-aplikacji-przyklady/1839/1 "2021-06-09T13:47:59Z")

</div>

# Jak wiemy CSS is Awesome 😉

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/9/94d71eb8bcad8db6b2df3daf245e4887a04daf0c.jpeg)

# 2 Przykłady z życia:

## Kod przycisku kontrolera HID

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/4/48b0b44d8819434722af3b947c5ad011d457d5b6.png)

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/f/f8cd83b403bd113712cbb72d7b846bee0b4544f8.png)

chcemy powiększyć kod przycisku bo jest mało widoczny, w tym celu do kodu:

```yaml
type: button
tap_action:
  action: none
entity: binary_sensor.ais_remote_button
show_state: true
hold_action:
  action: none
show_name: true
icon: 'hass:keyboard-settings'
name: Kod przycisku kontrolera HID

```

dodajemy taki styl:

```auto
style: |
  ha-card .state {
    font-size: 16em;
    color: var(--secondary-text-color);
    color: var(--primary-color); 
    position: fixed;
    bottom: 30%;
    font-weight: bold;
  }

```

i już mamy kartę z widocznym kodem przycisku na całą stronę

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/7/7636a3f793f48a176b011f62e9dfa9a1c8a44dab.png)

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/7/7f61560515b36100b0f28122e40dcde31bc13760.png)

## Karta z awatarem Jolka

Nie podoba nam się napis na dole karty i chcemy go ukryć

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/6/6f8196e5d495da9485e7bec7f49c2291038fba16.jpeg)

dodajemy do ostatniej kary taki styl

```auto
style: |
      ha-card {
        position: relative;
        bottom: 6em;
        align-items: center;
        border: solid black 1em;
      }

```

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/f/fc191d286577b2ce335541b09afe43008c4750d0.jpeg)

i już jest lepiej

 ![image](https://global.discourse-cdn.com/free1/uploads/ai_speaker/original/2X/0/044416135ca3a03e9fa1c4e297ee465f0297f5ee.jpeg)

kod karty:

```yaml
cards:
  - entities:
      - entity: input_text.ais_knowledge_query
    show_header_toggle: false
    type: entities
  - type: conditional
    conditions:
      - entity: sensor.ais_speech_status
        state_not: DONE
    card:
      type: picture
      image: 'http://www.ai-speaker.com/images/free.gif'
      tap_action:
        action: none
      hold_action:
        action: none
  - type: conditional
    conditions:
      - entity: sensor.ais_speech_status
        state: DONE
    card:
      type: picture
      image: 'http://www.ai-speaker.com/images/free.jpeg'
      tap_action:
        action: none
      hold_action:
        action: none
  - content: >
      <ha-icon icon="mdi:face-woman"></ha-icon> {{
      states.sensor.aisknowledgeanswer.attributes.text }}
    type: markdown
    style: |
      ha-card {
        position: relative;
        bottom: 6em;
        align-items: center;
        border: solid black 1em;
      }
type: vertical-stack

```