---
schema_version: "1"
id: f8072ea616974fa02e86c5d6fab98c4a7e0dc420e307a2548a7942bac6c0bf3d
title: Advanced Styling with CSS
collection: mulesoft
version: current
locale: en-us
portal_url: https://docs.salesforce.com/mulesoft/current/en-us/api-community-manager/css-styling.md
canonical_url: https://docs.mulesoft.com/api-community-manager/css-styling
source_site: docs.mulesoft.com
content_type: documentation
content_hash: 34e313dc0c9ecb462fea53248c991d4bc25fd52ec1216306adae596bab57d379
description: MuleSoft Documentation Site
latest: true
---
---
product: API Community Manager
---

# Advanced Styling with CSS

> For the full documentation index, see: https://docs.mulesoft.com/llms.txt

Anypoint API Community Manager offers advanced styling functionality with editable community site
Cascading Style Sheets (CSS).

The following sections summarize the available options. For detailed information, refer to
[Override Template Elements with Custom CSS](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_css.htm)
in the Experience Cloud Developer Guide.

## Edit the CSS

1.  In the API Community Manager control panel, click **Shortcuts to applications** and select
    **Site Builder**.

    If you don’t see **API Community Manager** in **App Launcher**, follow
    [Enable API Community Manager Control Panel](https://docs.mulesoft.com/api-community-manager/manual-setup#enable-api-community-manager-control-panel).

2.  Select the paintbrush icon in the sidebar navigation to open the **Theme** menu.

3.  Select the drop-down arrow in the corner of the menu and select **Edit CSS**.

4.  Edit the CSS file in the **Edit CSS** dialog box.

5.  When you are finished with your changes, select **Save**.

## Example

You can use CSS to change the colors of the API Community Manager Theme:

```css
search-bar-container {
  background: #342b4a !important;
}
```

## CSS Classes

### ACM Search Box

<table><caption>Table 1. ACM Search Box CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>search-box-container</code></p></td><td><p>Container</p></td></tr><tr><td><p><code>search-box-result</code></p></td><td><p>Result</p></td></tr><tr><td><p><code>search-box-results</code></p></td><td><p>Results</p></td></tr><tr><td><p><code>search-result-group</code></p></td><td><p>Result group</p></td></tr></tbody></table>

### ACM Search Result

<table><caption>Table 2. ACM Search Result CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>search-result</code></p></td><td><p>Search result</p></td></tr><tr><td><p><code>search-result-name</code></p></td><td><p>Name</p></td></tr><tr><td><p><code>search-result-description</code></p></td><td><p>Description</p></td></tr><tr><td><p><code>search-result-api-detail</code></p></td><td><p>API Detail</p></td></tr><tr><td><p><code>search-result-api-learn-more</code></p></td><td><p>API Learn More</p></td></tr><tr><td><p><code>search-results-all-page</code></p></td><td><p>All page</p></td></tr><tr><td><p><code>search-result-page</code></p></td><td><p>Page</p></td></tr><tr><td><p><code>search-results-container</code></p></td><td><p>Container</p></td></tr><tr><td><p><code>search-result-tab-menu-container</code></p></td><td><p>Tab menu container</p></td></tr><tr><td><p><code>search-results-info</code></p></td><td><p>Info</p></td></tr><tr><td><p><code>search-result-empty-main-text-message</code></p></td><td><p>Empty main text message</p></td></tr><tr><td><p><code>search-result-empty-header-message</code></p></td><td><p>Empty header message</p></td></tr></tbody></table>

### API Carousel

<table><caption>Table 3. API Carousel CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>api-version-carousel-container</code></p></td><td><p>Carousel container</p></td></tr><tr><td><p><code>api-version-carousel-empty-message</code></p></td><td><p>Empty cards message</p></td></tr><tr><td><p><code>api-version-carousel-slider</code></p></td><td><p>Slick-slider component container</p></td></tr><tr><td><p><code>api-version-carousel-dots</code></p></td><td><p>Carousel bottom dots navigation</p></td></tr><tr><td><p><code>api-version-carousel-arrow</code></p></td><td><p>Left and right arrows navigation</p></td></tr></tbody></table>

### API Catalog

<table><caption>Table 4. API Catalog CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>api-catalog-container</code></p></td><td><p>Catalog container</p></td></tr><tr><td><p><code>api-catalog-header</code></p></td><td><p>Catalog header</p></td></tr><tr><td><p><code>api-catalog-categories-container</code></p></td><td><p>Categories container</p></td></tr><tr><td><p><code>api-catalog-mini-search</code></p></td><td><p>Small search used when the search bar is beside the categories</p></td></tr><tr><td><p><code>api-catalog-mini-search-input</code></p></td><td><p>Small search input</p></td></tr><tr><td><p><code>api-catalog-multiselect-container</code></p></td><td><p>Multiple selection container</p></td></tr><tr><td><p><code>api-catalog-multiselect-label</code></p></td><td><p>Multiple selection label</p></td></tr><tr><td><p><code>api-catalog-multiselect</code></p></td><td><p>Multiple selection component for categories</p></td></tr><tr><td><p><code>api-catalog-chips-container</code></p></td><td><p>Container for chips, selected categories label, and clear all button</p></td></tr><tr><td><p><code>api-catalog-chips-label</code></p></td><td><p>Chips label</p></td></tr><tr><td><p><code>api-catalog-clear-all-button</code></p></td><td><p>Clear All button</p></td></tr><tr><td><p><code>chips-container</code></p></td><td><p>Chips container</p></td></tr><tr><td><p><code>chip-container</code></p></td><td><p>Container for one chip with label and close icon</p></td></tr><tr><td><p><code>chip-label</code></p></td><td><p>Chip label</p></td></tr><tr><td><p><code>chip-icon</code></p></td><td><p>Chip close icon</p></td></tr><tr><td><p><code>api-catalog-separator</code></p></td><td><p>Separator</p></td></tr><tr><td><p><code>api-catalog-search-container</code></p></td><td><p>Search container</p></td></tr><tr><td><p><code>api-catalog-search</code></p></td><td><p>Standard size search used when the search bar is below the categories</p></td></tr><tr><td><p><code>api-catalog-apis-container</code></p></td><td><p>APIs container</p></td></tr><tr><td><p><code>api-catalog-page-indicator</code></p></td><td><p>Page indicator</p></td></tr><tr><td><p><code>api-catalog-empty-message</code></p></td><td><p>Empty cards message</p></td></tr><tr><td><p><code>api-catalog-card-container</code></p></td><td><p>Card container</p></td></tr><tr><td><p><code>api-catalog-card-badges-container</code></p></td><td><p>Card badges container</p></td></tr><tr><td><p><code>api-catalog-card-badge</code></p></td><td><p>Card badge</p></td></tr><tr><td><p><code>api-catalog-card-icon</code></p></td><td><p>Card icon</p></td></tr><tr><td><p><code>api-catalog-card-name</code></p></td><td><p>Card name</p></td></tr><tr><td><p><code>api-catalog-card-description</code></p></td><td><p>Card description</p></td></tr><tr><td><p><code>api-catalog-card-buttons-container</code></p></td><td><p>Card buttons container</p></td></tr><tr><td><p><code>api-catalog-card-details-button</code></p></td><td><p>Card Details button</p></td></tr><tr><td><p><code>api-catalog-card-learn-more-button</code></p></td><td><p>Card Learn More button</p></td></tr><tr><td><p><code>api-catalog-paginator-container</code></p></td><td><p>Paginator container</p></td></tr></tbody></table>

### API Details Button

<table><caption>Table 5. API Details Button CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>api-details-button</code></p></td><td><p>API Details button</p></td></tr></tbody></table>

### API Version Card

<table><caption>Table 6. API Version Card CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>api-version-card-container</code></p></td><td><p>API card container</p></td></tr><tr><td><p><code>api-version-card-border</code></p></td><td><p>API card border and shadow</p></td></tr><tr><td><p><code>api-version-card-header</code></p></td><td><p>Container for icon and title</p></td></tr><tr><td><p><code>api-version-card-icon</code></p></td><td><p>Card icon</p></td></tr><tr><td><p><code>api-version-card-title</code></p></td><td><p>Card title</p></td></tr><tr><td><p><code>api-version-card-description</code></p></td><td><p>Card description</p></td></tr><tr><td><p><code>api-version-card-buttons-container</code></p></td><td><p>Container for "API Details" and "Learn more" buttons</p></td></tr><tr><td><p><code>api-version-card-button-detail</code></p></td><td><p>"API Details" button</p></td></tr><tr><td><p><code>api-version-card-button-more</code></p></td><td><p>"Learn more" button</p></td></tr></tbody></table>

### Search Bar

<table><caption>Table 7. Search Bar CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>search-bar-container</code></p></td><td><p>Search bar container</p></td></tr><tr><td><p><code>#acm-search</code></p></td><td><p>Search input</p></td></tr></tbody></table>

### Application Listing

<table><caption>Table 8. Application Listing CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>application-listing-header</code></p></td><td><p>Container for button and search app input</p></td></tr><tr><td><p><code>application-listing-no-app-msg</code></p></td><td><p>Message when there are no application cards</p></td></tr><tr><td><p><code>application-listing-search-container</code></p></td><td><p>Search input container</p></td></tr><tr><td><p><code>application-listing-cards-container</code></p></td><td><p>Application cards container</p></td></tr></tbody></table>

### Application Card

<table><caption>Table 9. Application Card CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>application-card-container</code></p></td><td><p>Application card container (borders and shadow)</p></td></tr><tr><td><p><code>application-card-header-container</code></p></td><td><p>Container for title and card buttons</p></td></tr><tr><td><p><code>application-card-header-title</code></p></td><td><p>Application card title</p></td></tr><tr><td><p><code>application-card-action-buttons-container</code></p></td><td><p>Buttons container</p></td></tr><tr><td><p><code>application-card-edit-button</code></p></td><td><p>Edit button</p></td></tr><tr><td><p><code>application-card-delete-button</code></p></td><td><p>Delete button</p></td></tr><tr><td><p><code>application-card-info-container</code></p></td><td><p>Information card container</p></td></tr><tr><td><p><code>application-card-primary-divisor</code></p></td><td><p>First line divider</p></td></tr><tr><td><p><code>application-card-analytics-container</code></p></td><td><p>Analytics info container</p></td></tr><tr><td><p><code>application-card-requests-info</code></p></td><td><p>Request label and value</p></td></tr><tr><td><p><code>application-card-throughput-info</code></p></td><td><p>Throughput label and value</p></td></tr><tr><td><p><code>application-card-errors-info</code></p></td><td><p>Errors label and value</p></td></tr><tr><td><p><code>application-card-latency-info</code></p></td><td><p>Latency label and value</p></td></tr><tr><td><p><code>application-card-secondary-divisor</code></p></td><td><p>Second line divider</p></td></tr><tr><td><p><code>application-card-requests-container</code></p></td><td><p>"Request Information" container</p></td></tr><tr><td><p><code>application-card-api-access</code></p></td><td><p>Access label</p></td></tr><tr><td><p><code>application-card-requests-approved</code></p></td><td><p>Approved requests label and value</p></td></tr><tr><td><p><code>application-card-requests-rejected</code></p></td><td><p>Rejected requests label and value</p></td></tr><tr><td><p><code>application-card-requests-pending</code></p></td><td><p>Pending requests label and value</p></td></tr></tbody></table>

### Application Register

<table><caption>Table 10. Application Register CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>application-register-container</code></p></td><td><p>New application register wrapper</p></td></tr><tr><td><p><code>application-register-title</code></p></td><td><p>Create an application title</p></td></tr><tr><td><p><code>application-register-subtitle</code></p></td><td><p>Application information sub title</p></td></tr><tr><td><p><code>application-register-name</code></p></td><td><p>Application name label</p></td></tr><tr><td><p><code>application-register-name-input</code></p></td><td><p>Application name input</p></td></tr><tr><td><p><code>application-register-name-registered</code></p></td><td><p>Message application name already registered</p></td></tr><tr><td><p><code>application-register-description</code></p></td><td><p>Description label</p></td></tr><tr><td><p><code>application-register-description-input</code></p></td><td><p>Description input</p></td></tr><tr><td><p><code>application-register-callback</code></p></td><td><p>Callback label</p></td></tr><tr><td><p><code>application-register-callback-input</code></p></td><td><p>Callback input</p></td></tr><tr><td><p><code>application-register-button</code></p></td><td><p>Create button</p></td></tr></tbody></table>

### Application Detail

<table><caption>Table 11. Application Detail CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>application-detail-name</code></p></td><td><p>Application name</p></td></tr><tr><td><p><code>application-detail-line</code></p></td><td><p>Line divider</p></td></tr><tr><td><p><code>application-detail-client-credentials</code></p></td><td><p>Client credentials label</p></td></tr><tr><td><p><code>application-detail-client-id</code></p></td><td><p>Client ID container</p></td></tr><tr><td><p><code>application-detail-client-id-label</code></p></td><td><p>Client ID label</p></td></tr><tr><td><p><code>application-detail-client-id-value</code></p></td><td><p>Client ID value</p></td></tr><tr><td><p><code>application-detail-client-secret</code></p></td><td><p>Client secret container</p></td></tr><tr><td><p><code>application-detail-client-secret-label</code></p></td><td><p>Client secret label</p></td></tr><tr><td><p><code>application-detail-client-secret-input</code></p></td><td><p>Client secret input</p></td></tr><tr><td><p><code>application-detail-client-access-status</code></p></td><td><p>API access status label</p></td></tr><tr><td><p><code>application-detail-client-approved</code></p></td><td><p>Approved label and value</p></td></tr><tr><td><p><code>application-detail-client-rejected</code></p></td><td><p>Rejected label and value</p></td></tr><tr><td><p><code>application-detail-client-pending</code></p></td><td><p>Pending approval label and value</p></td></tr></tbody></table>

### Instance Selector

<table><caption>Table 12. Instance Selector CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>instance-selector-container</code></p></td><td><p>Instance selector container</p></td></tr><tr><td><p><code>instance-selector-add-api</code></p></td><td><p>Add APIs label</p></td></tr><tr><td><p><code>instance-selector-line</code></p></td><td><p>Line separator</p></td></tr><tr><td><p><code>instance-selector-box</code></p></td><td><p>Instance selector borders</p></td></tr><tr><td><p><code>instance-selector-list-container</code></p></td><td><p>Instance selector list</p></td></tr></tbody></table>

### Contracts Selector

<table><caption>Table 13. Contracts Selector CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>contracts-selector-container</code></p></td><td><p>Contracts selector container</p></td></tr><tr><td><p><code>contracts-selector-label</code></p></td><td><p>Application name label</p></td></tr><tr><td><p><code>contracts-selector-line</code></p></td><td><p>Line separator</p></td></tr><tr><td><p><code>contracts-selector-box</code></p></td><td><p>Contracts selector borders</p></td></tr><tr><td><p><code>contracts-selector-list</code></p></td><td><p>Contracts selector list</p></td></tr><tr><td><p><code>contracts-selector-api-name</code></p></td><td><p>API name label</p></td></tr><tr><td><p><code>contracts-manager-button</code></p></td><td><p>Arrow button</p></td></tr></tbody></table>

### Header

<table><caption>Table 14. Header CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>acm-header</code></p></td><td><p>Main header of the community</p></td></tr><tr><td><p><code>defaultLogo</code></p></td><td><p>Logo of the community</p></td></tr></tbody></table>

### Learn More Button

<table><caption>Table 15. Learn More Button CSS Classes and Descriptions</caption> <colgroup><col> <col></colgroup><thead><tr><th>Class</th><th>Description</th></tr></thead><tbody><tr><td><p><code>learn-more-button</code></p></td><td><p>Learn More button</p></td></tr></tbody></table>