# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flexbook.gitbook.io/integracni-manual/javascript-komponenty/prizpusobeni-komponent-pomoci-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.