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
-
In the API Community Manager control panel, click Community Builder.
-
Select the paintbrush icon in the sidebar navigation to open the Theme menu.
-
Select the drop-down arrow in the corner of the menu and select Edit CSS.
-
Edit the CSS file in the Edit CSS dialog box.
-
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
| Class | Description |
|---|---|
|
Container |
|
Result |
|
Results |
|
Result group |
ACM Search Result
| Class | Description |
|---|---|
|
Search result |
|
Name |
|
Description |
|
API Detail |
|
API Learn More |
|
All page |
|
Page |
|
Container |
|
Tab menu container |
|
Info |
|
Empty main text message |
|
Empty header message |
API Carousel
| Class | Description |
|---|---|
|
Carousel container |
|
Empty cards message |
|
Slick-slider component container |
|
Carousel bottom dots navigation |
|
Left and right arrows navigation |
API Catalog
| Class | Description |
|---|---|
|
Catalog container |
|
Catalog header |
|
Categories container |
|
Small search used when the search bar is beside the categories |
|
Small search input |
|
Multiple selection container |
|
Multiple selection label |
|
Multiple selection component for categories |
|
Container for chips, selected categories label, and clear all button |
|
Chips label |
|
Clear All button |
|
Chips container |
|
Container for one chip with label and close icon |
|
Chip label |
|
Chip close icon |
|
Separator |
|
Search container |
|
Standard size search used when the search bar is below the categories |
|
APIs container |
|
Page indicator |
|
Empty cards message |
|
Card container |
|
Card badges container |
|
Card badge |
|
Card icon |
|
Card name |
|
Card description |
|
Card buttons container |
|
Card Details button |
|
Card Learn More button |
|
Paginator container |
API Details Button
| Class | Description |
|---|---|
|
API Details button |
API Version Card
| Class | Description |
|---|---|
|
API card container |
|
API card border and shadow |
|
Container for icon and title |
|
Card icon |
|
Card title |
|
Card description |
|
Container for "API Details" and "Learn more" buttons |
|
"API Details" button |
|
"Learn more" button |
Search Bar
| Class | Description |
|---|---|
|
Search bar container |
|
Search input |
Application Listing
| Class | Description |
|---|---|
|
Container for button and search app input |
|
Message when there are no application cards |
|
Search input container |
|
Application cards container |
Application Card
| Class | Description |
|---|---|
|
Application card container (borders and shadow) |
|
Container for title and card buttons |
|
Application card title |
|
Buttons container |
|
Edit button |
|
Delete button |
|
Information card container |
|
First line divider |
|
Analytics info container |
|
Request label and value |
|
Throughput label and value |
|
Errors label and value |
|
Latency label and value |
|
Second line divider |
|
"Request Information" container |
|
Access label |
|
Approved requests label and value |
|
Rejected requests label and value |
|
Pending requests label and value |
Application Register
| Class | Description |
|---|---|
|
New application register wrapper |
|
Create an application title |
|
Application information sub title |
|
Application name label |
|
Application name input |
|
Message application name already registered |
|
Description label |
|
Description input |
|
Callback label |
|
Callback input |
|
Create button |
Application Detail
| Class | Description |
|---|---|
|
Application name |
|
Line divider |
|
Client credentials label |
|
Client ID container |
|
Client ID label |
|
Client ID value |
|
Client secret container |
|
Client secret label |
|
Client secret input |
|
API access status label |
|
Approved label and value |
|
Rejected label and value |
|
Pending approval label and value |
Instance Selector
| Class | Description |
|---|---|
|
Instance selector container |
|
Add APIs label |
|
Line separator |
|
Instance selector borders |
|
Instance selector list |
Contracts Selector
| Class | Description |
|---|---|
|
Contracts selector container |
|
Application name label |
|
Line separator |
|
Contracts selector borders |
|
Contracts selector list |
|
API name label |
|
Arrow button |