Authorization
API Resources
NL Interpreter
Search
Benti
SDK Styles
Inbenta Styles
By default, the Inbenta SDK loads two Cascading Style Sheets (CSS) files:
- The first (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.
Note
An accessible version of the *space-cowboy.css* skin is also available. It is called *space-cowboy-wcag.css*. This skin offers the following improvements:
• Higher contrast between elements
• Visible focus
• Improved keyboard navigation
• Improved zoom behaviour (up to 2x)
Caution
Remember that if you modify the structural elements, it will affect how the product is displayed. Inbenta strongly recommends that you leave structural elements unchanged. If you want to use your own design, it is possible to remove space-cowboy.css so that only layout.css is loaded. You can then use your design, independently of Inbenta's suggested appearance, either by customizing layout.css or by adding your own separate CSS file.
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
Important
Always use a CSS selector that is more specific than the one used in the Inbenta skin, due to the order in which the files are loaded: the Inbenta skin is loaded last, and therefore has more weight. Inbenta recommends that you use the Inbenta class to be more specific. No skin uses this class to style its components.
Example:
Imagine you want to change the appearance of the search form button:
In this image, we can see that the selector is:
.inbenta-search-box .inbenta-search-box__button .inbenta-search-button
In order to overwrite these styles or add new ones to this element, the selector should be: .inbenta .inbenta-search-box .inbenta-search-box__button .inbenta-search-button or .whatever .inbenta-search-box .inbenta-search-box__button .inbenta-search-button.
Available components
- Search Box
- Results
- No Results
- Refinement List
- Refinement Tabs
- Pagination
- Stats
- Typeahead Autocomplete
- Instants
- Last Chance
Search color
Starting from version 1.44.0, it is possible to customize the Search SDK primary color using the ocean-flow skin.
There are 2 available CSS variables for updating the color of the skin:
--primary: Primary color--primary--hover: Primary color when hovering over some icons like the launcher
You can refer to the following documentation to understand how these CSS variables work.
The following example shows how these variables can be used to change the skin primary color to some variations of red. In your CSS style file, you can add the following:
:root {
--primary: #d10808;
--primary--hover: #680707;
}