Advanced Styling with CSS
API Experience Hub offers advanced styling functionality with editable community site Cascading Style Sheets (CSS) for API Experience Hub common components.
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 Builder, click the paintbrush icon to open the Theme menu.
-
Select the drop-down arrow of the menu and select Edit CSS.
-
Edit the CSS file in the Edit CSS dialog box.
-
When you’re finished with your changes, select Save.
Example
You can use CSS to change the colors of the API Experience Hub Theme:
search-bar-container {
background: #342b4a!important;
}CSS Classes
API Card
This component is in the API carousel and API catalog. The API card shows basic information about the asset: name, description, icon, type, and last updated date.
| Class | Description |
|---|---|
|
Main container for asset card. |
|
Asset icon container. |
|
Asset card type text. For example, HTTP-API, REST-API, or SOAP-API. |
|
Asset card name text. |
|
Asset card description text. |
|
Asset card last updated text. |
API Carousel
This component is on the home page. The API Carousel shows the API cards as a carousel with a maximum of five assets displaying at a time.
Class |
Description |
|
Main carousel container. |
|
Assets carousel title. |
|
Assets carousel subtitle. |
|
View all assets link. |
|
Left carousel button. |
|
Right carousel button. |
|
Container of the bottom navigation dots. |
|
Navigation dot. |
|
Selected navigation dot. |
API Catalog
This component shows all the assets in the site. Users can search assets and filter by asset type.
Class |
Description |
|
Main catalog container. This contains the header with filters and body with asset cards. |
|
Header catalog container. This contains the filters. |
|
Search input container. |
|
Container for asset type filter and clear all button in the right. |
|
Container for asset type filter. |
|
Clear all button. |
|
Body container with all the asset cards. |
Application Detail
This component shows the application information: name, description, application URL, redirect URIs, and grant types.
Class |
Description |
|
Application name. |
|
Application description. |
|
Application URL container. |
|
Application URL label. |
|
Container for Client Credentials, Redirect URIs, and Grant types cards. |
|
Card container. |
|
Card title. |
|
Card content. |
|
Client credentials card: Client Id and Client Secret labels. |
|
Client credentials card: Client ID and Client Secret values. |
|
Redirect URIs card: application URI. |
|
Grant type card: application grant type. |
Application Listing
This component shows the application created by the user. Applications can be filtered by name and description.
Class |
Description |
|
Application listing search input container. |
|
Applications table container. |
|
Application name table header label. |
|
Application description table header label. |
|
Application credentials table header label. |
|
Each table element that contains the application row. |
|
Application name. |
|
Application description. |
|
View credentials icon. |
|
View credentials label. |
|
Credentials popup container. |
`.crendetials-tooltip-title |
Client ID and client secret label. |
`.applications-listing-table-row-credentials ` .crendetials-tooltip-code |
Application client ID and secret code. |
Asset Documentation Viewer (API Overview)
(Public component) This component is in the API detail page. It shows pages from an asset. This pages are requested from Exchange.
Class |
Description |
|
Principal container for the asset documentation viewer. |
|
Spinner container that is executed while documentation request information since asset detail header. |
|
Spinner that is executed while documentation request information since asset detail header. |
|
Container for asset documentation viewer pages container. This container can be used with or without the navigation bar. |
|
Navigation bar for showing asset documentation pages. |
|
Spinner container that is executed when the page content is requested from Exchange. |
|
Spinner that is executed while the page content is requested from Exchange. |
|
Container that displays when request content from Exchange fails. View c-base-error. |
|
Container that displays when the asset has only one page. In this case, the navigation bar doesn’t display. |
|
Div element where markdown is rendered. |
Asset Detail Header
(Public component) This component is on API detail page. It shows basic information about an asset (logo, name, asset type, information contact, combo box version, status, instances, clients, spec download, and request access button)
Class |
Description |
|
Principal container for asset detail header. |
|
Spinner container that is executed when page is loaded. |
|
Collapsible button for asset information. |
|
Background color of asset icon. assetType: rest-api evented-api http-api soap-api |
|
Border color of asset icon. assetType: rest-api evented-api http-api soap-api |
|
Title of asset. |
|
Download spec button. |
|
Modal with options that opens when the user clicks Download. |
|
Asset type. |
|
Contact name. |
|
Contact email. |
|
Descrption of asset. |
|
Spinner container that is executed when user changes the version selected. |
|
Title for action in content version. Asset Version, Version state, Instances, and Clients. Apply for all elements. |
|
Body for action in content version. Asset Version, Version state, Instances, and Clients. Apply for all elements. |
|
Show status of an asset. |
|
Number of instances for an asset. |
|
Number of contracts for an asset. |
|
Container to select a version for an asset. View c-base-title-selector |
Base Error
(Private component) This component is used by other public components as asset detail header or asset documentation viewer to show a message for an error or empty state.
Class |
Description |
|
Main container for component. |
|
Element that contains main icon. |
|
Title for an error or empty state message. |
|
Subtitle for an error or empty state message. |
|
In some errors, it shows request ID. |
|
In some errors, it shows a button to execute the failed action again. |
Request Access
(Private component) This component is used by other public components as an asset detail header or asset documentation viewer to show a message for an error or empty state.
Class |
Description |
|
Container for the request access button. |
|
Request access button in the asset detail header. |
|
Label for the request access button. |
|
Container for request access modal content. |
|
Contaienr for request access modal footer. |
|
Label of the request access modal form inputs. |
|
Subtitle of the request access modal form inputs. |
|
Content of the request access modal form inputs. |
|
Container for the new application form. |
|
Create new application title. |
|
New application input name. |
|
New application input description. |
|
New application URL input. |
|
New application redirect URI input. |
|
Cancel and request access modal buttons. |
|
Request access modal button. |