Integration Menübox

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

Restaurant wählen und Box konfigurieren

Füllen Sie das Konfigurations-Formular vollständig aus und kopieren Sie anschliessend den untenstehenden Code

Ausgewähltes Restaurant:

Vollständiger Pfad zu Ihrer CSS Datei

 
Menübox Vorschau
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 {
    margin: 0;
    padding: 0;
    width: 100%;
}

div.menu {
    background-color: white;
    padding: 10px 5px 10px 5px;
}

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

ul.etabs li.tab {
    width: auto;
    display: inline-block;
    padding: 0 12px 0 8px;
    margin: 0;
    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: 32px;
    margin-bottom: 32px;
    font-size: 8px;
    color: #aaaaaa;
}

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

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

span.card {
    margin: 16px;
}

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