Advanced
Custom CSS Styling
Match your brand identity
Adding Custom CSS
Customize the look and feel of your configurators to match your brand.
Access the CSS Editor
1
Open Project Settings
2
Navigate to "Custom CSS" tab
3
Add your CSS rules
4
Save and preview changes
Styling GUI Elements
Target built-in GUI elements with CSS.
Buttons
.confbuild-button {
background: #8C30F5;
border-radius: 8px;
}
Sliders
.confbuild-slider {
accent-color: #8C30F5;
}
Inputs
.confbuild-input {
border: 2px solid #E5E5E5;
}
Dropdowns
.confbuild-dropdown {
border-radius: 4px;
}
Available CSS Classes
Reference for all stylable elements.
Class
Element
Description
.confbuild-button
Buttons
All button elements
.confbuild-slider
Sliders
Range input controls
.confbuild-input
Text inputs
Text and number fields
.confbuild-dropdown
Dropdowns
Select menus
.confbuild-label
Labels
Text labels
.confbuild-panel
Info panels
Information containers
.confbuild-toolbar
Toolbar
Top toolbar area
Theming
Create consistent themes with CSS variables.
Dark Theme Example
: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);
}
Responsive Design
Adapt to different screen sizes.
Desktop
Full layout with sidebars
Tablet
Collapsed navigation
Mobile
Stack vertically
Mobile Styles
@media (max-width: 768px) {
.confbuild-panel {
width: 100%;
position: fixed;
bottom: 0;
}
.confbuild-button {
padding: 16px;
font-size: 16px;
}
}
CSS Animations
Add smooth transitions and effects.
Hover Effects
.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;
}
Custom Fonts
Add custom fonts to match your brand.
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
Tips for effective CSS customization.
Use CSS Variables
Easy theme updates
Test Responsively
Check multiple devices
Keep It Simple
Don't over-style