Contact Us 1-800-596-4880

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

Table 1. ACM Search Box CSS Classes and Descriptions
Class Description

search-box-container

Container

search-box-result

Result

search-box-results

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

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

Page

search-results-container

Container

search-result-tab-menu-container

Tab menu container

search-results-info

Info

search-result-empty-main-text-message

Empty main text message

search-result-empty-header-message

Empty header message

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

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

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