CSS Anleitungen

CSS Anleitung: https://www.mediaevent.de/css/

CSS W3 Schools: https://www.w3schools.com/css/

CSS Self HTML: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Gestaltung_mit_CSS

CSS Selektoren: https://www.mediaevent.de/css/css3-selektor-pseudo.html

Farbentabelle

Farbtabelle: https://www.farb-tabelle.de/de/farbtabelle.htm

Auf der Webplattform Portal anmelden.

Danach im Portal die Kachel Admin Center (neu) auswählen.

Anschließend muss oben links das Seitenmenü aufgerufen werden.

Mit gedrückter STRG kann ein Menüpunkt in einem neuen TAB geöffnet werden.

CSS Beispielcodes

Die folgende Webmodule sind farblich gekennzeichnet:
Gutschein
Webbuchung
Busanfrage
Alle Module

Im Seitenmenü Übersetzungen aufrufen.

Bei der ersten Einrichtung muss als erstes eine Sprache eingerichtet werden. Dafür wird der Button “Neue Sprache” ausgewählt!

Bereich: -

Schlüssel: CSS

Im Code Editor können Sie den CSS Code eingeben.

Kundenlogo einfügen (Sinnvoll bei Einbindung ohne iFrame)

.container-fluid form + .mt-3 h5:first-child::before,
.container-fluid h4 + h5::before {
    background-image: url(https://www.ratio-software.com/typo3conf/ext/kobe_sitepackage/Resources/Public/Images/logo.png);
    content: ' ';
    width: 244px;
    height: 122px;
    margin-top: -8px;
    background-size: contain;
    background-repeat: no-repeat;
    float: right;
    display: inline-block;
}

Ladebalken entfernen

.busy-progress, #busy-indicator {
    display: none !important;
}

Ladebereich Hintergrund

Hintergrund von grau in weiß.

#busy-overlay { background-color:#fff !important; }

Ladekreisel Farbe, Kreisdicke und Strichart

Ladebalken in Magenta, Outset und oben 20 Pixel groß.

Ladebalken in Magenta, Dashed und 20 Pixel groß.

Spezieller Ladekreisel

Spezielle Ladekreisel: https://loading.io/css/

Ladeanimationen: https://webdeasy.de/ladeanimationen/

Ladekreisel mit Kundenlogo

Ladekreisel mit Firmenlogo tauschen

Ladeinformationen ohne Rahmen und kleinere Schriftart

Schriftart

Die Schriftart in “Merriweather”, sansserif ändern. (Es kann auch eine andere Schriftart gewählt werden)

Reiseziel

Reiseziel in einem Blocksatz, Schriftgröße 25px und die Farbe in Blau.

Reisethema

Reisethema in Blocksatz, Schriftgröße 32px, Fettschrift und Farbe schwarz.

Tabellenhintergrund und Tabellenschriftart

Tabellenhintergrund in blau, Textfarbe in weiß und fett.

Buttons

Mit Aufzieheffekt.

Buttons Eingabe Design ändern

Tabellen (Zusammenfassung) Farbe ändern

Felder ausblenden

Placeholder (Ersatz) oder Icons

Placeholder (Ersatz)

Icons

Feldbeschriftung:

CSS Bereich:

Link für die Auswahl des Icons (Name muss eingefügt werden): https://materializecss.com/icons.html

HTML Sonderzeichen: https://www.vioma.de/de/wiki/tools/html-sonderzeichen/#HTML%20Sonderzeichen%20-%20Favoriten

Passwort Felder Registrierung nicht ausgefüllt

Checkbox ändern

Weitere Tipps für CSS Checkbox styling: https://boolie.org/css-checkbox-styling/

Checkbox aktiv

Radio Button ändern

Weitere Tipps für CSS Radio Button styling: Styling Radio Buttons

Radio Button ausgewählt

Handy Optimierungen

Mit der Handyoptimierung kann man zum Beispiel beim Laden mit Kundenlogo dieses für den Bildschirm optimieren.

CSS Mobile Endgeräte Tipps: Es wird Zeit: Die eigenen CSS-Styles für mobile Endgeräte anpassen

Schriftart laden

Die meisten Schriftarten findet man bei Google Font.

https://fonts.google.com/

CSS Tipps & Tricks