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.
Style Editor Settings
Once logged in, users with the administrator role can access the style editor by navigating to the homepage or another landing page, then click the paint brush icon near the bottom right corner.
Once the style editor is open, from the Style Editor section, click Bento to expand the section and see the setting options.
- Layout, select the desired layout for the bento search results page
- Click the radio button beside the desired layout
- Image Display
- Enable thumbnail image, check this box to display thumbnail images in the search results, if there are any to display
- Bento Blocks, select the desired colors and border appearance associated with each block that appears in your bento search results
- Background color, Titles color, Box shadow color, and Border color
- To enter or select a color:
- Click the color indicator icon
beside the desired color setting
- Enter the HEX or RGB color code; OR use the color selector to choose the desired color
- Click Choose when finished
- Click the color indicator icon
- To enter or select a color:
- Border radius, enter a numerical value (up to 50px) to have rounded corners rather than square corners
- Border thickness, enter a numerical value (up to 50px) to set the thickness of the border
- Border position, select the desired location for the border to appear around each bento block
- Background color, Titles color, Box shadow color, and Border color
- Bento Item, select the desired colors and border appearance associated with each item that appears within the bento block search results
- Background color and Border color
- To enter or select a color:
- Click the color indicator icon
- Enter the HEX or RGB color code; OR use the color selector to choose the desired color
- Click Choose when finished
- Click the color indicator icon
- To enter or select a color:
- Border radius, enter a numerical value (up to 50px) to have rounded corners rather than square corners
- Border thickness, enter a numerical value (up to 50px) to set the thickness of the border
- Border position, select the desired location for the border to appear around each bento block
- Background color and Border color