Styling Settings

Version: 2.9.2

Styling Settings

Theme Selection
  • Theme: Select a ready-to-use theme. Choose Custom to unlock manual color controls:
    • Dark (Default): Classic dark theme with white text
    • Light: Clean light theme with dark text
    • Colorful: Vibrant multi-color theme
    • Gradient: Beautiful gradient background
    • Glass Morphism: Modern frosted glass effect
    • Minimal: Clean, minimal design
    • Neon Glow: Eye-catching neon effect
    • Ocean Breeze: Calming blue ocean theme
    • Sunset: Warm orange and pink theme
    • Matte Gray: Professional matte finish
    • Pastel Dream: Soft pastel colors
    • Cyber Dark: Futuristic dark theme
    • Custom: Unlocks all color customization options
Shadow Settings
  • Menu Shadow: Add depth with a drop shadow behind the menu (default: Enabled).
  • Shadow Intensity: Select how soft or strong the shadow should appear (appears when Menu Shadow is Enabled):
    • Light: Subtle shadow for minimal depth
    • Medium: Balanced shadow (default, recommended)
    • Heavy: Strong shadow for maximum depth
Color Customization (Custom Theme Only)

The following color options only appear when Theme is set to "Custom":

  • Menu Bar Background Color: Select the background color for the menu bar (default: Dark gray #1a1a1a).
  • Menu Item Hover Background Color: Select the background color when hovering over menu items (default: Dark gray #2a2a2a).
  • Menu Bar Border Color: Select the border color for the menu bar (default: rgba(255, 255, 255, 0.1)).
Color Customization (All Themes)
  • Active Menu Item Color: Select the color for the active/selected menu item (default: Blue #007bff). The module automatically detects the current page and highlights the corresponding menu item.
  • Menu Text Color: Select the primary text color for menu labels (default: White #ffffff). Works with all themes.
  • Menu Text Hover Color: Select the text color when hovering over menu items (default: Blue #007bff). Works with all themes.
Typography & Icon Sizes
  • Menu Icon Size: Size of the menu icons in pixels (default: 20, range: 12-32px).
  • Menu Text Size: Font size for the menu labels in pixels (default: 11, range: 8-16px).
  • Social Icon Size: Size of the social icons displayed on the right in pixels (default: 18, range: 12-32px).
Animation & Effects
  • Micro Animations: Add subtle hover and active transitions for a premium feel (default: Enabled).
  • Ripple Tap Effect: Show a Material Design ripple effect when tapping menu buttons (appears when Micro Animations is Enabled, default: Enabled). This creates a modern, interactive feel similar to mobile apps.