# Skins

By updating the **Template** on your Sections, you can update the format of your search results. The overall look & feel of your Searcher is controlled by **Skins**. We’ve included pre-packaged Skins that you can use, simply by updating the ‘Skin’ field on your Searcher. You can also modify or create your own Skins. Note that Skins have minimal effect to Searchers on workspaces, as ServiceNow tightly controls that UI.

To understand how to approach Skin customization, it helps to understand how the OneSearch UI renders. Check out the diagram below to see how the components are nested.

* At the top level, you have the ServiceNow UI – this could be a form, a portal page, a record producer, a Workspace, etc. The level of customization available here varies. This is generally where the search field exists.
* Next you have the OneSearch UI Macro/Widget/Component, which is the container for the entire OneSearch UI. There are no visual components here, just functional stuff.
* Next you have the OneSearch Skin (**YDS OneSearch->Skins**). This is the visual container for a Searcher. It determines the frame of the Searcher and how the Sections are rendered. You can create your own Skins and use different Skins for different Searchers. There may be some unfamiliar variables here, so we recommend using an existing Skin as an example.
* Finally, you have the OneSearch results. These live in the OneSearch Section record under the **Appearance** tab and can be unique for each individual searcher Section. Here, we use AngularJS compiled HTML to dynamically generate each search result. Again, we recommend using existing Sections as examples.

Customization at this level is advanced, and may require knowledge of HTML, CSS, and AngularJS. However, we’ve given you plenty of examples, so feel free to experiment! We’ve included lots of information about helper classes in the annotations on the **Docs & Settings** & **Section** records to help you along.

<figure><img src="/files/uNxkLuu7K2YKUOM3ihMi" alt=""><figcaption><p>OneSearch Onion</p></figcaption></figure>


---

# 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.yansalabs.com/onesearch/technical-docs/skins.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.