Appearance Customization
Customize the visual appearance of the downloader form to match your brand and website design.
Accessing Customization Settings
Go to WordPress Admin Dashboard
Navigate to Visolix Video Downloader → Settings
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
Keep it Simple - Don't over-customize
Test Across Devices - Check on multiple screen sizes
Use Consistent Colors - Match your brand colors
Consider Accessibility - Ensure good contrast ratios
Backup Regularly - Save your customization settings
Last updated