Skip to content

Customization

Jump to bottom
Luc edited this page Nov 20, 2025 · 1 revision

Customization Guide

Learn how to customize the Accessibility Widget to match your website's design and branding.

🎨 Customization Options

The Accessibility Widget can be customized in several ways:

  1. Configuration File - Change default settings
  2. CSS Customization - Change colors, fonts, and styling
  3. Position Customization - Change widget location
  4. Text Customization - Change button text and labels

⚙️ Configuration Customization

Widget Position

Change where the widget appears on the page:

var AccessibilityConfig = {
    position: 'bottom-right', // Options: 'bottom-left' or 'bottom-right'
};

Button Text

Customize the text on the toggle button:

var AccessibilityConfig = {
    buttonText: 'Accessibility', // Your custom text
};

Default Settings

Set default values for accessibility features:

var AccessibilityConfig = {
    fontSize: 100,        // Default font size
    contrast: 'normal',    // Default contrast mode
    // ... more settings
};

🎨 CSS Customization

Changing Colors

Button Color

/* Change button background color */
.accessibility-toggle-btn {
    background: #0066cc !important; /* Your brand color */
    color: #ffffff !important;
}

/* Change button hover color */
.accessibility-toggle-btn:hover {
    background: #0052a3 !important; /* Darker shade */
}

Panel Header Color

/* Change panel header background */
.accessibility-panel-header {
    background: #0066cc !important; /* Your brand color */
    color: #ffffff !important;
}

Panel Background

/* Change panel background */
.accessibility-panel {
    background: #ffffff !important; /* Your background color */
}

/* Change panel content background */
.accessibility-panel-content {
    background: #f9f9f9 !important; /* Light gray */
}

Changing Fonts

/* Change widget font family */
.accessibility-widget {
    font-family: 'Your Font', Arial, sans-serif !important;
}

/* Change button font */
.accessibility-toggle-btn {
    font-family: 'Your Font', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

Changing Sizes

/* Make button larger */
.accessibility-toggle-btn {
    padding: 16px 32px !important; /* Increase padding */
    font-size: 16px !important;    /* Increase font size */
}

/* Make panel wider */
.accessibility-panel {
    width: 320px !important; /* Default is 260px */
}

Changing Position

Custom Position (CSS)

/* Position in top-right */
.accessibility-widget {
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
}

/* Position in top-left */
.accessibility-widget {
    top: 20px !important;
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;
}

Center Position

/* Center horizontally at bottom */
.accessibility-widget {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 20px !important;
}

🎯 Complete Customization Example

Here's a complete example of customizing the widget to match your brand:

/* Custom Brand Colors */
:root {
    --brand-primary: #8b5cf6;
    --brand-primary-dark: #7c3aed;
    --brand-secondary: #f3f4f6;
}

/* Button Styling */
.accessibility-toggle-btn {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

.accessibility-toggle-btn:hover {
    background: var(--brand-primary-dark) !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4) !important;
}

/* Panel Styling */
.accessibility-panel {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

.accessibility-panel-header {
    background: var(--brand-primary) !important;
    border-radius: 12px 12px 0 0 !important;
}

.accessibility-panel-content {
    background: var(--brand-secondary) !important;
}

/* Custom Font */
.accessibility-widget {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

🎨 Theming

Dark Theme

/* Dark theme for widget */
.accessibility-toggle-btn {
    background: #1f2937 !important;
    color: #ffffff !important;
}

.accessibility-panel {
    background: #1f2937 !important;
    color: #ffffff !important;
}

.accessibility-panel-header {
    background: #111827 !important;
}

.accessibility-panel-content {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

Light Theme

/* Light theme (default) */
.accessibility-toggle-btn {
    background: #0066cc !important;
    color: #ffffff !important;
}

.accessibility-panel {
    background: #ffffff !important;
    color: #333333 !important;
}

Gradient Theme

/* Gradient button */
.accessibility-toggle-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
}

📐 Layout Customization

Panel Width

/* Make panel wider */
.accessibility-panel {
    width: 320px !important; /* Default: 260px */
    max-width: calc(100vw - 40px) !important;
}

Panel Height

/* Limit panel height */
.accessibility-panel-content {
    max-height: 400px !important; /* Default: 500px */
    overflow-y: auto !important;
}

Button Size

/* Larger button */
.accessibility-toggle-btn {
    padding: 16px 32px !important;
    font-size: 16px !important;
}

/* Smaller button */
.accessibility-toggle-btn {
    padding: 10px 20px !important;
    font-size: 12px !important;
}

🔤 Text Customization

Button Text

Via configuration:

var AccessibilityConfig = {
    buttonText: 'Accessibility Options', // Custom text
};

Panel Title

You'll need to modify the JavaScript file to change the panel title, or use CSS to hide and replace:

/* Hide default title and add custom */
.accessibility-panel-header h3 {
    font-size: 0 !important;
}

.accessibility-panel-header h3::after {
    content: 'Your Custom Title';
    font-size: 13px;
}

🎯 Advanced Customization

Custom Icons

Replace Boxicons with your own icons:

/* Replace icon with custom image */
.accessibility-toggle-btn i {
    display: none !important;
}

.accessibility-toggle-btn::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('path/to/your-icon.svg');
    background-size: contain;
    margin-right: 8px;
}

Custom Animations

/* Add custom animation */
.accessibility-toggle-btn {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

Custom Shadows

/* Custom shadow */
.accessibility-toggle-btn {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.accessibility-panel {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

🔧 Integration with CSS Frameworks

Tailwind CSS

If using Tailwind, you can use utility classes alongside custom CSS:

<style>
.accessibility-toggle-btn {
    @apply bg-indigo-600 text-white px-6 py-3 rounded-lg;
}
</style>

Bootstrap

/* Bootstrap-compatible styling */
.accessibility-toggle-btn {
    background: var(--bs-primary) !important;
    border-radius: var(--bs-border-radius) !important;
}

📱 Responsive Customization

Mobile-Specific Styles

/* Mobile adjustments */
@media (max-width: 768px) {
    .accessibility-toggle-btn {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
    
    .accessibility-panel {
        width: calc(100vw - 20px) !important;
        max-width: 320px !important;
    }
}

Tablet Adjustments

@media (min-width: 769px) and (max-width: 1024px) {
    .accessibility-panel {
        width: 280px !important;
    }
}

🎨 Color Scheme Examples

Blue Theme

.accessibility-toggle-btn {
    background: #0066cc !important;
}
.accessibility-panel-header {
    background: #0066cc !important;
}

Purple Theme

.accessibility-toggle-btn {
    background: #8b5cf6 !important;
}
.accessibility-panel-header {
    background: #8b5cf6 !important;
}

Green Theme

.accessibility-toggle-btn {
    background: #10b981 !important;
}
.accessibility-panel-header {
    background: #10b981 !important;
}

⚠️ Important Notes

  1. Use !important: Widget styles use !important, so you may need to use it too
  2. Specificity: Use specific selectors to override default styles
  3. Test Thoroughly: Test customizations on different browsers and devices
  4. Maintain Accessibility: Ensure customizations don't reduce accessibility
  5. Update Safe: Custom CSS won't be overwritten by plugin updates

🔍 Testing Customizations

  1. Browser Testing: Test in Chrome, Firefox, Safari, Edge
  2. Mobile Testing: Test on iOS and Android devices
  3. Feature Testing: Ensure all features still work
  4. Accessibility Testing: Verify accessibility isn't reduced

📚 Related Pages

🆘 Need Help?

Last Updated: November 2025

Getting Started

Documentation

Guides

Development

Support

Clone this wiki locally