Once your bento search has been configured, there are a few additional style settings that can also be managed from the Style Editor, to ensure the look of the bento display is consistent with your branding and theme.
Accessing the Style Editor
Administrators can access the style editor by logging into their Stacks site, then click the paint brush icon in the bottom right corner.
Once open, click the area you'd like to configure the settings for.
Bento Layout
Clicking the bento layout tab will expand the section to display 2 layout options, click the radio beside beside the option you'd like to see on your site.
- Layout 1 - displays bento results in a single column view with results stacked on top of each other. This layout is like the EDS API search results view
- Layout 2 - displays bento results in the familiar multi-column view that earlier versions of Stacks employed
Bento Image Display
Administrators can show search results with cover art and book jackets (if applicable) by checking the Enable thumbnail image option in the Image Display tab of the style editor’s Bento section.
Bento Blocks
Expanding the Bento Blocks tab in the Bento section of the style editor allows administrators to configure appearance settings for the blocks themselves.
- Colors - click the color preview circle next to each color setting, use the color selection box or enter a HEX or RGB color code to choose a color; this applies to:
- Background color - the color inside the bento block, behind the search results
- Tile color
- Box shadow color - the shadow color under selected bento boxes
- Border color - the color of the border surrounding each bento block
- Border Radius - allows administrators to soften corners from hard 90º corners into softer curved corners based on the value chosen; the higher the number the softer and larger the curve
- Border Thickness - adjust the thickness of the bento box border as needed, the higher the number the thicker the border
- Border Position - click the border configuration you wish to see around each bento block
Bento Item
The settings in the Bento Item tab of the Style editor allow administrators to control the look of individual Bento items that appear within a Bento box.
- Colors - click the color preview circle next to each color setting, use the color selection box or enter a HEX or RGB color code to choose a color; this applies to:
- Background color - the color behind the search result
- Border color - the color of the border surrounding each search result
- Border Radius - allows administrators to soften corners from hard 90º corners into softer curved corners based on the value chosen; the higher the number the softer and larger the curve
- Border Thickness - adjust the thickness of the search result border as needed, the higher the number the thicker the border
- Border Position - click the border configuration you wish to see around each search result item