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