Benutzerdefiniertes CSS für das Profildesign

Geändert am Mi, 9 Apr um 6:51 NACHMITTAGS

Mit dem CSS-Editor kannst du das Aussehen eurer digitalen Visitenkarten ganz nach euren Vorstellungen anpassen. So lassen sich zum Beispiel Farben, Schriftgrößen oder das Design von Buttons verändern.

Wichtig: Mit CSS kannst du nur das Styling ändern – nicht das Layout. Das heißt: Die Reihenfolge von Elementen oder ihre Sichtbarkeit lässt sich damit nicht beeinflussen.

Voraussetzungen

Damit du den CSS-Editor sinnvoll nutzen kannst, solltest du Grundkenntnisse in CSS (Cascading Style Sheets) haben.

Falls du dich damit nicht auskennst, gib deine Design-Wünsche am besten an deine IT-Abteilung oder eine Person mit CSS-Erfahrung weiter.

So funktioniert der Editor

1. Öffne den CSS-Editor in den Design-Einstellungen.

2. Verwende ausschließlich unsere vordefinierten CSS-Klassen. Benutze dazu den Button "Wähle CSS Klasse"

⚠️ Wenn du im Browser eigene Klassennamen über "Element untersuchen" herausfindest, kann es sein, dass deine Änderungen nicht dauerhaft funktionieren – diese Klassen können sich ändern. Die von uns bereitgestellten Klassen bleiben hingegen stabil.

3. Setze bei jeder Regel !important, damit dein Styling sicher angewendet wird:

/* Header Box - Container */
.profile__header-box {
  background-color: #0055ff !important;

}

!important sorgt dafür, dass deine Regel alle anderen Styles für dieses Element überschreibt.

Was kann ich mit CSS genau machen?

Das kannst du mit CSS ändern:

Farben von Boxen, Buttons und Text
Schriftgrößen und Schriftarten
Abstände, Rahmen und Schattierungen
Hover- oder Fokus-Effekte (z. B. beim Überfahren mit der Maus)

Das kannst du mit CSS nicht ändern:

Die Reihenfolge von Profil-Elementen
Funktionen hinzufügen oder entfernen
Elemente ein- oder ausblenden
Die Layout-Struktur (z. B. Spalten oder Grid-Systeme)