Integration of the Menubox and QR-Code

With the menu box you can integrate the daily specials and à la carte offers on your website.


Selected Restaurant: Ristorante Pizzeria Al Porto Change

Save the settings and then copy the embed code below for the menu box or the graphic with the QR code.

Settings for the menubox
Inline preview

Please make settings and save

Inline code of the menubox

Notes on the stylesheet

Please make settings and save

Popup code of the menubox

Please make settings and save

Please make settings and save

Link with href

Please make settings and save

Please make settings and save

QR code for your offers

The QR code links to a URL that directly displays the contents of the menu box. The graphic can be copied and downloaded.

Please make settings and save

External stylesheets

With an external stylesheet, your webmaster can completely customize the appearance of the box content to match the look and feel of your website. In the external stylesheet you only need to enter the values that you want to change compared to the base stylesheet below.
The URL to the external stylesheet is entered in the form and transferred to the embedcode.

Demo Stylesheet

Select a demo stylesheet in the configuration form to view an example

Basic stylesheet

For your information, here you can see the complete basic stylesheet:
body {
    padding: 0;
    margin: 0;
}

#box {
    padding: 0;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;

}

div.menu {
    background-color: white;
    padding: 10px 5px 10px 5px;
    margin: auto;
    max-width: 960px;
    position: relative;
}

div.menu *, div#language * {
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    line-height: 180%;
    font-size: 14px;
    padding: 0;
    margin: 0;
    text-align: center;
    text-decoration: none;
    color: #333333;
}

div.menu h1 {
    font-size: 20px;
    margin-top: 24px;
    margin-bottom: 24px;
}

div.menu h2 {
    font-size: 16px;
    margin-bottom: 0;
}

div.menu.qr h2 {
    overflow: visible;
    height: auto;
}

div.menu h3 {
    margin-bottom: 10px;
}

ul.etabs li.tab {
    width: auto;
    display: inline-block;
    padding: 0 12px 0 8px;
    margin-bottom: 32px;
    border-right: solid 1px #aaaaaa;
}

ul.etabs li.tab:last-child {
    border: none;
}

li.tab a, span.card a {
    color: #aaaaaa;
}

li.tab a.active, li.tab a:hover, li.tab a:active, span.card a:hover, span.card a:active {
    color: #333333;
}

div.panel-container h2 {
    font-size: 16px;
    margin-top: 32px;
}

p.card {
    margin-top: 32px;
}

p.message {
    margin-bottom: 32px;
}

p.provider, p.provider > a {
    margin-top: 16px;
    margin-bottom: 32px;
    font-size: 8px;
    color: #aaaaaa;
}

#subscribe {
    margin-top: 30px;
}

#subscribe a, span.card a {
    display: inline-block;
    margin: 15px;
    font-weight: bold;
    padding: 5px 10px;
    background-color: #aaaaaa;
    color: #ffffff;
    border-radius: 5px;
}

#language {
    text-align: left;
    margin-top: 3px;
    margin-left: 15px;
}

#language a {
    display: inline-block;
    text-decoration: none;
    color: #aaa;
    padding: 5px;
}

#language a.active, #language a:hover {
    color: #333;
}

span.line2, span.line3, span.price {
    display: block;
}

span.line3.small {
    font-size: 12px;
}

span.price:before {
    content: 'CHF ';
}

img.template {
    width: 100%;
    border: 1px solid #eeeeee;
    margin: 10px auto;
}

/* https://css-tricks.com/examples/hrs/ */
div.panel-container hr {
    margin: 32px auto 32px auto;
    width: 50%;
    color: #aaaaaa;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

#popupCloseButton {
    display: inline-block;
    padding: 12px 24px;
    font-size: 20px;
    color: #0007;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
}

.modalBody {
    background-color: white;
}

@media (min-width: 620px) {
    .modalBody {
        background-color: transparent;
    }
}