How to customize your embedded menu with CSS

You can embed your Taplist.io menu in any other web site using the Embed Widget. Your widget and instructions can be found at https://app.taplist.io/dash/web. This HOWTO will help you customize that menu.

Overview

By default, your embedded menu uses a flexible, generic set of styles. The “Web Settings” portion of the dashboard does not affect embedded menus.

We made these different because we’ve found folks often want their embedded menu to closely match the style of the site it’s embedded in; and it’s very difficult for us to cover all possibilities in our appearance editor.

However, fear not! You or your web developer can fully customize the embedded menu using standard CSS. Here’s what you need to know.

Main CSS Selector

When you embed a Taplist.io menu, all elements will be contained in a CSS div with class name taplistio-embed.

For example, to make all the fonts of the menu red, you’d add the following CSS to your site:

.taplistio-embed {
  font-color: red;
}

Detailed selectors

Within the embedded menu, each distinct element of the menu also has a unique and stable CSS class name. You can use these names to make finer grained customizations.

Here is a list of class names currently used within  taplistio-embed:

• taplistio-section — A section; there will be one each for your main taps, and “On Deck”.
  • taplistio-header — The section’s title.
  • taplistio-tap — Main container for a tap.
  • taplistio-tap-illustration — An image next to a tap.
  • taplistio-tap-details — The details for the tap
    • taplistio-beverage-name
    • taplistio-producer
    • taplistio-beverage-prices
    • taplistio-beverage-details
      • taplistio-beverage-metrics
        • taplistio-metric-temperature
        • taplistio-metric-style
        • taplistio-metric-abv
        • taplistio-metric-ibu
        • taplistio-metric-srm
    • taplistio-beverage-description

Pro Tip: Use the “Inspect Element” feature of your browser to view the full menu structure.

Example: Hide producer name and beverage description

Let's say you don’t want to show beverage descriptions or producer names on your embedded site. Here’s CSS that would accomplish that:

.taplistio-producer {
  display: none;
}
.taplistio-beverage-description {
  display: none;
}

Online Demo

Here’s an online demo whose CSS you can play with, hosted at JsFiddle.