Christian Petersen: Die Seite wurde neu angelegt: „Wenn Sie nicht die von More-Bookings bereitgestellte Homepage nutzen möchten, können Sie die Buchungsfunktion und/oder den Kalender einfach in Ihre bestehend…“

2021-02-01T20:58:26Z

Die Seite wurde neu angelegt: „Wenn Sie nicht die von More-Bookings bereitgestellte Homepage nutzen möchten, können Sie die Buchungsfunktion und/oder den Kalender einfach in Ihre bestehend…“

Neue Seite

Wenn Sie nicht die von More-Bookings bereitgestellte Homepage nutzen möchten, können Sie die Buchungsfunktion und/oder den Kalender einfach in Ihre bestehende Webseite einbinden. Weitere Informationen dazu finden Sie [[Kalender in vorhandene Seite|hier]]

Um das Aussehen des iframes zu verändern, gibt es sogenannte CSS-Dateien. Wenn Sie sich damit etwas auskennen oder etwas Zeit investieren möchten, können Sie das Aussehen des iframes vollkommen verändern.

Dazu erstellen Sie zunächst eine leere Seite auf irgendeinem im Internet erreichbaren Server und merken sich die Internet-Adresse dieser Seite. (Wenn Sie eine Homepage haben, werden Sie wahrscheinlich wissen, wie das geht). Dann kopieren Sie die vielen Code-Zeilen unten auf dieser Seite in Ihre leere Seite und speichern diese.

Im zweiten Schritt tragen Sie die Internet-Adresse Ihrer neuen CSS-Seite in More-Bookings ein. Dazu gehen Sie auf "Einstellungen", wählen Ihre Ferienwohnung aus und tragen die Internet-Adresse unter "Individuelle CSS-Datei f. Gast-Buchungsseite (optional)" ein.
[[Datei:Eigenes CSS eintragen.png|miniatur|zentriert|Eigenes CSS eintragen]]

Im dritten Schritt können Sie jetzt nach Herzenslust Ihre CSS-Seite so verändern, bis sie mit dem Aussehen komplett zufrieden sind.

Dies sind die "alten" CSS-Anweisungen. Wenn Sie noch kein CSS beherrschen, gibt es hier weitere Informationen für Sie. https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/CSS_basics Aber ehrlich gesagt, sollten Sie im ersten Schritt vielleicht jemanden fragen, der sich mit CSS schon auskennt.
<pre>
body {
font-family: "helvetica", sans-serif;
text-align: center;
}
form {
padding: 5px 0 10px;
margin-bottom: 30px;
}
h3,legend {
font-weight: 400;
padding: 18px 0 15px;
margin: 0 0 0;
}

div.form-group {
margin-bottom: 10px;
}

input, textarea {
/* width: 250px;*/
font-size: 14px;
padding: 6px;
}
.callToAction{
border-radius: 3px;
background-color: #0067db;
border-color: #0067db;
color: #fff;
text-shadow: none;
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
line-height: 24px;
box-shadow: none;
}
textarea {
vertical-align: top;
/* height: 75px;
*/}
.form-error {
border-style: solid;
border-width: 5px;
border-color: #ff0000;
color: #ff0000;
}
.ui-datepicker {
background: #f9f9f9;
}
.datepicker-container{
text-align:center;
margin:auto;
}
.datepicker-center{
display:inline-block;
margin:0 auto;
}
.ui-state-disabled{
opacity: 1 !important;
}
table.legend {
width:30%;
border:1px;
}
.legend tr {
line-height: 20 px;
font-size: 90%;
}
.legend td, .legend a {
min-width: 20px;
/* padding-bottom: 1.5%;
*/ padding: 0;
border: 0,1,0,0;
}
.departure a, .legend-departure{
background-image: -webkit-linear-gradient(left top,#CD5E67 50%,#e6e6e6 50%) !important;
}
.arrival a, .legend-arrival{
background-image: -webkit-linear-gradient(right bottom,#CD5E67 50%,#e6e6e6 50%) !important;
}
.occupied a, .ui-datepicker-unselectable.occupied span.ui-state-default, .occupied span, .legend-occupied{
/* background-color: #CD5E67 !important;*/
background-image: -webkit-linear-gradient(#CD5E67 50%,#CD5E67 50%) !important;
/* background-image: none !important;*/
}
.season0 a, .season0 {
background-color: #e1eff9 !important;
background-image: none !important;
}
.season0arrival a, .ui-datepicker-unselectable.season0arrival span.ui-state-default {
background-image: -webkit-linear-gradient(right bottom,#CD5E67 50%,#e1eff9 50%) !important;
}
.season0departure a {
background-image: -webkit-linear-gradient(left top,#CD5E67 50%,#e1eff9 50%) !important;
}
.season5 a, .season5 {
background-color: #E8a526 !important;
background-image: none !important;
}
.season5arrival a, .ui-datepicker-unselectable.season5arrival span.ui-state-default {
background-image: -webkit-linear-gradient(right bottom,#CD5E67 50%,#E8a526 50%) !important;
}
.season5departure a {
background-image: -webkit-linear-gradient(left top,#CD5E67 50%,#E8a526 50%) !important;
}
.season4 a , .season4{
background-color: #D1E826 !important;
background-image: none !important;
}
.season4arrival a, .ui-datepicker-unselectable.season4arrival span.ui-state-default {
background-image: -webkit-linear-gradient(right bottom,#CD5E67 50%,#D1E826 50%) !important;
}
.season4departure a {
background-image: -webkit-linear-gradient(left top,#CD5E67 50%,#D1E826 50%) !important;
}
.season3 a , .season3{
background-color: #4BE826 !important;
background-image: none !important;
}
.season3arrival a, .ui-datepicker-unselectable.season3arrival span.ui-state-default {
background-image: -webkit-linear-gradient(right bottom,#CD5E67 50%,#4BE826 50%) !important;
}
.season3departure a {
background-image: -webkit-linear-gradient(left top,#CD5E67 50%,#4BE826 50%) !important;
}
.season2 a, .season2 {
background-color: #26E8E1 !important;
background-image: none !important;
}
.season2arrival a, .ui-datepicker-unselectable.season2arrival span.ui-state-default {
background-image: -webkit-linear-gradient(right bottom,#CD5E67 50%,#26E8E1 50%) !important;
}
.season2departure a {
background-image: -webkit-linear-gradient(left top,#CD5E67 50%,#26E8E1 50%) !important;
}
.season1 a, .season1 {
background-color: #afc3f3 !important;
background-image: none !important;
}
.season1arrival a, .ui-datepicker-unselectable.season1arrival span.ui-state-default {
background-image: -webkit-linear-gradient(right bottom,#CD5E67 50%,#afc3f3 50%) !important;
}
.season1departure a {
background-image: -webkit-linear-gradient(left top,#CD5E67 50%,#afc3f3 50%) !important;
}

.change a, .change {
background-image: -webkit-linear-gradient(right bottom,#CD5E67 30% ,#e6e6e6, #CD5E67 70%) !important;

}

.rechnungspositionen {
text-align: left;
}
.moreBookingsRef {
font-size: 60%;
text-align: right;
}
.moreBookingsRefCal {
font-size: 60%;
color: #000000;
text-align: center;
}
.divtable {
text-align: left;
}
#waitImage {
position: fixed;
z-index: 1000 !important;
top: 50%;
left: 50%;
visibility: hidden;
}
.testbild {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
}
.ui-autocomplete { position: absolute; cursor: default;z-index:8888 !important;}
/*The following classes are for the tables in the bookings and guest-tab*/
.mbtables {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
/* width: 100%;
*/ }

.mbtables td, .mbtables th {
border: 1px solid #ddd;
padding: 8px;
}

.mbtables tr:nth-child(even){background-color: #f2f2f2;}

.mbtables tr:hover {background-color: #ddd;}

.mbtables th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #ddd;
/* color: white;
*/ }
.mbtables tr {
text-align: left;
}

.sortable2 { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.sortable2 li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 200px; font-size: 1em; text-align: center; }
.save_image_changes {clear:both;}

table {
margin-left: auto;
margin-right: auto;
}
td,th {
padding: 7px;
}
.modalhelp{
display: inline-block;
width: 20px;
position: static;
text-align: center;
background-color: #cccccc;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 12px;
line-height: 20px;
cursor: help;
}

.modalhelp:before{
content:'?';
font-weight: bold;
color:#fff;
}
.ui-dialog-titlebar {
background-color: #fff;
border: none;
font-size: 22px;
/* text-transform: capitalize;*/
font-weight: 500;
padding: 1rem;
}
.ui-dialog {
background-color: #fff;
}
.action-button {
font-size: 150%;
border-radius: 6%;
margin: 3px;
}
.datepicker-container {
font-size: 90%;

}
.standalone {
margin-left: 30px;
margin-right: 20px;
}
</pre>

Iframe Formatierung und Aussehen ändern - Versionsgeschichte

Christian Petersen: Die Seite wurde neu angelegt: „Wenn Sie nicht die von More-Bookings bereitgestellte Homepage nutzen möchten, können Sie die Buchungsfunktion und/oder den Kalender einfach in Ihre bestehend…“