CSS Anpassungen
Passen Sie Ihre Markenidentität an
Eigenes CSS hinzufügen
Passen Sie das Aussehen Ihrer Konfiguratoren an Ihre Marke an.
Zugriff auf den CSS-Editor
GUI-Elemente stylen
Zielgerichtete Gestaltung von GUI-Elementen mit CSS.
Schaltflächen
.confbuild-button {
background: #8C30F5;
border-radius: 8px;
}
Schieberegler
.confbuild-slider {
accent-color: #8C30F5;
}
Eingabefelder
.confbuild-input {
border: 2px solid #E5E5E5;
}
Dropdowns
.confbuild-dropdown {
border-radius: 4px;
}
Verfügbare CSS-Klassen
Referenz für alle stylebaren Elemente.
.confbuild-button
Schaltflächen
Alle Button-Elemente
.confbuild-slider
Schieberegler
Bereichseingaben
.confbuild-input
Texteingaben
Text- und Zahlenfelder
.confbuild-dropdown
Dropdowns
Auswahlmenüs
.confbuild-label
Labels
Textbeschriftungen
.confbuild-panel
Info-Panels
Informationscontainer
.confbuild-toolbar
Werkzeugleiste
Oberer Werkzeugbereich
Theming
Erstellen Sie konsistente Themes mit CSS-Variablen.
Dunkles Theme Beispiel
:root {
--cb-primary: #8C30F5;
--cb-background: #1A1A2E;
--cb-surface: #16213E;
--cb-text: #FFFFFF;
--cb-text-secondary: #A0A0A0;
}
.confbuild-container {
background: var(–cb-background);
color: var(–cb-text);
}
Responsives Design
Anpassung an verschiedene Bildschirmgrößen.
Desktop
Volles Layout mit Seitenleisten
Tablet
Eingeklappte Navigation
Mobil
Vertikal stapeln
Mobile Styles
@media (max-width: 768px) {
.confbuild-panel {
width: 100%;
position: fixed;
bottom: 0;
}
.confbuild-button {
padding: 16px;
font-size: 16px;
}
}
CSS-Animationen
Fügen Sie sanfte Übergänge und Effekte hinzu.
Hover-Effekte
.confbuild-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(140, 48, 245, 0.3);
transition: all 0.2s ease;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.confbuild-loading {
animation: pulse 1.5s infinite;
}
Eigene Schriftarten
Fügen Sie eigene Schriftarten hinzu.
Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
.confbuild-container {
font-family: ‘Poppins’, sans-serif;
}
Best Practices
Tipps für effektive CSS-Anpassung.
CSS-Variablen nutzen
Einfache Theme-Updates
Responsiv testen
Mehrere Geräte prüfen
Einfach halten
Nicht überstylen