„Neues“ Onlineformular mit Corporate Design des Restaurants

Unser neues Onlineformular lässt sich bequem als iframe in ihre Webseite einbinden. Natürlich soll es zum Look and Feel der Webseite passen. Daher können Sie ihr Corporate Design auf unser Formular anwenden. Hierzu werden die CSS Style-Regeln in reservino in den Einstellungen hinterlegt.

Folgende Regeln können Sie vermutlich gut gebrauchen:

/* Buttons im Formular /Hover ist fürs drüberfahren mit der Maus */

*.btn-secondary {
background-color: rgb(195,91,20);
border-color: rgb(195,91,20);
}
*.btn-secondary:hover {
background-color: rgb(234,120,45);
border-color: rgb(195,91,20);
}
*.btn-outline-secondary {
border-color: rgb(195,91,20);
color: rgb(195,91,20);
}
*.ngb-dp-weekday {
color: rgb(195,91,20);
}

/* der heutige Tag im Kalender

.ngb-dp-today {
background-color: rgb(132,202,198);
}

*.btn-primary {
background-color: rgb(0,61,107);
border-color: rgb(0,61,107);
}
*.btn-primary:hover {
background-color: rgb(0,91,159);
border-color: rgb(0,91,159);
}
*.btn-outline-secondary:hover {
background-color: rgb(195,91,20);
border-color: rgb(195,91,20);
color: white;
}

.btn-link:hover {
color: rgb(0,61,107) !important;

text-decoration: none;

}

.btn-link:active{
color: rgb(0,61,107) !important;
}

.btn-link:focus{
color: rgb(0,61,107) !important;
}

/* Farbe der icons für Pflichtfelder (initial orange), im Fehlerfall ist es rot, dann ist es das invalidIcon */

*.mandatoryIcon {
color: rgb(195,91,20);
}
*.input-group-prepend > *.btn {
color: rgb(195,91,20);
border-bottom-color: rgb(0,61,107);
}

*.input-group-append > *.btn {
color: rgb(132,202,198);
border-bottom-color: rgb(132,202,198);
}

*.card-open {
color: rgb(195,91,20);
}
*.validIcon {
color: rgb(0,61,107);
}
*.tooltip-inner {
background-color: rgb(0,61,107);
}

/* Farbe der Links anpassen */

a:hover {
color: rgb(0,91,159);
}

a{
color: rgb(0,61,107);
}

/*Farbe der Umrandung der Veranstaltungen/Ruhetage/A la carte Boxen verändern */

.eventcontainer {
border-color: rgb(0,91,159);
}

.noeventcontainer {
border-color: rgb(0,91,159);
}

.alacartecontainer {
border-color: rgb(195,91,20);
}

/*events im Kalender eine andere Farbe als grün geben */

.hasEvent {
background-color: rgb(0,61,107);
}

/*selektierten Tag im Kalender eine andere Farbe als dunkelgrau geben*/

.selected {
background-color: lightgrey;
}

/*Infofenster eine andere Farbe als grün geben (Grüner Haken kann nicht umgestylt werden)*/

*.alert.alert-success {
color: rgb(0,61,107);
border-left-color: rgb(0,61,107);
}
*.alert.alert-success *.alert-heading {
color: rgb(0,61,107);
}

/*falls man das Rot der Fehlermeldungen verändern möchte*/

*.alert.alert-danger{
color: rgb(195,91,20);
border-left-color: rgb(195,91,20);
}
*.alert.alert-danger *.alert-heading {
color: rgb(195,91,20);
}

/*falls man das Orange der Warnungen verändern möchte*/

*.alert.alert-warning{
color: rgb(195,91,20);
border-left-color: rgb(195,91,20);
}
*.alert.alert-warning*.alert-heading {
color: rgb(195,91,20);
}

/* falls man die Farben der Meldungen rechts oben bearbeiten will */

*.toast-container *.ngx-toastr.toast-warning {
border-color: rgb(103,105,118);
}
*.toast-container *.ngx-toastr.toast-warning *.toast-title {
color: rgb(103,105,118);
}