Flout Translate Widget Advanced Configuration Guide

For full control — inside a menu, header or footer — add data-auto-selector="false" to the loader snippet, then add the <ft-selector> tag once anywhere in your HTML. It will use the languages, colours and behaviour you have configured in the dashboard.

<nav>
  <a href="/">Home</a>
  <a href="/contact">Contact</a>
  <ft-selector></ft-selector>
</nav>

For designers who want to go further, the selector exposes shadow-DOM parts you can target with ::part().

• ::part(container) — the wrapper around the button and dropdown.
• ::part(button) — the clickable trigger.
• ::part(panel) — the dropdown list background.
• ::part(item) — each language row in the dropdown.
• ::part(icon) — the icon image, when one is configured.

ft-selector::part(button) {
  font-size: 16px;
  color: blue;
  background-color: #f0f0f0;
  border: 1px solid green;
  padding: 5px;
  border-radius: 5px;
}

ft-selector::part(panel) {
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
}

ft-selector::part(item):hover {
  background: #f5f5f5;
}

You can override settings for a single page load by adding parameters to the URL. These take priority over your dashboard settings.