Styling reference

This page lists what you can restyle on a widget or a Wall of Love beyond the builder's own settings: 14 custom properties, 13 class names and the rules custom CSS is checked against. Most widgets never need it. The settings themselves are on the Style tab of the widget and wall builders: open Testimonials in the site's sidebar, then Widgets or Walls.

Three ways to style#

Anything left empty on the Style tab follows the site's brand kit. When more than one way sets the same thing, the later row wins.

Custom properties#

A widget draws its colors, corners, fonts and spacing from these 14 properties. They are the ones you can rely on.

The first eleven are the brand kit's own CSS variables, with the Style tab on top. The last three belong to the widget or wall. The brand kit also sets a heading font (--tt-font-heading). A widget and a wall do not use it.

Other properties in the markup (--tt-lines, --tt-cols and the like) are for the widget's own use and can change without notice.

Set them from your own stylesheet#

With the script embed, the widget is drawn inside its own boundary, and your site's styles do not reach into it. Custom properties are the exception: they pass through. So a rule in your own stylesheet, on the widget's element, restyles the widget, and it wins over the widget's own value.

[data-pa-testimonial-widget] {
  --tt-accent: #0a7;
  --tt-radius: 4px;
}

That rule styles every widget on the page. For one widget, name it:

[data-pa-testimonial-widget="wdg_..."] {
  --tt-card: #fffaf0;
}

A wall placed in your page works the same way, on [data-pa-testimonial-wall].

• A value you set applies in light and dark alike. To vary it, put the rule inside your own theme selector or a prefers-color-scheme media query.
• Two properties are worked out for you only on our side. When you change --tt-accent from your stylesheet, set --tt-accent-text too, and when you change --tt-text, set --tt-muted too.
• Colors on the Style tab are hex values, such as #06755b. In your own stylesheet you can use any CSS color.

In a frame, your site's stylesheet cannot reach the widget at all. Use the Style tab or custom CSS. Pasted HTML is plain markup in your own page, so your stylesheet reaches its classes directly.

Light, dark and "Match the page"#

A widget on Match the page carries a light and a dark set of these properties and picks one from the text color of the place where it sits. To decide for it, add data-theme="light" or data-theme="dark" to the widget's element. See Match the page. A color you set on the Style tab is used in both sets.

Class names#

These 13 class names are a stable contract. They stay in the markup, so custom CSS written against them keeps working.

A card, simplified, is built like this:

<div class="tt-widget">
  <article class="tt-card">
    <div class="tt-rating">...</div>
    <div class="tt-video">...</div>
    <blockquote class="tt-quote">
      The words, with <mark class="tt-highlight">a highlight</mark>.
    </blockquote>
    <div class="tt-person">
      <img class="tt-avatar" alt="">
      <div>
        <div class="tt-name">Name <span class="tt-verified"></span></div>
        <div class="tt-meta">Job title, Company</div>
      </div>
    </div>
    <div>
      <a class="tt-source">via Trustpilot</a>
    </div>
  </article>
  <a class="tt-badge">Collected with Privatus Analytics</a>
</div>

A part is left out when the card has nothing for it, or when its switch on the Content tab is off. An avatar strip and a rating badge have no cards. Of these names, .tt-widget and .tt-badge apply to both, and .tt-avatar to the faces of the strip.

Other class names that start with tt- are not part of the contract. They can change, so do not style against them.

Custom CSS#

On Business and Enterprise, the Style tab of a widget or a wall has a Custom CSS field under Badge and custom CSS, for up to 20,000 characters.

.tt-card {
  border-width: 2px;
}

.tt-quote {
  font-style: italic;
}

.tt-highlight {
  background: #fff3a3;
}

Where it applies#

Custom CSS is applied inside the widget, after everything else. The brand kit's custom CSS comes first and the widget's own comes second, so the widget wins when both style the same thing.

It travels with the script embed, the pasted HTML, the frame and the wall page. It is not part of the data address, which carries no styling rules.

It stays inside the widget#

Every selector you write is prefixed with the widget's outermost element, .tt-widget, so custom CSS cannot change the page around it. A wall has the same wrapper.

Forms are separate. The brand kit's custom CSS is also applied to the site's forms, where the wrapper is .pf and the class names start with pf- (.pf-btn, .pf-title). A rule for .tt-card therefore styles widgets and walls and matches nothing on a form, and a rule for .pf-btn styles forms and matches nothing on a widget. The custom CSS of one widget or wall never reaches a form.

• .tt-card means the cards of this widget, never anything else on the page.
• :root, html, body and :host at the start of a selector mean the widget's outermost element. Use one of them to style that element or to set a custom property: :root { --tt-gap: 20px; }.
• .tt-widget written as a selector is prefixed like any other, so it looks for a widget inside the widget and matches nothing. Write :root instead.
• A selector that starts by reaching for a sibling (+ or ~), or that uses the nesting selector &, is removed with its rule.

What is removed#

Custom CSS is checked every time the widget is drawn. It is read and written out again from the parts that are allowed, and only plain style rules that load nothing from elsewhere are kept.

One declaration that is not allowed is removed alone, and the rest of its rule stays. One selector that is not allowed removes its whole rule. !important is kept.

When part of your CSS is removed, the Style tab lists the first five things that were left out after you save, each with the line it was on. The rest of your CSS still applies. CSS longer than 20,000 characters is not saved.

This is one difference from the brand kit, where custom CSS with a part that is not allowed is not saved at all. See Custom CSS in the brand kit.

Testimonial text is never markup#

Whatever a customer typed is shown as text. It is escaped when the widget is drawn and is never read as HTML or CSS, in any embed method.

API and MCP#

Custom CSS is the custom_css input of the widget and wall tools, and the Style tab's other settings are inputs of the same tools.

Saving new custom CSS on Free or Pro responds with 402 and the code plan_limit. The inputs are in the API reference and the MCP reference.

Good to know#

• On Free and Pro the Custom CSS field is locked. It is grayed out, shows any CSS that is stored, and names the plan with a link to the plans.
• After a downgrade from Business, stored custom CSS is kept and not applied. That goes for the brand kit's CSS and the widget's own. It is used again as soon as the plan includes it.
• A custom property set in your stylesheet beats the Style tab, in light and dark alike. If a color will not change from the builder, look for a --tt- rule in your own site's CSS.
• Fonts are never loaded. A font choice is your page's font or a stack of fonts already on the visitor's device.
• A change to custom CSS reaches your site like any other change, within about ten seconds, and a browser keeps the widget for five minutes. Pasted HTML has to be copied again.