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
Bitte Einstellungen vornehmen und Embed-Code aktualisieren
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
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;
}
#subscribe {
margin-top: 30px;
}
#subscribe a {
margin-top: 30px;
font-weight: bold;
padding: 5px 10px;
background-color: #aaaaaa;
color: #ffffff;
border-radius: 5px;
}
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));
}