This page has been written for webmasters and others with knowledge of HTML and CSS.
Each location you create on the Interchange Design site has a tap menu that can be embedded on your website. Get the specific code for your widget in Settings > Website Widget.
To use custom CSS, remove the
&defaultCSS=true parameter from the script source URL.
Ensure your custom CSS is loaded before the
<div id="InterchangeDesignTapMenu"></div> block in your HTML output.
The website widget generates HTML with the following CSS tag structure:
<div id="InterchangeDesignTapMenu"> <div class="interchangeDesign-container"> <div class="interchangeDesign-item"> <div class="interchangeDesign-beer"> <p> <span class="interchangeDesign-beerName"></span><br> <span class="interchangeDesign-beerStyle"></span><br> <span class="interchangeDesign-beerInfo"></span> </p> </div> <div class="interchangeDesign-beerPricing"> <p> <span class="interchangeDesign-beerPrice"></span> <span class="interchangeDesign-servingInfo"></span> </p> </div> </div> </div> </div>
The entirety of the code is wrapped in the
InterchangeDesignTapMenu id selector.
The tap menu is contained within the
interchangeDesign-container class selector. This class contains the
<h1>On Tap</h1> line of HTML.
Each tap menu item lives within a
interchangeDesign-item class selector. This code block is repeated for each item on your tap menu.
interchangeDesign-beer class contains a paragraph
<p> code block that contains three spans, broken by line breaks (
beerStyle spans contain exactly what you would expect; the name and style of the beer respectively.
beerInfo span contains three parameters that are combined into a string:
In cases where the ABV or IBU is zero (or where the variable is empty), they are omitted from the string.
In the default state, this block is floated to create the left column of a two column layout.
interchangeDesign-beerPricing block contains the serving variants for the tap item. This block contains a paragraph (
<p>) tag which contains two spans, separated by a line break (
<br>) when two or more variants exist for a tap item. Those two spans are:
In cases where the
beerPrice is equal to zero, the string will display “Free”.
In the default state, this block is floated to create the right column of a two column layout.
Published Date: July 4, 2017