> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/docs.facephi-en/products/landing/personalizacion.md).

# Customization

The homepage is easily customizable through the Landing Customization page. This Customization will be carried out upon request to the Facephi team.

## Simple Style Configuration

The theme can be configured with the following parameters:

{% columns %}
{% column width="33.33333333333333%" %}

<div align="left"><figure><img src="/files/4cfdad22843d798390a811d268632eec63c2236b" alt=""><figcaption></figcaption></figure></div>
{% endcolumn %}

{% column width="66.66666666666667%" %}

### Typography

* **Font**: Font family applied to the page.

### Colors

* **Primary**: Color applied to the header.
* **Secondary**: Color applied to the primary elements of the widgets.
* **Tertiary**: Color applied to the secondary elements of the widgets.
* **Background**: Background color of the component.

### Custom Style

* **Custom CSS**: Additional advanced CSS configuration.
  {% endcolumn %}
  {% endcolumns %}

These parameters will modify the `theme` and CSS variables of the SDK Web components.

***

## Advanced CSS Configuration

The entire Landing page can be customized using the CSS variables provided by the tag `facephi-sdk-provider` of the SDK Provider, allowing a higher level of Customization.

Simply add the desired CSS variables in the text area `Custom CSS`.

See the [complete list of CSS variables](/docs.facephi-en/sdks/sdk-web/personalizacion.md) to see all available CSS variables provided by the SDK Provider and the widgets.

**Example**:

```css
facephi-sdk-provider {
  --wrapper-color-capture-fail: red;
  --wrapper-color-primary: green !important;
}
```

> Warning: If you override the CSS variables set by the theme, you must use the flag `!important` for your changes to take effect.

#### CSS variables affected by the theme:

* **Font**: `--wrapper-primary-font`, `--wrapper-secondary-font`.
* **Secondary**: `--wrapper-color-primary`, `--wrapper-color-progress-bar`, `--wrapper-color-tutorial-background`.
* **Tertiary**: `--wrapper-color-hover`, `--wrapper-color-tutorial-shirt`.
* **Background**: `--wrapper-color-background`.

**Example**:

```css
facephi-sdk-provider {
  --wrapper-color-background: #000000 !important;
}
```

***

## Custom domain

How to use a custom subdomain instead of the Landing domain.

### Custom domain configuration options for Landing

{% columns %}
{% column %}

<figure><img src="/files/74c26764d7af3231b0c95d8c68ed2b8842afea6f" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

#### Domain type:

* **Facephi domain:** Default domain offered by the Facephi team.
* **Custom Domain**: Custom domain to be used for the Landing provided by the client.

#### Name

Identifier name for the Landing.

#### Custom Domain

Custom domain that the client must provide to be used for the Landing.

#### SDK API Key

SDK API Key generated by the Facephi team for that domain.
{% endcolumn %}
{% endcolumns %}

### Domain configuration by the client

The client is provided with the following *CNAME* so that it can be associated with the respective configured subdomain: `landing.idv-suite-cd.com`

This subdomain must be configured with the *CNAME* defined in the name server record to which the provided domain is associated.