Integration Menübox und QR-Code

Mit der Menübox können Sie die Mittagsmenüs und à la carte-Angebote auf Ihrer Webseite einbinden.

Den QR-Code können Ihre Gäste scannen um Ihr gesamtes Speisen- und Getränkeangebot online anzusehen.

Restaurant wählen, QR-Code und Box konfigurieren

Speichern Sie das Konfigurations-Formular und kopieren Sie anschliessend den untenstehenden Embed-Code für die Menübox bzw. die Grafik mit dem QR-Code.

Ausgewähltes Restaurant:

Vollständiger Pfad zu Ihrer CSS Datei

 
Menübox Vorschau

Bitte Einstellungen vornehmen und speichern

Sie haben kein Restaurant ausgewählt. Weiter zu Lunchmail

Externe Stylesheets

Mit einem externen Stylesheet kann Ihr Webmaster die Darstellung des Box-Inhaltes komplett dem Aussehen Ihrer Webseite anpassen. Im eigenen Stylesheet müssen nur die Werte eingetragen werden, die gegenüber dem unten stehenden Basis Stylesheet ändern wollen.
Die URL zum Stylesheet wird im Formular eingetragen und in den Embedcode übertragen.

Demo Benutzer Stylesheet

Wählen Sie im Konfigurationsformular ein Demo Benutzer Stylesheet, um ein Beispiel-CSS anzuzeigen.

Basis Stylesheet

Beachten Sie, dass die Menütitel im Basis Stylesheet gekürzt werden, damit die Höhe der Box bei geringer Breite nicht zu stark wächst. Sie können dies in Ihrem eigenen Stylesheet mit h2 {overflow: visible;} überschreiben.

Zu Ihrer Information sehen Sie hier das komplette Basis 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;
}

div.menu * {
    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;
    height: 30px;
    overflow: hidden;
}

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

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 {
    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;
}

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

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

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));
}