Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Customization

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

AltStyle によって変換されたページ (->オリジナル) /