Widgets Guide
Widgets are your content frames. This guide matches your current widget xprofile controls and gives a safe setup path.
Widget Fields (Current Stack)
- Widget Background Color: base color for widget boxes.
- Widget Background Opacity: transparency level (glass effect).
- Widget Blur Strength: backdrop blur behind widgets.
- Widget Border Radius: roundness of corners.
- Widget Shadow Strength: depth/glow under widgets.
- Widget Inner Padding: spacing inside widget content.
- Widget Title Color: title text color in widgets.
- Widget Border Style: border type (solid/dashed/etc.).
- Widget Border Color: border color around widgets.
Widgets section controls from your settings screen.
The Widget Triangle
Most widget problems come from these three settings fighting each other:
Background Color
Choose a surface tone compatible with your main page colors.
Opacity
Start around 70%-85% for glass styles, higher for readability.
Blur Strength
Start around 8px-12px; high blur with low opacity can look muddy.
Starter Widget Styles
Modern Glass
- Opacity: 75%-85%
- Blur: 8px-12px
- Radius: 12px
- Padding: 16px
- Shadow: Low-Medium
Clean Cards
- Opacity: 100%
- Blur: None
- Radius: 8px-12px
- Padding: 16px-20px
- Shadow: None-Low
Retro Panels
- Opacity: 100%
- Blur: None
- Radius: 0px
- Padding: 12px-16px
- Border style: stronger contrast
Troubleshooting
- Muddy widgets: lower blur, raise opacity, then tune background color.
- Widgets blend into page: raise border contrast or add subtle shadow.
- Title hard to read: adjust Widget Title Color first.
- Heavy on mobile: reduce blur and keep shadow lower.
- Feels inconsistent: align widget background to your main surface color family.
FAQs
What should I configure first in this section?
Set base colors/readability controls first, then style polish.
How many changes should I do per save?
One change at a time for reliable troubleshooting.
What should I verify after each change?
Readability, contrast, and interaction clarity on desktop and mobile.
When should I use advanced CSS?
After standard controls are stable and only for targeted overrides.
How do I avoid visual clutter?
Keep one dominant accent and reduce competing effects.
What is the fastest rollback?
Revert the last change first and retest before further edits.
