Advanced Styling with CSS | MuleSoft Documentation
# Advanced Styling with CSS
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 in the Experience Cloud Developer Guide.
## Edit the CSS
  1. In the API Community Manager control panel, click **Community Builder**.
  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:
```
search-bar-container {
 background: #342b4a!important;
}
```

## CSS Classes
### ACM Search Box
Table 1. ACM Search Box CSS Classes and Descriptions Class | Description  
---|---  
`search-box-container` | Container  
`search-box-result`  
`search-box-results`  
`search-result-group` | Result group  
### ACM Search Result
Table 2. ACM Search Result CSS Classes and Descriptions Class | Description  
---|---  
`search-result` | Search result  
`search-result-name`  
`search-result-description` | Description  
`search-result-api-detail` | API Detail  
`search-result-api-learn-more` | API Learn More  
`search-results-all-page` | All page  
`search-result-page`  
`search-results-container` | Container  
`search-result-tab-menu-container` | Tab menu container  
`search-results-info`  
`search-result-empty-main-text-message` | Empty main text message  
`search-result-empty-header-message` | Empty header message  
### API Carousel
Table 3. API Carousel CSS Classes and Descriptions Class | Description  
---|---  
`api-version-carousel-container` | Carousel container  
`api-version-carousel-empty-message` | Empty cards message  
`api-version-carousel-slider` | Slick-slider component container  
`api-version-carousel-dots` | Carousel bottom dots navigation  
`api-version-carousel-arrow` | Left and right arrows navigation  
### API Catalog
Table 4. API Catalog CSS Classes and Descriptions Class | Description  
---|---  
`api-catalog-container` | Catalog container  
`api-catalog-header` | Catalog header  
`api-catalog-categories-container` | Categories container  
`api-catalog-mini-search` | Small search used when the search bar is beside the categories  
`api-catalog-mini-search-input` | Small search input  
`api-catalog-multiselect-container` | Multiple selection container  
`api-catalog-multiselect-label` | Multiple selection label  
`api-catalog-multiselect` | Multiple selection component for categories  
`api-catalog-chips-container` | Container for chips, selected categories label, and clear all button  
`api-catalog-chips-label` | Chips label  
`api-catalog-clear-all-button` | Clear All button  
`chips-container` | Chips container  
`chip-container` | Container for one chip with label and close icon  
`chip-label` | Chip label  
`chip-icon` | Chip close icon  
`api-catalog-separator` | Separator  
`api-catalog-search-container` | Search container  
`api-catalog-search` | Standard size search used when the search bar is below the categories  
`api-catalog-apis-container` | APIs container  
`api-catalog-page-indicator` | Page indicator  
`api-catalog-empty-message` | Empty cards message  
`api-catalog-card-container` | Card container  
`api-catalog-card-badges-container` | Card badges container  
`api-catalog-card-badge` | Card badge  
`api-catalog-card-icon` | Card icon  
`api-catalog-card-name` | Card name  
`api-catalog-card-description` | Card description  
`api-catalog-card-buttons-container` | Card buttons container  
`api-catalog-card-details-button` | Card Details button  
`api-catalog-card-learn-more-button` | Card Learn More button  
`api-catalog-paginator-container` | Paginator container  
### API Details Button
Table 5. API Details Button CSS Classes and Descriptions Class | Description  
---|---  
`api-details-button` | API Details button  
### API Version Card
Table 6. API Version Card CSS Classes and Descriptions Class | Description  
---|---  
`api-version-card-container` | API card container  
`api-version-card-border` | API card border and shadow  
`api-version-card-header` | Container for icon and title  
`api-version-card-icon` | Card icon  
`api-version-card-title` | Card title  
`api-version-card-description` | Card description  
`api-version-card-buttons-container` | Container for "API Details" and "Learn more" buttons  
`api-version-card-button-detail` | "API Details" button  
`api-version-card-button-more` | "Learn more" button  
### Search Bar
Table 7. Search Bar CSS Classes and Descriptions Class | Description  
---|---  
`search-bar-container` | Search bar container  
`#acm-search` | Search input  
### Application Listing
Table 8. Application Listing CSS Classes and Descriptions Class | Description  
---|---  
`application-listing-header` | Container for button and search app input  
`application-listing-no-app-msg` | Message when there are no application cards  
`application-listing-search-container` | Search input container  
`application-listing-cards-container` | Application cards container  
### Application Card
Table 9. Application Card CSS Classes and Descriptions Class | Description  
---|---  
`application-card-container` | Application card container (borders and shadow)  
`application-card-header-container` | Container for title and card buttons  
`application-card-header-title` | Application card title  
`application-card-action-buttons-container` | Buttons container  
`application-card-edit-button` | Edit button  
`application-card-delete-button` | Delete button  
`application-card-info-container` | Information card container  
`application-card-primary-divisor` | First line divider  
`application-card-analytics-container` | Analytics info container  
`application-card-requests-info` | Request label and value  
`application-card-throughput-info` | Throughput label and value  
`application-card-errors-info` | Errors label and value  
`application-card-latency-info` | Latency label and value  
`application-card-secondary-divisor` | Second line divider  
`application-card-requests-container` | "Request Information" container  
`application-card-api-access` | Access label  
`application-card-requests-approved` | Approved requests label and value  
`application-card-requests-rejected` | Rejected requests label and value  
`application-card-requests-pending` | Pending requests label and value  
### Application Register
Table 10. Application Register CSS Classes and Descriptions Class | Description  
---|---  
`application-register-container` | New application register wrapper  
`application-register-title` | Create an application title  
`application-register-subtitle` | Application information sub title  
`application-register-name` | Application name label  
`application-register-name-input` | Application name input  
`application-register-name-registered` | Message application name already registered  
`application-register-description` | Description label  
`application-register-description-input` | Description input  
`application-register-callback` | Callback label  
`application-register-callback-input` | Callback input  
`application-register-button` | Create button  
### Application Detail
Table 11. Application Detail CSS Classes and Descriptions Class | Description  
---|---  
`application-detail-name` | Application name  
`application-detail-line` | Line divider  
`application-detail-client-credentials` | Client credentials label  
`application-detail-client-id` | Client ID container  
`application-detail-client-id-label` | Client ID label  
`application-detail-client-id-value` | Client ID value  
`application-detail-client-secret` | Client secret container  
`application-detail-client-secret-label` | Client secret label  
`application-detail-client-secret-input` | Client secret input  
`application-detail-client-access-status` | API access status label  
`application-detail-client-approved` | Approved label and value  
`application-detail-client-rejected` | Rejected label and value  
`application-detail-client-pending` | Pending approval label and value  
### Instance Selector
Table 12. Instance Selector CSS Classes and Descriptions Class | Description  
---|---  
`instance-selector-container` | Instance selector container  
`instance-selector-add-api` | Add APIs label  
`instance-selector-line` | Line separator  
`instance-selector-box` | Instance selector borders  
`instance-selector-list-container` | Instance selector list  
### Contracts Selector
Table 13. Contracts Selector CSS Classes and Descriptions Class | Description  
---|---  
`contracts-selector-container` | Contracts selector container  
`contracts-selector-label` | Application name label  
`contracts-selector-line` | Line separator  
`contracts-selector-box` | Contracts selector borders  
`contracts-selector-list` | Contracts selector list  
`contracts-selector-api-name` | API name label  
`contracts-manager-button` | Arrow button  
### Header
Table 14. Header CSS Classes and Descriptions Class | Description  
---|---  
`acm-header` | Main header of the community  
`defaultLogo` | Logo of the community  
### Learn More Button
Table 15. Learn More Button CSS Classes and Descriptions Class | Description  
---|---  
`learn-more-button` | Learn More button