Customize your Marketplace

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

Element	Description
launch	Applies styling to the entire section of the web page with the class name launch.
launch a	Styles the anchor tags inside the launch section.
marketplace-item	Applies styling to the marketplace item section.
marketplace-item img	Styles the images inside the marketplace item section.
marketplace-item-title	Styles the title of the marketplace item section.
marketplace-item-description	Styles the description of the marketplace item section.
marketplace-item a	Styles the anchor tags inside the marketplace item section.
#launchMapping h4	Styles the h4 element inside the launchMapping section.
section-block	Applies styling to the section blocks of the web page.
section-block-title	Styles the title of the section blocks.
section-block-title h4	Styles the h4 element inside the section block titles.
section-block-body	Styles the body of the section blocks.
form-group	Styles the form groups in the web page.
form-group label	Styles the labels inside the form groups.
icon-sm	Styles the small icons in the web page.
field-status-required	Styles the required fields in the web page.
alert-info	Styles the alert messages in the web page.
launch h3	Styles the h3 element inside the launch section.

Example CSS

.marketplace-item {
  background-color: #f5f5f5;
  border: 1px solid #3c5064;
}

.marketplace-item img {
  padding-top: 25px;
  padding-bottom: 5px;
}

.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;
}

.launch .nav>li>a:hover {
  text-decoration: none;
  background-color: #f5f5f5;
  border-bottom: 0px;
  cursor: pointer;
}

.launch .nav>li>a.active {
  text-decoration: none;
  background-color: #fad5d5;
  border-bottom: 0px;
  cursor: pointer;
}

The previous CSS styling results in the following appearance for the Marketplace: