Contact Free trial Login

Advanced Styling with CSS

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 Lightning Communities Developer Guide.

Edit the CSS

  1. In the ACM Control Panel, select 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 ACM Theme:

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

CSS Classes

Table 1. 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 Details Button

Table 2. API Details Button CSS Classes and Descriptions
Class Description

api-details-button

API Details button

API Version Card

Table 3. 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 4. Search Bar CSS Classes and Descriptions
Class Description

search-bar-container

Search bar container

#acm-search

Search input

Application Listing

Table 5. 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 6. 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 7. 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 8. 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 9. 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 10. 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 11. Header CSS Classes and Descriptions
Class Description

acm-header

Main header of the community

defaultLogo

Logo of the community

Learn More Button

Table 12. Learn More Button CSS Classes and Descriptions
Class Description

learn-more-button

Learn More button