Appearance Customization

Customize the visual appearance of the downloader form to match your brand and website design.

Accessing Customization Settings

1. Go to WordPress Admin Dashboard

2. Navigate to Visolix Video Downloader → Settings

3. Click on the Appearance & Styling tab

Available Customization Options

Download Button

Customize the main download button appearance:

• Button Background Color - Main button color

• Button Text Color - Text color on button

• Button Hover Background Color - Color when hovering over button

• Button Hover Text Color - Text color when hovering over button

URL Input Field

Customize the URL input field styling:

• Input Background Color - Background of input field

• Input Text Color - Text color in input

• Input Border Color - Border color

Paste Button

Customize the paste button next to the input field:

• Paste Button Background - Background color

• Paste Button Text Color - Text color

• Paste Button Hover Background - Hover background color

• Paste Button Hover Text - Hover text color

General Styling

• Corner Roundness (Border Radius) - Border radius in pixels (0-50)

Advanced Customization

Custom CSS Code

Add your own CSS rules to further customize the appearance:

/* Example custom CSS */
.visolix-downloader-form {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.visolix-download-btn {
    transition: all 0.3s ease;
}

Custom JavaScript Code

Add custom JavaScript functionality:

// Example custom JavaScript
jQuery(document).ready(function($) {
    $('.visolix-downloader-form').on('submit', function() {
        console.log('Download started');
    });
});

Custom Homepage Content

Add HTML content for the homepage section:

<div class="custom-home-content">
    <h2>Welcome to Video Downloader</h2>
    <p>Download videos from multiple platforms easily.</p>
</div>

Important Notes

• Custom CSS/JS should be used carefully

• Test thoroughly after adding custom code

• Backup your customizations before major updates

• Use browser developer tools to preview changes

• Changes are applied immediately after saving

Color Picker

The customization interface includes a color picker for easy color selection. You can:

• Click on color swatches for quick selection

• Enter hex color codes manually (#FF0000)

• Use RGB/RGBA values

• Preview changes in real-time

Responsive Design

All customizations are responsive and will work on:

• Desktop computers

• Tablets

• Mobile devices

Troubleshooting

Changes Not Applying

• Clear browser cache and cookies

• Check for CSS conflicts with theme styles

• Ensure custom CSS syntax is correct

Mobile Display Issues

• Test on actual mobile devices

• Check responsive breakpoints

• Adjust border radius for mobile if needed

Custom Code Errors

• Check browser console for JavaScript errors

• Validate CSS syntax

• Test custom code in isolation first

Best Practices

1. Keep it Simple - Don't over-customize

2. Test Across Devices - Check on multiple screen sizes

3. Use Consistent Colors - Match your brand colors

4. Consider Accessibility - Ensure good contrast ratios

5. Backup Regularly - Save your customization settings