Overview:
The print 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 print 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-name {
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 “Apply CSS Updates” to see your styles applied to the menu.
Note: due to the specific rendering requirements for print menus, certain CSS properties may not apply or behave as expected. For example, font style adjustments may not work. Instead, you should make those adjustments within the “Fonts” section of the menu customizer. We recommend previewing and testing your customizations to ensure optimal results.
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.
Page/Document Selectors:
Target parts of the entire menu document
| Name | CSS Selector | Description |
|---|---|---|
| All Pages | .full-page-container | Select each full page when “Page Use” is set to “Full Page” |
| All Half Pages | .half-page-container | Select both halves of each page when “Page Use” is set to “Half Page” |
| Each Page | @page | Select each page of the menu |
| Half Page - Left | .half-page-left | Select right half of each page when “Page Use” is set to “Half Page” |
| Half Page - Right | .half-page-right | Select left half of each page when “Page Use” is set to “Half Page” |
Menu Background Image Selectors:
Target the menu’s background image
| Name | CSS Selector | Description |
|---|---|---|
| Full Page | .background-image | Select the menu’s background image when “Page Use” is set to “Full Page” |
| Half Page - Left | .half-left | Select the left menu’s background image when “Page Use” is set to “Half Page” |
| Half Page - Right | .half-right | Select the right menu’s background image when “Page Use” is set to “Half Page” |
Header Selectors
Target parts of the menu header
| Name | CSS Selector | Description |
|---|---|---|
| Location Logo | .location-logo | Select the uploaded location logo |
| Header Text | .header-text | Select each menu header’s text |
| Header Subtext | .header-subtext | Select each menu header’s subtext |
| Location/Business Information | .business-info | Select each menu’s location/business information |
| Location Phone | .location-phone |
Select each menu’s location/business phone *is a child of .business-info |
| Location Website | .location-website |
Select each menu’s location/business website address/url *is a child of .business-info |
| Location Address | location-address |
Select each menu’s location/business physical address *is a child of .business-info |
Footer:
Target the menu footer
| Name | CSS Selector | Description |
|---|---|---|
| Full Footer | .footer | Select each menu’s footer |
| Footer Border | .footer-border | Select each menu’s footer border |
| Footer Text | .footer-text | Select text within each menu’s footer |
| Left Footer | .footer-left |
Select the left side of each menu’s footer (includes Published Date if it is enabled) *Is a child of .footer |
| Center Footer | .footer-center |
Select the middle portion of each menu’s footer (includes Page Numbers if they are enabled) *Is a child of .footer |
| Right Footer | .footer-right |
Select the right side of each menu’s footer (includes “Subscribe to us on Untappd” if it is enabled) *Is a child of .footer |
Menu Header:
Target the menu header
| Name | CSS Selector | Description |
|---|---|---|
| Full Header | .menu-header | Target each menu’s entire header |
| Menu Name | .menu-name |
Target each menu’s name *Is a child of .menu-header |
| Menu Description | .menu-description |
Target each menu’s description *Is a child of .menu-description |
Sections:
Target menu sections and section details
| Name | CSS Selector | Description |
|---|---|---|
| All Sections | .sections | Select the part(s) of the menu that contain(s) menu sections |
| Individual Sections | .section |
Select each menu section *Is a child of .sections |
| Section Name | .section-name |
Select each menu section’s name *Is a child of .section |
| Section Description | .section-description |
Select each menu section’s description *Is a child of .section |
| Section Border | .section-border |
Select each menu section’s border |
Items:
Target menu items and item details
| Name | CSS Selector | Description |
|---|---|---|
| Individual Items | .item | Select each menu item |
| Item Label Image | .item-label-image |
Select each menu item’s label image *Is a child of .item |
| Item Heading | .heading |
Select each menu item’s heading *Is a child of .item |
| Item Description | .item-description |
Select each menu item’s description *Is a child of .item |
| Item Description By Item Type: | .beer-description |
Select each beer item’s description *Is a child of .item |
| .wine-description |
Select each wine item’s description *Is a child of .item |
|
| .ready-to-drink-description |
Select each ready-to-drink item’s description *Is a child of .item |
|
| .spirit-description |
Select each spirit item’s description *Is a child of .item |
|
| .food-description |
Select each food item’s description *Is a child of .item |
|
| .cocktail-description |
Select each cocktail item’s description *Is a child of .item |
|
| .flight-description |
Select each flight item’s description *Is a child of .item |
|
| .non-alcoholic-description |
Select each non-alcoholic item’s description *Is a child of .item |
|
| .merchandise-description |
Select each merchandise item’s description *Is a child of .item |
|
| .miscellaneous-description |
Select each miscellaneous item’s description *Is a child of .item |
|
| Item Producer | .item-producer |
Select each item’s producer *Is a child of .item |
| Item Producer By Item Type: | .wine-producer |
Select each wine item’s producer name *Is a child of .item |
| .ready-to-drink-producer |
Select each ready-to-drink item’s producer name *Is a child of .item |
|
| .spirit-producer |
Select each spirit item’s producer name *Is a child of .item |
|
| Beer Brewery | .item-brewery |
Select each beer item’s brewery name *Is a child of .item |
| Beer Rating | .item-rating |
Select each beer item’s rating *Is a child of .item |
| Item Name | .item-name |
Select each item’s name *Is a child of .item |
| Item Information | .info |
Select each item’s information *Is a child of .item |
| Item Tap Number | .item-tap-number |
Select each item’s tap number *Is a child of .info |
| Item Category By Item Type: | .wine-category |
Select each wine item’s grape type *Is a child of .info |
| .ready-to-drink-category |
Select each ready-to-drink item’s category *Is a child of .info |
|
| .spirit-category |
Select each spirit item’s category *Is a child of .info |
|
| Beer Style | .item-style |
Select each beer item’s style *Is a child of .info |
| Beer IBU | | .item-ibu |
Select each beer item’s IBU value *Is a child of .info |
| Wine Characteristics | .wine-characteristics |
Select each wine’s characteristics *Is a child of .info |
| Wine Region | .wine-region |
Select each wine’s region *Is a child of .info |
| Beer Brewery Location | .item-brewery-location |
Select each beer item’s brewery location *Is a child of .info |
| Item ABV By Item Type: | .beer-abv |
Select each beer item’s ABV (alcohol by volume) value *Is a child of .info |
| .wine-abv |
Select each wine item’s ABV (alcohol by volume) value *Is a child of .info |
|
| .ready-to-drink-abv |
Select each ready-to-drink item’s ABV (alcohol by volume) value *Is a child of .info |
|
| .spirit-abv |
Select each spirit item’s ABV (alcohol by volume) value *Is a child of .info |
|
| Item Calories By Item Type: | .beer-calories |
Select each beer item’s calorie count *Is a child of .info |
| .wine-calories |
Select each wine item’s calorie count *Is a child of .info |
|
| .ready-to-drink-calories |
Select each ready-to-drink item’s calorie count *Is a child of .info |
|
| .spirit-calories |
Select each spirit item’s calorie count *Is a child of .info |
|
| .food-calories |
Select each food item’s calorie count *Is a child of .info |
|
| .cocktail-calories |
Select each cocktail item’s calorie count *Is a child of .info |
|
| .flight-calories |
Select each flight item ’s calorie count *Is a child of .info |
|
| .non-alcoholic-calories |
Select each non-alcoholic item’s calorie count *Is a child of .info |
|
| Item Vintage By Item Type: | .wine-vintage |
Select each wine item’s vintage year *Is a child of .info |
| .ready-to-drink-vintage |
Select each ready-to-drink item’s vintage year *Is a child of .info |
|
| .spirit-vintage |
Select each spirit item’s vintage year *Is a child of .info |
Containers:
Target containers and container details
| Name | CSS Selector | Description |
|---|---|---|
| Container | .container | Select each container |
| Container Separator | .container-separator | Select the symbol that separates container name and price |
| Container Name | .container-name |
Select each container name *Is a child of .container |
| Container Calories | .container-calories |
Select each container’s calories *Is a child of .container |
| Full Price - With Currency Symbol | .container-price-full |
Select each container’s price, including the currency symbol *Is a child of .container |
| Container Price - No Currency Symbol | .container-price |
Select each container’s price, excluding the currency symbol *Is a child of .container-price-full |
| Currency Symbol | .currency-symbol |
Select the currency symbol in each container price *Is a child of .container-price-full |