Overview:
The digital menu customizer provides a wide range of options to customize the styles and layout of your menus. However, certain situations might require further customization beyond what the customizer offers. In these cases, you can input custom CSS to achieve your desired styles.
What is CSS?
CSS is a styling language used to describe the presentation and layout of documents. It allows you to control the look and feel of the your page, such as fonts, colors, spacing, and more. With CSS, you can further customize styles of your menu into something unique and tailored to your preferences.
Selectors
In CSS, selectors are used to target specific elements on a page. They allow you to select and apply styles to those elements. Each part of the menu has a specific class assigned to it, enabling you to easily select and customize individual elements using CSS.
For example, all menu items are given a class of “item”. To target all the menu items, you could use the class selector .item in your CSS code. This would apply styles to all elements with the class "item".
Properties and Declarations
CSS properties define the specific aspect of an element's appearance that you want to modify. These properties include attributes like color, border, background-color, and many more. Each property is assigned a value to determine how the element should be styled.
A declaration consists of a property and its corresponding value. Multiple declarations can be combined within a set of curly braces { } called a CSS rule or style block.
Here's an example:
.menu-title {
background-color: lightgray;
color: red;
border: 2px solid black;
}
For more information on how to use CSS, we recommend exploring the MDN Web Docs on CSS . It will provide examples, guides, and references to help you further enhance your menu customization skills.
How To Customize Your Menu with CSS:
-
The tables below provide a comprehensive list of CSS selectors available to you when customizing your menu styles. Refer to them to find the appropriate CSS selectors for the specific parts of the menu that you want to customize.
-
Add your custom css rules in the code editor located under the “Custom CSS” section of the menu customizer.
-
Click “Save CSS Updates” to see your styles applied to the menu.
Supported CSS Selectors:
Note: some menu elements are nested within other elements. In these cases, applying styles to the parent element may affect the appearance of the child element(s). Where applicable, these relationships are outlined in the “Description” column in the tables below.
Menu / Screen Selectors:
Target parts of the entire menu / screen
| Name | CSS Selector | Description |
| Menu Background | .background | Select the menu background |
| Menu Content (entire screen) | .container | Select all menu content |
| Ad Slides | .communication | Select each ad slide |
| Menu Items (including Menu Title) |
.items-container child of .container |
Select the menu title and all menu items |
| Menu Title |
.menu-title child of .items-container |
Select the menu title |
| All Items |
.items child of .items-container |
Select each menu item |
| Section Titles |
.section-title child of .items-container |
Select each section title |
Item Selectors:
Target menu items
| Name | CSS Selector | Description |
| All Menu Items |
.item child of .items-container |
Select each menu item of all types |
| Beer Items |
.item-beer child of .items-container |
Select each beer item |
| Cocktail Items |
.item-cocktail child of .items-container |
Select each cocktail item |
| Non-Alcoholic Items |
.item-non_alcoholic child of .items-container |
Select each non-alcoholic item |
| Ready To Drink Items |
.item-ready_to_drink child of .items-container |
Select each ready to drink item |
| Wine Items |
.item-wine child of .items-container |
Select each wine item |
| Spirit Items |
.item-spirit child of .items-container |
Select each spirit item |
| Food Items |
.item-food child of .items-container |
Select each food item |
| Miscellaneous Items |
.item-miscellaneous child of .items-container |
Select each miscellaneous item |
| Merchandise Items |
.item-merchandise child of .items-container |
Select each merchandise item |
Item Info Selectors:
Target item data / details
| Name | CSS Selector | Description |
| Item Label Image |
.label-image child of .item |
Select each item label image |
| Item info |
.info child of .item |
Select all item info |
| Basic Item Info (item tag, tap number, brewery, producer, item name, and item details) |
.basic child of .info |
Select basic item info, including: item tag, tap number, brewery, producer, and item name |
|
Item tag (”On Deck” and “New”) |
.item-tag child of .basic |
Select each item tag, including “On Deck” and “New” |
| On Deck Item Tag |
.on-deck child of .basic |
Select each “On Deck” item tag |
| New Item Tag |
.new child of .basic |
Select each “New” item tag |
| Tap Number |
.tap-number child of .basic |
Select each tap number |
| Beer Breweries |
.brewery child of .basic |
Select each brewery name |
| Item Producers |
.producer child of .basic |
Select each item producer |
| Item Name |
.name child of .basic |
Select each item name |
| Item Details (beer style, item category, abv, ibu, wine characteristics, item vintage, item calories, brewery location, wine region, item rating, and description) |
.detail child of .basic |
Select all item details, including: beer style, item category, abv, ibu, wine characteristics, item vintage, item calories, brewery location, wine region, item rating, and description |
| Beer Style |
.style child of .detail |
Select each beer style |
| Item Category |
.category child of .detail |
Select each item category |
| Item ABV |
.abv child of .detail |
Select each item ABV |
| Beer IBU |
.ibu child of .detail |
Select each beer IBU |
| Wine Characteristics |
.characteristics child of .detail |
Select each wine characteristic |
| Item Vintage |
.vintage child of .detail |
Select each item vintage |
| Item Calories |
.calories child of .detail |
Select each item calories |
| Beer Brewery Location |
.brewery-location child of .detail |
Select each brewery location |
| Wine Region |
.region child of .detail |
Select each wine region |
|
Full Item Rating structure needs to match and caps need to be SVG for color styling |
.rating-container child of .detail |
Select each space that contains all five of an item’s bottle caps |
| Rating Bottle Caps |
.rating-item child of .rating-container |
Select each individual bottle cap |
| Item Description |
.generic-item-description child of .info |
Select each item description |
| Containers |
.containers child of .info |
Select each space that contains all of an item’s containers |
| Each Container |
.container-item child of .containers |
Select each individual container |
| Container Name |
.name child of .container-item |
Select each container name |
| Container Calories |
.container-calories child of .container-item |
Select each container calories |
| Container Price |
.price child of .container-item |
Select each container price, including currency symbol |
| Container Price Currency Symbol |
.currency-symbol child of .price |
Select each container price currency symbol |
Events Selectors:
Target menu events
| Name | CSS Selector | Description |
| Events | .events-container | Select the space that contains all events, including the events icon |
| Event Icon |
.icon child of .events-container |
Select each event icon |
| Event |
.event child of .events-container |
Select each individual event, including date, time, and name |
| Event Date |
.date child of .event |
Select each event date, including day and month |
| Event Day |
.day child of .date |
Select each event day (e.g. “28” for August 28) |
| Event Month |
.month child of .date |
Select each event month |
| Event Info |
.info child of .event |
Select each space that contains event information, including event name and time |
| Event Name |
.name child of .info |
Select each event name |
| Event Time |
.time child of .info |
Select each event time |
Untappd Checkins Selectors:
Target Untappd checkins
| Name | CSS Selector | Description |
| Checkins | .checkins-container | Select the space that contains the Untappd icon and all checkins |
| Checkins Icon |
.icon child of .checkins-container |
Select the Untappd icon in the checkins section |
| Checkin |
.checkin child of .checkins |
Select each individual checkin |
| User Avatar |
.avatar child of .checkin |
Select each user avatar |
| Checkin Info |
.info child of .checkin |
Select all checkin info. including beer name, user name, and checkin time |
| Checked In Beer |
.beer child of .info |
Select each checked in beer |
| Checked In User |
.user child of .info |
Select each checked in user |
| Checkin Time |
.time child of .user |
Select each checkin time |
Announcements Selectors:
Target menu announcements
| Name | CSS Selector | Description |
| Announcements | .announcements-container | Select the space that contains the announcements icon and all announcements |
| Icon |
.icon child of .announcements-container |
Select the announcements icon |
| Announcement | .announcement | Select each announcement |
Footer Selectors:
Target the menu footer
| Name | CSS Selector | Description |
| Footer (website, progress, page, ”subscribe to us on Untappd”) | .progress-container | Select the entire footer, including website/location, board rotation progress, page numbers, and “Subscribe to us on Untappd” |
| Location |
.location child of .progress-container |
Select your location |
| Progress (incl. circular progress and page number) |
.progress child of .progress-container |
Select the board rotation progress and page numbers |
| Page numbers |
.pages child of .progress |
Select the page numbers (e.g. 1 of 2) |
| “Subscribe to us on Untappd” |
.powered-by child of .progress-container |
Select the “Subscribe to us on Untappd” message |