Style your Marketplace with custom CSS

In your Cyclr console, go to Settings > Appearance Settings. From this page, you can use the Application Custom CSS field to enter your customizations.

Elements/Classes	Description
`.launch`	Allows you to apply styling to the entire section of the web page with the class name launch.
`.launch a`	Allows you to apply styling to the anchor tags inside the launch section.
`.marketplace-item`	Allows you to apply styling to the marketplace item section.
`.marketplace-item img` `.marketplace-item-image img`	Allows you to apply styling to the images inside the marketplace item section.
`.marketplace-item-title`	Allows you to apply styling to the title of the marketplace item section.
`.marketplace-item-description`	Allows you to apply styling to the description of the marketplace item section.
`.marketplace-item a`	Allows you to apply styling to the anchor tags inside the marketplace item section.
`.marketplace-search`	Allows you to apply styling to the marketplace search input section.
`.marketplace-tags`	Allows you to apply styling to the marketplace item tags section.
`.marketplace-tag`	Allows you to apply styling to the individual item tags within the marketplace tags section.
`.marketplace-items`	Allows you to apply styling to the section containing the marketplace items.
`.marketplace-item-rich-text`	Allows you to apply styling to the individual rich text marketplace items.
`.marketplace-item-images`	Allows you to apply styling to the images section within a marketplace item.
`.marketplace-item-image`	Allows you to apply styling to the individual images within a marketplace item.
`.marketplace-item-footer`	Allows you to apply styling to the section at the bottom of a marketplace item.
`.marketplace-item-status`	Allows you to apply styling to the status section of a marketplace item.
`.label-status`	Allows you to apply styling to the individual status of a marketplace item.
`.marketplace-item-buttons`	Allows you to apply styling to the buttons section within a marketplace item.
`.marketplace-item-buttons` `.btn`	Allows you to apply styling to the individual buttons with a marketplace item.
`.marketplace-item-buttons` `.dropdown-menu` `.dropdown-item`	Allows you to apply styling to the dropdown items within a marketplace item.
`#launchMapping h4`	Allows you to apply styling to the h4 element inside the launchMapping section.
`.section-block`	Allows you to apply styling to the section blocks of the web page.
`.section-block-title`	Allows you to apply styling to the title of the section blocks.
`.section-block-title h4`	Allows you to apply styling to the h4 element inside the section block titles.
`.section-block-body`	Allows you to apply styling to the body of the section blocks.
`.form-group`	Allows you to apply styling to the form groups in the web page.
`.form-group label`	Allows you to apply styling to the labels inside the form groups.
`.icon-sm`	Allows you to apply styling to the small icons in the web page.
`.field-status-required`	Allows you to apply styling to the required fields in the web page.
`.alert-info`	Allows you to apply styling to the alert messages in the web page.
`.launch h3`	Allows you to apply styling to the h3 element inside the launch section.

Example CSS

.marketplace-item-title {
  color: #3c5064;
  font-weight: normal !important;
  font-size: 16pt;
  padding-bottom: 5px;
}

.marketplace-item-description {
  color: #0096a5;
  font-weight: normal !important;
  text-align: left !important;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.4em;
  margin-bottom: 2em;
  font-size: 14px !important;
}

.marketplace-item a {
  border: 1px solid #0096a5;
  background: #ffffff;
  color: #3c5064;
  border-radius: 25px;
}

LESS Variables

To view and edit the LESS variables that are available in Cyclr, go to Settings > Appearance Settings in the console and view the Application LESS Variables field.

Below is a list of all of the LESS variables that relate to Marketplaces:

@marketplace-item-gutter-x: 12px;
@marketplace-item-gutter-y: 12px;

@marketplace-item-rich-text-h1-font-family: 'Inter', sans-serif;
@marketplace-item-rich-text-h1-font-size: 36px;
@marketplace-item-rich-text-h1-font-weight: 500;
@marketplace-item-rich-text-h1-margin: 0px 0px 6px 0px;

@marketplace-item-rich-text-h2-font-family: 'Inter', sans-serif;
@marketplace-item-rich-text-h2-font-size: 30px;
@marketplace-item-rich-text-h2-font-weight: 600;
@marketplace-item-rich-text-h2-margin: 0px 0px 6px 0px;

@marketplace-item-rich-text-h3-font-family: 'Inter', sans-serif;
@marketplace-item-rich-text-h3-font-size: 24px;
@marketplace-item-rich-text-h3-font-weight: 400;
@marketplace-item-rich-text-h3-margin: 0px 0px 6px 0px;

@marketplace-item-rich-text-h4-font-family: 'Inter', sans-serif;
@marketplace-item-rich-text-h4-font-size: 20px;
@marketplace-item-rich-text-h4-font-weight: 500;
@marketplace-item-rich-text-h4-margin: 0px 0px 6px 0px;

@marketplace-item-rich-text-h5-font-family: 'Inter', sans-serif;
@marketplace-item-rich-text-h5-font-size: 14px;
@marketplace-item-rich-text-h5-font-weight: 500;
@marketplace-item-rich-text-h5-margin: 0px 0px 6px 0px;

@marketplace-item-rich-text-p-font-family: 'Inter', sans-serif;
@marketplace-item-rich-text-p-font-size: 12px;
@marketplace-item-rich-text-p-font-weight: 500;
@marketplace-item-rich-text-p-margin: 0px 0px 12px 0px;

@marketplace-item-background-color: #FFFFFF;
@marketplace-item-border-color: #DBDCE0;
@marketplace-item-font: 'Inter', sans-serif;

@marketplace-item-title-font-color: #37474F;
@marketplace-item-title-font-size: 18px;

@marketplace-item-description-font-color: #777777;
@marketplace-item-description-font-size: 12px;

@marketplace-item-button-border-color: #DBDCE0;
@marketplace-item-button-font-color: #00A1E0;
@marketplace-item-button-font-size: 14px;
@marketplace-item-button-background-color: #FFFFFF;

@marketplace-item-dropdown-menu-background-color: #FFFFFF;
@marketplace-item-dropdown-menu-border-color: #DBDCE0;
@marketplace-item-dropdown-item-font-size: 12px;
@marketplace-item-dropdown-item-font-color: #37474F;

@marketplace-item-status-running-font-color: #FFFFFF;
@marketplace-item-status-running-background-color: #74B665;
@marketplace-item-status-paused-font-color: #FFFFFF;
@marketplace-item-status-paused-background-color: #E79950;

In This Article

Style your Marketplace with custom CSS

Style your Marketplace with custom CSS

Example CSS

LESS Variables