Style a widget with custom CSS
Write CSS rules that restyle any part of a widget, pick selectors for your widget's style from Snippets, and check them in the builder's preview.
On Business, Custom CSS on the widget builder's Design tab restyles any part of a widget, beyond what the other options on that tab cover. Your rules apply to the widget on your site and in the builder's preview.
Open Custom CSS
In the widget builder, open the Design tab and click Custom CSS in the list.
Pick a part from Snippets
Click Snippets and pick the part you want to style, or type to search. The list shows only what your widget's style draws, in up to three groups:
- This Widget: the widget's frame (Widget Root), This Widget Type, This Style Only, the style's Layout, the Note Under Widget while the widget shows one, and Branding.
- In This Style: the parts of a testimonial, such as the card, the stars, the quote, the author's name and role, the date and the source, and in a style that plays videos, the Video, its Video Thumbnail and its Play Button.
- Controls & Panels: where the style has them, such as arrows, dots, a Load More Button or a badge's review panel.
Each one adds an empty rule for its selector where your cursor is.
Write your rules
Write your CSS between the braces, for example:
.widget-card {
border-radius: 4px;
}Your rules win over the widget's own styles wherever they match, so you don't need !important.
To style one widget style only, start the rule with the selector from This Style Only, such as .widget-root[data-widget-style="classic"] .widget-card. If you switch the widget to another style later, that rule stops applying.
Check it in the preview
The preview updates as you type. When you leave the box, a message under it names the line of anything left unfinished, such as a { with no }. Click Preview in the top bar to try the widget at Desktop, Tablet and Mobile sizes.
What happens next
Your CSS saves with the widget, and a published widget shows it on your site like any other change. See Publish, update or unpublish a widget.
If your plan changes to one without custom CSS, your site shows the widget without it. The CSS is kept, and Clear removes it.
What custom CSS can't do
- Load fonts.
@importand@font-facedon't load reliably in a widget, and the builder's preview leaves them out. Choose the font under Typography instead. - Reach the widget from your site's stylesheet. Your site's own CSS can't style the parts inside a widget: only Custom CSS can. See Widget looks different on your website.
Was this page helpful?
Customize a widget
Use the widget builder to choose testimonials, pick a layout, style each element, preview the widget on any device and publish it.
Choose which testimonials a widget shows
Hand-pick a widget's testimonials with Curate, let rules fill it with Auto-sync, or match testimonials to each page with Proof Match.