Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 31 Current »

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 http://www.ratioapp.de/ 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ß.

.busy-spinner { border-top: 20px outset #ea1ecb !important; }

Ladebalken in Magenta, Dashed und 20 Pixel groß.

.busy-spinner { border: 20px dashed #ea1ecb !important; }

Spezieller Ladekreisel

.busy-spinner { 
   position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  transform: rotate(45deg);
  box-shadow: 0 0 10px 0 #FECDFF; 
   border-top: 30px double #1874CD !important;
border-bottom: 30px double #1874CD !important;
border-left: 1px hidden #000 !important;
border-right: 1px hidden #00 !important;
  top: 0; bottom: 0; left: 0; right: 0;
}

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

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

#busy-message {
 display:none !important;
}
#busy-overlay { background-color:#fff !important; } 
.busy-spinner { 
   position: absolute;
  width: 400px;
  height: 400px;
  margin: auto;
  transform: rotate(45deg);
  box-shadow: 0 0 10px 0 #FECDFF; 
   border-top: 5px inset #1874CD !important;
border-bottom: 5px inset #1874CD !important;
border-left: 1px hidden #000 !important;
border-right: 1px hidden #00 !important;
  top: 0; bottom: 0; left: 0; right: 0;
background-image: url(https://www.ratio-software.com/typo3conf/ext/kobe_sitepackage/Resources/Public/Images/logo.png);
    background-position: 0px 150px;
    background-size: contain;
    background-repeat: no-repeat;
 display: inline-block;
}

Ladekreisel mit Firmenlogo tauschen

.busy-spinner {
background-image: url(https://www.ratio-software.com/typo3conf/ext/kobe_sitepackage/Resources/Public/Images/logo.png);
   background-size: 464px 122px;
background-repeat: no-repeat;
background-position: 40px 30px; 
  position: absolute;
  width: 520px;
  height: 160px;
 border-radius: 5%;
  border-left: 0px solid #fff ; !important;
border-right: 0px solid #fff ; !important;
border-top:  0px solid #fff !important;
border-bottom: 0px solid #fff !important;
  animation: lds-default 0s linear infinite;
}

Ladeinformationen ohne Rahmen und kleinere Schriftart

.busy-message {
 border-color: transparent transparent transparent transparent;
font-size: 10px; 
}

Schriftart

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

h1,h2,h3,h4,h5,h6,span,p,a,b,label,div, .text-monospace  {
  font-family: "Merriweather", sansserif !important;
}

Reiseziel

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

.rs-reiseziel {
  display: block;
  font-size: 20px; 
  color:#fff;
}

Reisethema

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

.rs-reisethema {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #000000 !important;
}

Tabellenhintergrund und Tabellenschriftart

Tabellenhintergrund in blau, Textfarbe in weiß und fett. 

.card-header {
  background: #3BA6DB !important;
  color:#ffffff  !important;
  font-weight: bold;
}

Buttons 

button.btn.btn-primary.btn-block,
button.btn.btn-primary,
button.btn.btn-info {
  color: #ffffff !important;
  background-color: #3BA6DB;
  border-color: 1#3BA6DB;
}
button.btn.btn-primary.btn-block:hover,
button.btn.btn-primary:hover {
  color: #3BA6DB !important;
  background-color: #fff;
  border-color: #fff;
}

Mit Aufzieheffekt.

button.btn.btn-primary.btn-block,
button.btn.btn-primary,
button.btn.btn-info {
  color: #ffffff !important;
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #3BA6DB 50%, #ffffff 50%);
  transition: all 0.3s linear;
  border: 2px solid #3BA6DB;
}
button.btn.btn-primary.btn-block:hover,
button.btn.btn-primary:hover {
  color: #3BA6DB !important;
  background-position: -100% 0;
  border: 2px solid #fff;
}

Buttons Eingabe Design ändern

input[type='text'] {
  border-bottom: 2px outset #1874CD;
  border-left: none;
  border-right: none;
border-top: none;
  border-radius: 2px;
 content:"Blubber" !important;
}
input[type='text']:focus{
  border: 2px outset #1874CD;
border-radius: 5px;
}
.custom-select, #account-3rd-pw{
  border: 2px outset #1874CD;
border-radius: 5px;
}
.custom-select:focus, #account-3rd-pw:focus{
  border: 2px outset #1874CD;
border-radius: 5px;
}

Tabellen (Zusammenfassung) Farbe ändern

tr.table-dark > th {
    background: #1874CD  !important;
  color:#ffffff  !important;
  font-weight: bold;
}

Felder ausblenden

[name~="kunde[data][telefon1]"] {
 display:none;
}

Placeholder (Ersatz)

[name~="t_vorgang_buchender[data][telefon1]"] {
       background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='gray' font-size='15'>+49 XXXX</text></svg>");
       background-repeat: no-repeat;
    }

Passwort Felder Registrierung nicht ausgefüllt

[name~="meta[ignore][registrierung_3rd][pw]"],
[name~="meta[ignore][registrierung_3rd][pw2]"] {
       color:#fff;
    }
[name~="meta[ignore][registrierung_3rd][pw]"]:focus,
[name~="meta[ignore][registrierung_3rd][pw2]"]:focus {
       color:#000000;
    }

Checkbox ändern

[type="checkbox"] + label::before {
  position: absolute;
  width: 20px;
  height: 20px;
top: 0px;
  background-color: #fff;
 border: 2px outset #ff9600;
}
[type="checkbox"] + label:after {
  position: absolute;
  width: 20px;
  height: 20px;
top: 0px;
  background-color: #ff9600;
}

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

Checkbox aktiv

input[type=checkbox]:checked + label {
    color: #ccc;
  font-style: italic;  
}

Radio Button ändern

[type="radio"] + label::before {
  position: absolute;
  width: 20px;
  height: 20px;
top: 0px;
  background-color: #fff;
 border: 2px outset #ff9600;
 border-radius: 10px;
}
[type="radio"] + label:after {
  position: absolute;
  width: 20px;
  height: 20px;
top: 0px;
  background-color: #ff9600;
   border-radius: 10px;
}

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

Radio Button ausgewählt

input[type=radio]:checked + label {
    color: #FF0000;
   font-size:20px;
  font-style: bold;  
}

Handy Optimierungen

// Desktop Browser
@media screen and (min-width: 600px){ // Hier die mindest Größe, wenn Bilder mindestens 600px Breit sind
   // Code zum Beispiel für Logos mit optimaler Größe
}
// Handy / Tablet 
@media screen and (max-width: 599px){ // Hier die mindest Größe, wenn Bilder mindestens 600px Breit sind
   // Code zum Beispiel für Logos mit optimaler Größe
}

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

CSS Mobile Endgeräte Tipps: https://www.nakieken.de/es-wird-zeit-die-eigenen-css-styles-fuer-mobile-endgeraete-anpassen/

Schriftart laden

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
@font-face {
    font-family: "Fira Sans";
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
}

Die meisten Schriftarten findet man bei Google Font.

https://fonts.google.com/

  • No labels