ARTICLE

Getting Started with Qaid Themes

Swap the plain feedback buttons for one of 17 built-in presets, from the dashboard or by hand.

Qaid Team
TL;DR

A preset is a ready-made look for the feedback buttons: CSS, a button class, icons and two colours. Pick one on your project’s Customize page and copy the snippet, which carries all of it. By hand, the CSS must go into the widget through css or data-css-selector; a page stylesheet cannot reach it.

The default buttons are grey circles with a thumb in each. A preset swaps the whole look at once. It is a dashboard starting point, not an embed option: picking one fills in a button class, its CSS, two icons and two colours for you. (The quests embed does have a preset option; that is a different thing.)

The presets

Preset Look Class
Default Grey circles with thumbs none
Puppet Faces Happy and sad puppet faces qaid-theme-puppet
Theatre Masks Comedy and tragedy masks qaid-theme-theatre
Command Console Console panels with chevrons; own wording qaid-theme-lcars
Emoji Smiley faces qaid-theme-emoji
Neon Glowing outlines for dark pages qaid-theme-neon
Minimal Plus and minus in thin circles qaid-theme-minimal
Editorial Question and exclamation marks; own wording qaid-theme-editorial
Hearts Heart emoji; own wording qaid-theme-hearts
Stars Star rating qaid-theme-stars
Hands Thumbs emoji qaid-theme-hands
Applause Clap and tomato; own wording qaid-theme-applause
Glassmorphism Frosted glass qaid-glass
Neumorphism Soft, raised buttons qaid-neumorph
Gradient Border A gradient ring that moves on hover qaid-gradient-border
Pulse Ripple A ring that spreads on hover qaid-ripple
Retro Pixel 8-bit blocks qaid-pixel

Pick a preset in the dashboard

  1. Open Customize

    Open your project and click Customize in its header.

  2. Click a preset

    Pick a card under Presets. The preview on the right redraws.

  3. Copy the snippet

    Copy THUMBS CODE and paste it before </body>. The preset rides along inside it, CSS included.

Loading the film…

Everything else on that page, from colours to switches to saving your own theme, is covered in The Embed Customizer.

Use a preset by hand

The buttons live inside the widget’s own shadow root, so CSS in your page cannot touch them. Put the CSS in a <style> block, point data-css-selector at it, and name the class in data-button-class:

<style id="qaid-theme" media="not all">
button.qaid-theme-minimal {
  width: var(--qaid-btn-size);
  height: var(--qaid-btn-size);
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  color: #666;
}
button.qaid-theme-minimal.qaid-btn-up:hover { border-color: #22c55e; color: #22c55e; }
button.qaid-theme-minimal.qaid-btn-down:hover { border-color: #ef4444; color: #ef4444; }
</style>
<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  defer
  data-api-key="YOUR_PROJECT_KEY"
  data-endpoint="https://qaid.dev/api/feedback"
  data-button-class="qaid-theme-minimal"
  data-css-selector="#qaid-theme"
></script>
Loading the live demo…

data-button-class switches off the default look entirely, so a class with no CSS behind it gives bare buttons. media="not all" keeps your page from applying the rules itself. Custom button styles goes further.

Change a preset’s CSS

Customize has no CSS editor. Copy the snippet, then edit the rules inside its <style> block, or the css string in the ESM form. Keep the class name the same in both places.

Share a theme

Save the look as a theme on the Customize page, then make it public from Your Themes. It then shows in the gallery at /themes. See the public theme gallery.

Back to all articles