# Customizing and Styling

### Optional Page Sections

You can hide or show various parts of the user interface

* Left Navigation Bar
* Header
* Title Block

Controls for elements are found under the `Appearance` tab of the [site editor](/v1/reference/site-settings.md).

These optional components can also be controlled dynamically using JavaScript functions and triggered via a function action. See this page for an example.

### Navigation

Navigation menu options can be configured in the navigation tab of the site editor.

{% content-ref url="/pages/-LKI57Ac9qWPBNv5FCqm" %}
[Navigation](/v1/reference/site-settings/navigationoverview.md)
{% endcontent-ref %}

### Theme Template

The default theme template is your starting point for customization. To browse around the theme template, [click here](https://beta.fmbetterforms.com/template/), or use the **Theme Template** link from the navigation menu of the BetterForms interface. From here you can inspect the underlaying HTML of page objects such as buttons etc. This allows you to see the CSS classes and HTML code that is used to compose the element.

### Integration Methods

Your apps can being deployed or integrated with several methods.

* Regular **domain** / direct access app - This is a basic web site style page, most common.
* Embedded **iFrame** app using a code snippet like this to embed your application into an existing web site. Styles from the parent site will not alter styles within your App.\
  `<iframe src="https://myapp.fmbetterforms.com/" width="100%" height="800px" style="border: 0; "></iframe>`
* **Button** Launch - By adding a button on an existing site, you can open a new tab to launch your app.

### Default Theme Colors

BetterForms has several default site theme colors. This can act as a starting point for your app. Themes are selected under site / appearance.

Some elements have an additional classes key for targeting internal components to that element. Buttons are an example of this. The `buttonClasses` key in this case allows you to target the button itself and not the wrapping object around the button.


---

# 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://docs.klai.studio/v1/usage/stylingverview.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.