# Styling

Web components provided by us can be seamlessly integrated and styled to align with your website's design, utilizing CSS for customization. These components leverage the shadow DOM for encapsulation, which inherently restricts direct access to their CSS classes to avoid styling conflicts with the rest of your website. Nonetheless, to facilitate customization, certain DOM elements within the configurator are exposed, enabling styling through the ::part pseudo-element. In addition to this, several CSS variables are available. The example below illustrates how to style the cm-config-group-title part within the .menu CSS class of the basic menu example:

{% code lineNumbers="true" %}

```css
.menu {
  justify-content: center;
  width: 15%;
  background-color: #f4f4f4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 400px;
}

/* This will change the apprearance of the configuration group titles */
.menu::part(cm-config-group-title) {
  background-color: #d78a5e;
  padding: 10px;
  color: white;
}
```

{% endcode %}

A full example with more styling options can be found in the [samples repository](https://github.com/colormass/samples/tree/configurator-webcomponents/configurator-webcomponents). This example also covers the CSS variables.

Even though the CSS classes are not directly accessible, you can see all the exposed parts in the dev tools of your browser as illustrated in the figure below:

![part-illustration.jpg](/files/dqOX1ve8rfLGkrkwlGlk)

## HTML attributes

In addition to CSS, the following HTML attributes are available, which change the appearance of the menu:

* **ui-style-override**: Changes the operation mode of the menu, available values are default, icons and accordion
* **use-captions**: Displays captions underneath the icons

For example, the following html code displays an accordion menu with captions underneath the icons, the full example is found on [github](https://github.com/colormass/samples/tree/configurator-webcomponents/configurator-webcomponents/styled%20menu).

```html
<cm-configurator-menu ui-style-override="accordion" use-captions="true" style="width: 100%"></cm-configurator-menu>
```

![image.png](/files/Vo902ErWGEOT09SxA9gn)


---

# 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.colormass.com/dev/configurator/web-components/styling.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.