Zum Hauptinhalt gehen

Wie kann ich den Regiondo Ticketshop oder das Buchungs-Widget mit Custom CSS anpassen?

Kay Endörfer
  • Aktualisiert
Bemerkung
Das Calendar-Widget kann nicht über Regiondo CSS angepasst werden, da es als <div> geladen wird.
Der Anbieter kann es innerhalb seines persönlichen Quellcodes innerhalb des <style>-Tags anpassen.
 

Anpassen über den Shop Editor

Der Regiondo Ticketshop oder das Booking Widget sind über den Shop Editor leicht anpassbar.

Vielleicht möchten Sie die Anpassung etwas weiterführen, indem Sie die Farbe bestimmter Elemente ändern, verschiedene Schriftarten verwenden, Elemente ausblenden oder Symbole einfügen. Dies kann mit benutzerdefiniertem CSS erreicht werden.

Anpassen mit benutzerdefiniertem CSS

Hinweis
Es sind Grundkenntnisse in CSS erforderlich. Wir empfehlen einen Experten beizuziehen, wenn Sie mit den Ausführungen des folgenden Leitfadens nicht vertraut sind. Regiondo bietet keine technische Unterstützung bei der CSS-Anpassung und kann nicht garantieren, dass ein benutzerdefiniertes CSS mit allen zukünftigen Funktionserweiterungen und visuellen Verbesserungen kompatibel ist. Überprüfen Sie daher die Kompatibilität Ihres benutzerdefinierten CSS mit neuen Regiondo-Versionen.

Wir behalten uns das Recht vor, sind aber nicht verpflichtet, Inhalte nach unserem alleinigen Ermessen zu löschen, die wir als rechtswidrig, beleidigend, bedrohend, verleumderisch, diffamierend, obszön oder anderweitig beanstandbar erachten oder die das geistige Eigentum einer Partei verletzen.
 
Navigieren Sie zu Ticketshop > Integration Website > Individueller CSS-Code
 
 
Auf dieser Seite sehen Sie folgendes:

Sprache auswählen - Wählen Sie einen Ihrer Stores aus, in dem benutzerdefiniertes CSS angewendet wird. Der Standardwert "Global" bedeutet, dass CSS für alle Stores gelten wird.

CSS-Code - Textfeld, in dem Sie einen CSS-Code eingeben können zum Überschreiben der vorgegebenen CSS-Regeln von Regiondo, der CSS-Settings im Shop-Editor oder für zusätzliche Änderungen an bestimmten Elementen innerhalb des iFrames von Regiondo.
 
Hinweis
Das Feld CSS-Code enthält einen eingebetteten CSS-Syntax-Highlighter, der sehr hilfreich sein kann, um mögliche Probleme oder Fehler im CSS-Code zu identifizieren. HTML-Tags sind nicht erlaubt und werden vor dem Output im Ticketshop/Widget entfernt. Wenn Sie Bilder oder zusätzliche Inhalte laden, müssen diese über https: // bereitgestellt werden.
 
Wenn Sie beispielsweise die primäre Schriftfamilie ersetzen und die Schriftgröße global im Ticketshop und im Widget anpassen möchten, wählen Sie im Auswahlfeld die Option "Global" aus, und fügen einfach die Schriftart und den Schriftartnamen wie folgt ein:
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body,
button,
.product-shop,
.product-shop select {
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
}
 
Ergebnis:
 
Hier verwenden wir die Schriftart "Open Sans" aus dem Font-Verzeichnis von Google (https://fonts.google.com/). Dort finden Sie die Schriftart, die am besten zu Ihrem Website-Design passt. Oder Sie können @font-face verwenden, um Ihre eigene Schriftart anzugeben. Die Schriftart selbst kann über Hochladen auf Ihren Webspace auf Ihrer Website oder an einem anderen Ort gehostet werden. Die URL muss im Dateipfad der @font-face-Deklaration korrekt eingetragen sein:
 
@font-face {
    font-family:'Custom Font';
    src:url(https://www.your-website.com/fonts/Custom-Font.otf);
    font-weight:400;
}
body,
button,
.product-shop,
.product-shop select {
    font-family:'Custom Font', Helvetica, Arial, sans-serif;
}
Wenn Ihnen die Ladegeschwindigkeit Ihrer Website wichtig ist, sollten Sie nur den Standard-Font-Stack verwenden. Hinzufügen der Schriftart Helvetica für iOS-Geräte zur Überschreibung von Arial sieht wie folgt aus:
 
body,
button,
.product-shop,
.product-shop select {
    font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
 
Mit der Auswahl von Global oder eines Ihrer Stores können Sie ganz einfach für jeden Store eine andere Schriftart festlegen.
 

Wie finden Sie das CSS, das geändert werden soll?

 

Um das CSS zu finden, das Sie ändern möchten, können Sie "Inspektor/Element untersuchen" verwenden. Wenn Sie einen Webkit-Browser wie Chrome, Firefox, Safari oder Opera verwenden, ist der Inspektor im Kontextmenü verfügbar und öffnet ein Fenster in Ihrem Browser, in dem Sie das Markup auf der linken Seite und die Stile auf der rechten Seite sehen. Beachten Sie, dass dieses Tool  in Safari nur verfügbar ist, wenn Sie die Entwicklertools aktivieren. IE-Benutzer müssen Version 11 oder höher haben.
 
 
Der Inspektor hilft Ihnen, den Selektor oder Originalstil zu identifizieren, der die Eigenschaften enthält, die Sie ändern möchten. Wenn Sie das CSS, das Sie ändern möchten, identifiziert haben, kopieren Sie es in den Bereich für benutzerdefiniertes CSS und passen es wie gewünscht an.

Zum Beispiel soll ein Element im Buchungs-Widget ausgeblendet werden. Klicken Sie mit der rechten Maustaste auf ein Element, wählen Sie "untersuchen", ermitteln Sie es im Seiten-HTML-Code und suchen Sie nach vorhandenen Selektoren für dieses Element (oder erstellen ein neues):
 
 
Kopieren Sie den Selektor ".booking-content .tab-info" in den Bereich "benutzerdefiniertes CSS" und setzen Sie seine Anzeigeeigenschaft auf "keine":
 
.booking-content .tab-info { display:none; }
 
Ergebnis:
Dadurch wird das Element "tab-info" in den Kästen "Ticket" und "Gutschein" des Widgets ausgeblendet. Wenn wir es nur für "Ticket" ausblenden möchten, müssen wir seine Anzeigeeigenschaft für "Gutschein" überschreiben, da beide denselben Klassennamen haben:
 
.booking-content .tab-info { display:none; }
.booking-content .gift-container .tab-info { display:block; }
Wenn wir die Änderungen gespeichert haben und die Anzeigeeigenschaft für .gift-container .tab-info auf "block" gesetzt ist, wird sie nur für "Ticket" ausgeblendet und auf "Gutschein" angezeigt. Dies ist ein einfaches Beispiel, wie das Widget mit Überschreiben der vorhergehenden CSS-Regeln angepasst werden kann.
 

Änderungen testen

Sie können bestimmte Stile in der Browser Inspektor-Seitenleiste bearbeiten und in der Vorschau anzeigen, indem Sie auf den Eigenschaftswert klicken, auf das Leerzeichen am Ende der letzten Eigenschaft klicken oder doppelklicken, um einen neuen hinzuzufügen. Dies hilft auch, den richtigen Stilselektor zu wählen.

Sobald Sie die Änderungen auf der benutzerdefinierten CSS-Seite gespeichert haben, wird diese sofort wirksam und in Ihrem Ticketshop und Buchungs-Widget angezeigt. Seien Sie vorsichtig beim Ändern der CSS-Regeln für globale Tags und vermeiden Sie Fälle, bei denen weißer Text auf weißem Hintergrund erscheinen könnte.

 

Erweiterte Beispiele

Hier finden Sie erweiterte Beispiele für benutzerdefiniertes CSS, die zeigen, wie das Erscheinungsbild von Ticketshop/Widget geändern werden kann.

 

Wie ändert man Hintergrund- und Rahmenfarben des Booking Widgets?

 

Kopieren Sie dieses CSS-Code-Snippet und fügen Sie es in das Textfeld für benutzerdefiniertes CSS ein:
.product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }
 
Hinweis
Wie Sie sehen können, haben wir hier die CSS-Regel !important verwendet, um die inline zugewiesene Deklaration auf dem Element .product-shop zu überschreiben. Die Regel !important wird verwendet, um die zuvor zugewiesenen CSS oder Inline-Deklarationen im Stilattribut von HTML-Tags zu überschreiben.
 
Ergebnis:
 
Diese Änderungen betreffen sowohl das Buchungs-Widget als auch den Ticketshop. Wenn Sie Klassen nur für das Widget oder nur für den Ticketshop deklarieren möchten, können Sie sie durch einmalige Elternelemente trennen, die im Widget, aber nicht im Ticketshop-Code vorhanden sind. Beispielsweise:
 
<!-- CSS Rules only for Booking Widget: -->
#widget-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

<!-- CSS Rules only for Ticket Shop: -->
#page-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

 

Wie ändert man die Farben der Buchungs-Widget-Tabs?

.tabs .tab { background:#336699; }
.tabs .tab h2 { color:#fff; }
.tabs .tab.active { background:transparent; }
.tabs .tab.active h2 { color:#336699; }
 
Ergebnis:

 

Wie ändert man die Button-Stile des Warenkorbs?

.product-shop .add-to-cart .button {
    background:none; border:2px solid #336699; color:#336699;
}
.product-shop .add-to-cart .button:hover {
    background:#336699; color:#fff;
}
Wenn Sie Elementen wie Links oder Schaltflächen Stile hinzufügen, vergessen Sie nicht, Regeln hinzuzufügen für :hover state für das Bewegen der Maus über Links oder Schaltflächen durch den Benutzer.

Ergebnis:

Wie fügt man dem Ticketshop ein flächendeckendes Hintergrundbild hinzu?

 

#shell,
.whitelabel > body,
.wl-background-main,
.wl-background-around { background:none; }

html.whitelabel { background:#fff url(images/bg.jpg) no-repeat center top fixed; background-size:cover; }
 
Zuerst löschen wir alle Hintergründe, um nur einen Hintergrund im HTML-Tag zu setzen. Danach fügen wir eine Regel hinzu, in der wir die Bild-URL setzen und so einstellen, dass sie die ganze Seite zentriert, oben ausgerichtet abdeckt und fixiert ist.

Um die Seitenladegeschwindigkeit zu erhöhen, können Sie verschiedene Bilder für unterschiedliche Auflösungen verwenden:
 
@media screen and (max-width:1024px) {
    html.whitelabel { background-image:url(images/bg-1024.jpg); }
}
@media screen and (max-width:640px) {
    html.whitelabel { background-image:url(images/bg-640.jpg); }
}

 

Wie ändere ich die Schritttitel des Booking Widgets?

.a-title-option:after { content:'Select an Option:'; }
.a-title-date:after { content:'Select a Date:'; }
.a-title-time:after { content:'Select a Time:'; }

.a-label.a-title-option:after { content:'Selected Option:'; }
.a-label.a-title-date:after { content:'Selected Date:'; }
.a-label.a-title-time:after { content:'Selected Time:'; }
Sie können einen Text für den Schritttitel angeben, der noch nicht ausgeführt wurde, und einen anderen für den Schritttitel nachdem der Benutzer Werte ausgewählt hat, wie oben gezeigt.

 

Wie ändere ich das Schritte "bearbeiten" Symbol des Booking Widgets?

.booking-content .a-edit:before { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyUlEQVQ4T6XTMU5CQRCA4Y/GhsOgiRUJBbHWRhoOYUc4AS0NBafQitpY2csxOAA9meRNsjzh7UOn2c1m/39nsjMD/4xBT36ILd6xK5k+goADmjbgA35SUhMkPMIzVoj9U0q6BCWcQJ49YoL9NcElOLMe4xtrLC4JuuB7fMbLTUnHtuAmOFIqBTfDpeBPcCnY4A1nf4xfNbcbL0uIDrvDS3GhCpcZhCBi1qy94LbgFR9NJtF1X/lVXfOSJcwRgowDljjWhq02CzXeCYkkNxFv6LDiAAAAAElFTkSuQmCC) no-repeat 50% 50%; }
Hier haben wir base64 für das Bild verwendet, um es inline zu laden. Dies kann helfen, zusätzliche HTTP-Anfragen pro Seite zu reduzieren, aber es wird nicht empfohlen, größere Bilder zu verwenden, da base64-Bilder vom Browser nicht zwischengespeichert werden.

Ergebnis:

 

Wie ändere ich die Stile von Dropdown-Listen?

select { padding:2px; color:#336699; background:#fff; border:1px solid #336699; }
 
Ergebnis:
Dies wird global auf alle ausgewählten Felder einschließlich der Checkout-Felder angewendet. Wenn Sie ein solches Styling nur für das Buchungs-Widget oder nur für Checkout-Bereiche festlegen möchten, können Sie Elternselektoren wie ".product-shop select", ".sc-content select" usw. verwenden.

 

Wie lautet der Code für das Ändern des Satzes im Booking Widget, der die Kunden fragt, ein Datum und eine Aktivität zu wählen?

.tab-info {
 visibility: hidden;
}


.tab-info:after {
Content: 'Enter text here';
visibility: visible;
display: block;
position: absolute;
top: 45px;
}

 

Wie lautet der Code für das Ändern des Satzes im Booking Widget, der die Kunden fragt, ein Datum und eine Aktivität zu wählen?

Sie können nicht die Hintergrundfarbe in der Bewertungsnachricht ändern im Shop Editor. Aber Sie können sie mit einem einfachen Code in CSS ändern.

  .form-box { 
            background-color: #002f53 !important; 
}
Sie können den Code kopieren und einfügen in das benutzerdefinierte CSS. Sie müssen ihre neuen Settings speichern.

 

Lese-Empfehlungen

Folgenden Ressourcen können Ihnen weiterhelfen:

Verwandte Beiträge