# Customize Look & Feel

In ONEWEB, the **look and feel of Smart Forms** is primarily controlled using **CSS (Cascading Style Sheets)**.\
CSS is a styling language used to define how content is presented visually, allowing a clear separation between **structure (HTML)** and **presentation (styles)**.

This approach enables consistent styling across the application while providing flexibility to apply custom visual designs.

***

#### **Default Custom CSS in ONEWEB**

ONEWEB provides a **default custom CSS file** that users can modify to define their own styles. This file is intended specifically for user‑defined customizations and is applied globally across all Smart Forms.

**Custom CSS file name:**

```
<CurrentTheme>_Custom_Style.css
```

To locate the file:

1. Open **Eclipse IDE**
2. In the **Project Explorer**, navigate to:

```
/MasterWeb/WebContent/theme/<CurrentTheme>/
```

3. Open the file:

```
<CurrentTheme>_Custom_Style.css
```

For example, if the current theme is `Responsive2016`, the file name will be:

```
Responsive2016_Custom_Style.css
```

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fze4oYuK483INRYgPgMtk%2F0?alt=media" alt=""><figcaption></figcaption></figure>

***

#### **Adding Custom Styles**

When you start using ONEWEB, the custom CSS file is **empty by default**.\
You can add any CSS rules in this file to define styles that should be applied across Smart Forms in your project.

Examples of common customization scenarios include:

* Changing Smart Form header colors
* Modifying background colors of input fields
* Adjusting font styles, spacing, or borders

Example (illustrative):

```
/* Example: customize header appearance */
.smartform-header {
    background-color: #f5f5f5;
}
```

```
/* Example: set default background for text fields */
input[type="text"] {
    background-color: #ffffff;
}
```

Any styles defined in this file are **applied globally** and affect all Smart Forms that use the same theme.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FyNAXkfYMk2Hh0SAUMR6F%2F1?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FDJExO5XztGP3860O3qU3%2F2?alt=media" alt=""><figcaption></figcaption></figure>

***

#### **Apply CSS Changes**

After updating the custom CSS file:

1. Save the file in Eclipse
2. Right‑click the **Server**
3. Select **Publish**
4. Wait until the server state changes to **Synchronized**

This deploys the updated styles to the runtime environment.

***

{% hint style="info" %}
**Note**:\
After publishing changes, clear the **browser cache** to ensure the new CSS styles are properly loaded.&#x20;
{% endhint %}

***

#### **Summary**

Customizing the look and feel of Smart Forms in ONEWEB is achieved through **theme‑based CSS customization**.

Key points:

* Styling is managed through a dedicated custom CSS file
* Changes apply globally across Smart Forms
* No core files need to be modified
* Supports consistent branding and UI standards
* Easy to maintain and update

This approach allows teams to fully control Smart Form presentation while preserving structure, responsiveness, and maintainability.


---

# 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.onewebstack.com/building-apps/ui-page-designer/ux-ui-customization/smart-form-customization/customize-look-and-feel.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.