Here are some examples of various things you can do with custom CSS.

To ensure changes are made we recommend including !important to your code to override global styling set by Bento.

You can change the border color of call-to-action buttons to be different from text. Add the following code and adjust the hex to your desired value

You can move the toggle up or down on your page with custom CSS. The following code will move the toggle to the bottom corner of the page.

If you want to include icons in your titles, upload the SVG (recommended size is 24px by 24px), and then use the asset URL when targeting specific headers. Use the title of the header in the id class.

Change the padding in different elements with this code. Make sure you place the styles under the element of your choice, they should all be exposed via custom CSS.

This will turn the circle checkboxes into squares in checklist guides

The floating sidebar has obvious round edges, if you want to square those off you can with this CSS class

When using Bento's inline elements, their styles will automatically adapt to a mobile responsive layout when the container where you've injected the Bento element is less than 700px.

These classes are for changes you want to make to the inline experience at narrow breakpoints.

Bento will inherit your default fonts from your web page. If that doesn't work the way you expect you can specify the font using CSS.

Identify the class you want to adjust. For example, the guide title. Then include the font family and any additional formatting to achieve your desired result.