Advanced styling and configuration options for your JobGara widgets
JobGara widgets offer extensive customization options to match your website's design and branding. This guide covers all available customization features and advanced techniques.
Customize your widget's color scheme to match your brand identity.
Image Placeholder: Color customization interface in widget editor
Recommended size: 800x500px - Show color picker and previewCustomize text appearance to match your website's typography.
Control the layout, spacing, and overall structure of your widget.
Add visual depth and definition to your widget elements.
Border radius: 0px
Border radius: 4-8px
Border radius: 12-20px
Border radius: 25-50px
Control what information is shown in your widget.
For advanced users: Add custom CSS to further customize your widget appearance.
/* Custom styling for JobGara widget */
#jobgara-widget-widget_68ffa609eddf6_1761584649 {
max-width: 800px;
margin: 20px auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 12px;
overflow: hidden;
}
/* Style job items */
#jobgara-widget-widget_68ffa609eddf6_1761584649 .job-item {
border-bottom: 1px solid #eee;
padding: 20px;
transition: background-color 0.3s ease;
}
#jobgara-widget-widget_68ffa609eddf6_1761584649 .job-item:hover {
background-color: #f8f9fa;
}
/* Style job titles */
#jobgara-widget-widget_68ffa609eddf6_1761584649 .job-title {
color: #007bff;
font-weight: 600;
font-size: 18px;
margin-bottom: 8px;
}
/* Style apply buttons */
#jobgara-widget-widget_68ffa609eddf6_1761584649 .apply-button {
background: linear-gradient(45deg, #007bff, #0056b3);
border: none;
border-radius: 25px;
padding: 10px 20px;
color: white;
font-weight: 500;
transition: transform 0.2s ease;
}
#jobgara-widget-widget_68ffa609eddf6_1761584649 .apply-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
widget_68ffa609eddf6_1761584649 with your actual widget key.
Image Placeholder: Before and after comparison of custom CSS styling
Recommended size: 800x400px - Split view showing default vs custom styled widgetEnsure your widget looks great on all devices with responsive customization options.
Full layout with all elements visible
Optimized for medium screens
Mobile-first design
Automatically adjust text sizes for mobile screens
Larger buttons for easier touch interaction
Show most important information first
Responsive images that scale appropriately
Customize your widget for optimal loading speed and performance.
Always test your customized widget before deploying to your live website.
Use the widget editor's preview feature to see changes in real-time
Test on desktop, tablet, and mobile devices
Check appearance in Chrome, Firefox, Safari, and Edge
Verify widget loads quickly on your website
Image Placeholder: Widget preview interface showing different device views
Recommended size: 800x500px - Show responsive preview modes