> For the complete documentation index, see [llms.txt](https://flexbook.gitbook.io/integracni-manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flexbook.gitbook.io/integracni-manual/javascript-komponenty/prizpusobeni-komponent-pomoci-css.md).

# Přizpůsobení komponent pomocí CSS

Velmi často budete chtít přizpůsobit předpřipravené JavaScript komponenty tak, aby lépe zapadaly do Vašich webových stránek, případně do Vašeho specifického rezervačního procesu. Například, když nechcete používat platebních možností FlexBooku, tak potřebujete schovat tlačítko pro platbu rezervace. Optimální je použít unikátních CSS identifikátorů nebo FlexBook CSS tříd (class), které jsou přiřazeny všem HTML komponentám použitých v rámci JavaScript komponent.

**Použití CSS identifikátorů**

Níže je uvedena ukázka schování platebních tlačítek pomocí CSS.

```
button#flexbook_resource_calendar_1_editReservationResourceButtonSavePay {
  display: none;
}

button#flexbook_resource_calendar_2_editReservationResourceButtonSavePay {
  display: none;
}

button#flexbook_resource_list_editReservationResourceButtonSavePay {
  display: none;
}
```

CSS identifikátory jsou generovány unikátně pro každou komponentu a jako prefix je použit identifikátor FlexBookové JavaScript komponenty. V uvedeném případě jsou to prefixy

* flexbook\_resource\_calendar\_1
* flexbook\_resource\_calendar\_2
* flexbook\_resource\_list

Ukázka JavaScript kódu pro tento CSS styl je uvedena zde.

```
<script>
      flbInit('http://www.flexbook.cz/ajax.php',4);
      flbProfile('flexbook_profil');
      flbResourceList('flexbook_resource_list');
      flbResourceCalendar('flexbook_resource_calendar_1', {
                resourceId: [7],
                resourceLabel: 'Rezervace',
      });
      flbResourceCalendar('flexbook_resource_calendar_2', {
                resourceId: [7,10],
                resourceLabel: 'Rezervace',
      });

    </script>
```

**Použití CSS tříd**

Jako příklad použití CSS třid použijeme způsob změny textu v konkrétním HTML DIVu, který je použit pro popis (label) konkrétního atributu zdroje z rezervačního systému FlexBook.

V HTML kódu to vypadá následovně

`<div class="label flb_event_name_label"><span>Nazev akce:</span></div>`

a pomocí CSS stylu jste schopni změnit automaticky generovaný text za text jiný.

```
<style>
div.label.flb_event_name_label:after {
  content: "Event name:";
}
div.label.flb_event_name_label > span {
  display: none;
}
</style>
```