Inhaltsverzeichnis

CSS & Java Scripts für die Webseitenanpassung

Ingo Updated von Ingo

Bei diesem Modul handelt es sich um ein optionales Angebot. MATE ermöglicht es Ihnen, ohne jegliche Programmierkenntnisse mithilfe von überschaubaren Schritten, schnell und einfach ansprechende Webseiten zu kreieren. Sollten Sie allerdings doch wünschen, Ihr eigenes CSS beziehungsweise JavaScript für die Webseite zu hinterlegen, so haben Sie hier die Möglichkeit dazu. 

Was ist CSS & Java Script?

"Mit Cascading Style Sheets (engl. für: mehrstufige Formatvorlagen) können Sie das Aussehen von Text und HTML-Elementen festlegen."

Weiterführende Informationen zur Anwendung von CSS erhalten Sie hier: CSS/Tutorials/Einstieg

"JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich 1995 von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern." (Quelle: https://de.wikipedia.org/wiki/JavaScript)

Weiterführende Informationen zur Anwendung von Java Script erhalten Sie hier: JavaScript/Tutorials/Einstieg

Wie kann ich mir die Informationen (HTML Codes & Skripte) über meine Webseite anzeigen lassen?

  1. Webseite öffnen und rechte Maustaste klicken.
  2. Im Info-Fenster "Untersuchen" (gilt für Google Chrome & kann je nach Browser unterschiedlich benannt sein) anklicken.
  3. Auf der rechten Seite öffnet sich der "console drawer".
  4. Oben links die Funktion "Select an element in the page to inspect it" aktivieren.
  5. Den Maus-Cursor an die gewünschte Position bewegen, zu welcher die Information benötigt wird (hier: Formularfeld Firma).

ACHTUNG: Durch die Verwendung von CSS kann das responsive Design unserer Webseiten (automatische Anpassung des Designs auf unterschiedliche Bildschirmgrößen bzw. Seitenverhältnisse) für die mobile Ansicht beeinträchtigt werden. Bitte die angepasste(n) Seite(n) IMMER auf einem mobilen Endgerät überprüfen.

Was kann man mit Javascript und CSS abändern?

Anbei zeigen wir Ihnen ein paar Beispiele auf, die Sie direkt für die MATE Registrierungsseite (Webseite) verwenden können.

Verschiebt Teaser Text im Header nach rechts, falls kein Formular im Header genutzt wird:
@media (min-width: 992px) {
.promo .col-md-6:only-child {
margin-left: 50%;
}
}
Zeilenumbruch in den Überschriften
<br />

Beispiel: Überschrift: Der Text ist mir zu lang für eine Zeile / Umbruch soll nach dem Wort lang durchgeführt werden.

Der Text ist mir zu lang <br /> für eine Zeile

Ändert den Text nachdem man bereits zugesagt hat

Standardmäßig wird der englische Text angezeigt wird, da die Browsersprache englisch ist: “You have already accepted. Editing will only overwrite your data. No further registrations can be added."

$('#registration_warning_already_accepted').text('Hier bitte den Text eintragen');

Ändert die Abdunklung des Header Bildes (RGB Wert plus Transparenz):

Der Hintergrund des Headertextes bei einer Website kann bereits durch Setzen des entsprechenden Kästchens geändert werden. Hiermit kann eine spezifische Farbe (RGB) zum Abdunkeln gewählt werden und die Transparenz festgelegt werden (RGBA Wert).

z.B. Farbe #003882 als RGB 0, 56, 130 mit Transparenz 0.2

Link zum Hex in RGB Umwandler

.promo .color-correction {
background-color: rgba(0, 56, 130, 0.2);
}

 Ändert die Schriftart auf der Webseite

Falls die Standardschriftart durch eine eigene (beispielsweise dem Corporate Design zugehörig) Schriftart ersetzt werden soll.

HINWEIS: Sollten Sie eine eigene Schriftart verwenden wollen, muss sichergestellt sein, das Sie der Inhaber dieser Schriftart sind.

Schriftart xy = eigene Schriftart hinterlegen

body, .map .popover {
font-family: 'Schriftart xy', Lato, Helvetica, Arial, sans-serif;
}

Ändert die Farbe des ausgewählten Buttons im Registrierungsformular

backround-color = Buttonfarbe

border-color = Farbe der Umrandung des Buttons

color = Schriftfarbe im Button

#form_button_1 {
background-color: #5f2d87;
border-color: #5f2d87;
color: #ffffff;
}

Ändert die Transparenz des Buttons und die Dauer zwischen Farbe und Transparenz des Buttons nach Anwahl

background-color 0.15 = umso höher der Wert um so intransparenter der Button

transition 0.5s = umso höher der Wert umso länger die Umschaltzeit zwischen Farbe und Transparenz nach Anwahl

color = Farbe des Buttons

#form_button_1:hover, #form_button_1:active {
background-color: rgba(0,0,0,0.15);
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
color: #5f2d87;
}

Ändert die Farben des Registrierungsformulars

Hintergrundfarbe

.promo .register {
background-color: rgba(206, 217, 231, 0.8);
}

Schriftfarbe

.promo .register {
color: rgba(0, 51, 102);
}

Textfelder im Registrierungsformular

background 0.4 = Transparenz des Textfeldes

border-color = Farbe Umrandung des Textfeldes

color = Farbe des Textes im Textfeld

.promo .register .form-control {
background: rgba(0, 0, 0, 0.4);
border-color: #003366;
color: #003366;
}

Dropdown-Textfelder im Registrierungsformular

(Befehle siehe Textfelder)

.dropdown-toggle {
background: rgba(0, 0, 0, 0);
border-color: #003366;
color: #003366;
}

Ändert den Header Text und die Anordnung des Regsitrierungsformulars auf der Webseite

min-width: 992px = Änderung Größe Pixel (px), ändert die Größe des Headertextes

promo .col-md-6 = Änderung der Zahl, ändert die Anordnung (links, mittig...) des Registrierungsformulars

width: 100% = Änderung der Größe des Registrierungsformulars

@media (min-width: 992px) {
.promo .col-md-6 {
width: 100%;
}
}

Ändert die Helligkeit/Transparenz des Headerhintergrunds

background-color 0.4 = umso höher der Wert, umso dunkler der Hintergrund

.promo .color-correction {
background-color: rgba(0, 0, 0, 0.4)
}

Ändert die Schrift (Größe, Stärke und den Zeilenabstand) innerhalb des Registrierungsformulars

font-size = Schriftgröße

font-weight = Schriftstärke

line-height = Zeilenabstand

.register-form label, .register-form p, .register-form .btn-empty {
font-size: 16px;
font-weight: 300;
line-height: 1.4;
}
Ändert die Hintergrundfarbe des kompletten Registrierungsformulars
.promo .register {
background-color: #ff0000;
}

Entfernt den weißen Trennstrich zwischen Überschrift und Text im Header
.promo .promo-text hr {
display: none;
}

Ändert den Abstand des Logos (Partner/Sponsoren) auf der Webseite

margin-left = Verschiebung nach rechts

margin-right = Verschiebung nach links

.partners .list-inline li {
margin-left: 10px;
margin-right: 10px;
}

Ändert die Schriftgröße des Titels im Header

font-size = Schriftgröße prozentual

.promo .promo-text h1 {
font-size:220%
}

font-size = Schriftgröße in Pixel

.promo .promo-text h1 {
font-size:31px;
}
#home > div.container > div > div.col-md-6 > div > h1 {
font-size: 28px;
}

Ändert die Schriftstärke und Farbe des Titels im Header

font-weight = Schriftstärke

.promo .promo-text h1 {
font-weight: semi-bold;
}

color = Textfarbe

.promo .promo-text h1 {
color: #49002c;
}

border-top-color = Farbe der Trennlinie unter der Headerüberschrift

.promo .promo-text hr {
border-top-color: #49002c;
}

Ändert die Ausrichtung eines Zwischentextes im Registrierungsformular

text-allign: center =mittig / left = linksbündig / right = rechtsbündig

#register_form_group_11_0 {
text-align: center;
margin-bottom: 0px;
}

Ändert die Größe der Sponsoren-Logos (Zeilenumbruch kann dadurch eher erfolgen)

width: 25% = umso kleiner der Wert, umso kleiner das Logo

.partners .list-inline li {
width: 25%;
}

Entfernt die Social Media Button im Bereich Countdown
.counter .btn-empty-inverse {
display: none;
}

Ändert die Farbe des Counters (Countdown)
.counter {
color: #ffffff;
}

Ändert die Größe des Countdowntextes (erste Zeile)
#about > div > div > div.col-md-4.text-center > h1 {
font-size: 28px;
}

Ändert die Farben im Bereich Programmpunkte

Hintergrundfarbe der Programmpunkte

.schedule .panel-default .panel-heading {
background-color: #003366;
}

Farbänderung der Umrandung der Programmpunkte

.schedule .panel-default {
border-color: #efefef;
}

Einzelne Programmpunkte (nur den weißen Bereich) ausblenden lassen

collapse1 = die Nummer muss dem Bereich zugeordnet werden

#collapse1 .panel-body {
display: none;
}

Ändert die Farben im Locationmodul

Farbänderung der Pins (Symbole)

.map .popover .fa {
color: #003882;
}

Farbänderung des Textes (neben den Pins)

.map .popover a {
color: #003882;
}

Ändert die Ausrichtung und den Abstand eines möglichen Radiobuttons im Registrierungsformular

Die HTML ID (fett markiert) muss entsprechend dem gewünschtem Radiobutton ersetzt werden.

padding = Ausrichtung

20px = Abstand/Entfernung zum Bezugspunkt

#form_anrede .radio {
display: inline;
padding-right: 20px;    
}

In der Regel werden die Hyperlinks (z. Bsp. Datenschutz, AGB usw.) in blau dargestellt. Mit diesem Befehl kann man die Schriftfarbe/Linkfarbe anpassen.

#register_form p a {
color: #ffffff;
}

Registrierungsformular komplett ausblenden (gilt auch für eigenständiges Formularmodul)
.register-form {
display: none;
}

Zusage-Button im Registrierungsformular ausblenden (gilt auch für eigenständiges Formularmodul)
.register-form .btn-custom-accept {
display: none;
}
Bild des Sprechers im Sprecher-Modul ausblenden (ACHTUNG! Bitte unbedingt gegentesten, wenn mehrere Sprecher ausgewählt werden)
.speakers .speaker-img img {
display: none;
}
ACHTUNG: Für die Verwendung von CSS und Java Scripts übernimmt die MATE Development GmbH keinerlei Gewähr bezüglich der korrekten Darstellung bzw. Funktion der angepassten Webseiten und E-Mails. Wir möchten Sie bitten, mögliche Anpassungen immer gegenzuprüfen, bevor Sie final gespeichert werden.

Wie haben wir uns geschlagen?

Die Verwendung von Platzhaltern außerhalb des HTML Editors

Tipps um die Spamwahrscheinlichkeit meiner E-Mails zu verringern

Kontakt