# Custom CSS

Add another level of customization to your app or workspace with custom CSS.

### Enabling Custom CSS

1. Click **App Settings**
2. Click Appearance
3. Choose Custom CSS
4. Expand section

 

<figure><img src="https://support.stackerhq.com/hc/article_attachments/8676169176211/custom_css.gif" alt=""><figcaption></figcaption></figure>

The editor has auto-complete and error checking. You will see that the autocomplete is dynamic so that you can quickly search for fields and pages to style. Clicking Save Custom CSS will instantly update the CSS on the page.

### Current Class List

This is the list of top level classes in the application. We also add style/table/page and field namespacing so that you are able to target specific elements if you need to.

* **Page** - stk-page
* **List page** - stk-list-page
* **Record detail page** - stk-detail-page
* **Record create page** - stk-create-page
* **Save button** - .stk-save-button
* **Edit button** - .stk-edit-button
* **Cancel button** - .stk-cancel-button
* **Delete button** - .stk-delete-button
* **Header outer (includes secondary navigation)** - stk-header-outer
* **Header** - stk-header
* **Secondary navigation** - stk-secondary-navigation
* **Logo** - stk-logo
* **Main navigation** - stk-navigation
* **Navigation Item** - stk-navigation-item
* **User menu** - stk-user-menu
* **Content** - stk-content
* **Button** - stk-button
* **Heading** - stk-heading
* **Text** - stk-text
* **Input** - stk-input
* **Cards** - stk-cards
* **Card** - stk-card
* **Card link** - stk-card-link
* **Card field** - stk-card-field
* **Table** - stk-table
* **Table header** - stk-table-header
* **Table header cell** - stk-table-header-cell
* **Table row** - stk-table-row
* **Table cell** - stk-table-cell
* **Previous button** - stk-pagination-back
* **Next button** - stk-pagination-next
* **List search** - stk-list-search
* **Inline filters** - stk-inline-filters
* **Field** - stk-field
* **Record list** - stk-record-list
* **Record header** - stk-record-header
* **User Menu**
  * **My Settings** - .stk-user-menu-settings
  * **Logout** - .stk-user-menu-logout
  * **Workspaces** - .stk-user-menu-workspaces
  * **Workspaces Title** - .stk-user-menu-workspaces-title
  * **Workspaces Add New Button** - .stk-user-menu-workspaces-add-new
  * **Open Stacker Classic** - .stk-user-menu-stacker-classic
* **Buttons**
  * **Save** - .stk-save-button
  * **Edit** - .stk-edit-button
  * **Cancel** - .stk-cancel-button
  * **Delete** - .stk-delete-button
  * Target **text of any buttons** - .stk-button-text class

Please be aware, using auto-generated CSS is subject to change.

Ignoring the CSSIf you wish to see the page without the css applied, you can pass the parameter **?ignore\_css=1** to the url.


---

# 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.stackerhq.com/stacker-classic/customization/custom-css.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.