Inbenta Styles

By default, the Inbenta SDK loads two Cascading Style Sheets (CSS) files:

• The first (e.g. space-cowboy.css or ocean-flow.css) loads a skin. A skin is a set of parameters that define the style and appearance of the product. It allows the user to interact with the product on any device in a comfortable and intuitive manner.
• The second (layout.css) loads layout information. It defines how the components are placed relative to each other and on the screen. This document lists the structural classes, but it does not go into these classes in detail.

The tables shown for each component in the product CSS pages also specify which CSS styles apply to their respective classes in space-cowboy.css. If the skin is disabled, only the structural classes will be used. The tables also specify these structural classes.

Customizing CSS Styles

Example:

To change the appearance of the search form button:

In this image, the selector is:

.inbenta-km__search__form .form__button .inbenta-km-button

To overwrite these styles or add new ones to this element, the selector should be:

.inbenta .inbenta-km__search__form .form__button .inbenta-km-button or .{your_custom_name} .inbenta-km__search__form .form__button .inbenta-km-button

Available components

• Global elements
• Results
• Search Box
• Popular
• Push
• Categories
• Categories sidebar
• Categories breadcrumb
• Notification
• Modal
• Last chance
• Instants

Available subcomponents

• FAQ
• Ratings

Image alignment

Depending on how images are aligned in the Knowledge instance's Content Editor, the Knowledge SDK assigns them the following classes:

• In line: None
• Wrap text: Left aligned image: image-style-align-left
• Wrap text: Right aligned image: image-style-align-right
• Top aligned image: image-style-align-top
• Bottom aligned image: image-style-align-bottom
• Break text: Left aligned image: image-style-block-align-left
• Break text: Centered image: image-style-align-center
• Break text: Right aligned image: image-style-block-align-right

If you are not using the Knowledge SDK to render the UI of your Knowledge solution, apply the following CSS rules to your output to make sure images display the way the content editor intends them to:

• Wrap text: Left aligned image:

.image-style-align-left {
  clear: none;
  float: left;
  margin-right: calc(16px/2);
}

• Wrap text: Right aligned image:

.image-style-align-right {
  clear: none;
  float: right;
  margin-left: calc(16px/2);
}

• Top aligned image:

No CSS rule is required, as the style is already specified within the <img> HTML element.

• Bottom aligned image:

No CSS rule is required, as the style is already specified within the <img> HTML element

• Break text: Left aligned image:

.image {
  display: table;
  clear: both;
  text-align: center;
  margin: 0.9em auto;
  min-width: 50px;
}
.image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 100%   
 }          
.image-style-block-align-left {
  max-width: calc(100% - 16px);
  margin-left: 0;
  margin-right: auto;  
}

• Break text: Centered image:

 .image {
  display: table;
  clear: both;
  text-align: center;
  margin: 0.9em auto;
  min-width: 50px;
}
.image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 100%  
}          
.image-style-align-center {
  margin-left: auto;
  margin-right: auto;  
}

• Break text: Right aligned image:

 .image {
  display: table;
  clear: both;
  text-align: center;
  margin: 0.9em auto;
  min-width: 50px;
}
.image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 100% 
}     
.image-style-block-align-right {
  max-width: calc(100% - 16px); 
  margin-left: 0;
  margin-right: auto;  
}