Integration von Menubox und QR-Code

Mit der Menübox können Sie die Tagesmenüs und à la carte Angebote auf Ihrer Website integrieren.


Ausgewähltes Restaurant: Grill Restaurant El Toro - Hotel Villmergen Ändern

Speichern Sie die Einstellungen und kopieren Sie dann den unten stehenden Einbettungscode für die Menübox oder die Grafik mit dem QR-Code.

Einstellungen für die Menubox
Inline-Vorschau

Bitte Einstellungen vornehmen und speichern

Inline-Code der Menubox

Anmerkungen zum Stylesheet

Bitte Einstellungen vornehmen und speichern

Popup-Code der Menubox

Bitte Einstellungen vornehmen und speichern

Bitte Einstellungen vornehmen und speichern

Link mit href

Bitte Einstellungen vornehmen und speichern

Bitte Einstellungen vornehmen und speichern

QR-Code für Ihre Angebote

Der QR-Code verlinkt auf eine URL, die den Inhalt der Menübox direkt anzeigt. Die Grafik kann kopiert und heruntergeladen werden.

Bitte Einstellungen vornehmen und speichern

Externe Stylesheets

Mit einem externen Stylesheet kann Ihr Webmaster das Aussehen des Box-Inhalts vollständig an das Erscheinungsbild Ihrer Website anpassen. In das externe Stylesheet brauchen Sie nur die Werte einzugeben, die Sie im Vergleich zum Basis-Stylesheet unten ändern wollen.
Die URL zum externen Stylesheet wird in das Formular eingegeben und in den Embedcode übertragen.

Demo Stylesheet

Wählen Sie ein Demo-Stylesheet im Konfigurationsformular, um ein Beispiel zu sehen

Basis Stylesheet

Zu Ihrer Information können Sie hier das komplette Basis-Stylesheet sehen:
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;
    }
}