{"id":1320,"date":"2021-03-30T00:51:15","date_gmt":"2021-03-30T00:51:15","guid":{"rendered":"https:\/\/sweepwidget.com\/docs\/?p=1320"},"modified":"2026-03-06T22:31:05","modified_gmt":"2026-03-06T22:31:05","slug":"custom-css-for-sweepwidget","status":"publish","type":"post","link":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget","title":{"rendered":"Custom CSS For A SweepWidget Giveaway"},"content":{"rendered":"<p>The custom CSS editor gives you complete control over the design of your SweepWidget giveaway. Target any element by its CSS class or ID to customize colors, fonts, spacing, borders, and more.<\/p>\n<p><strong>Plan Required:<\/strong> Premium or higher<\/p>\n<p><strong>Works on:<\/strong> Landing pages and embedded widgets<\/p>\n<h2 class=\"wp-block-heading\"><strong>How to Access the Custom CSS Editor<\/strong><\/h2>\n<ol class=\"wp-block-list\">\n<li>Create or edit a giveaway<\/li>\n<li>Click on the <strong>Design<\/strong> tab in the left sidebar<\/li>\n<li>Click the <strong>+ Add Custom Styling To Form<\/strong> button<\/li>\n<li>Check the <strong>Add custom CSS code &lt;\/&gt;<\/strong> checkbox<\/li>\n<li>Enter your CSS code in the editor<\/li>\n<\/ol>\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1-1024x568.png\" alt=\"\" class=\"wp-image-7295\" srcset=\"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1-1024x568.png 1024w, https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1-300x166.png 300w, https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1-768x426.png 768w, https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1.png 1500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-2-1-1024x614.png\" alt=\"\" class=\"wp-image-7296\" style=\"width:600px\" srcset=\"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-2-1-1024x614.png 1024w, https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-2-1-300x180.png 300w, https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-2-1-768x460.png 768w, https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-2-1.png 1178w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<h2 class=\"wp-block-heading\"><strong>Important Notes<\/strong><\/h2>\n<ul class=\"wp-block-list\">\n<li><strong><code>!important<\/code> is automatically applied<\/strong> &#8211; SweepWidget automatically adds <code>!important<\/code> to all your CSS declarations. This ensures your styles override the widget&#8217;s inline styles. You do not need to add <code>!important<\/code> yourself.<\/li>\n<li><strong>Custom CSS overrides design editor settings<\/strong> &#8211; Your CSS takes priority over the visual style settings in the builder.<\/li>\n<li><strong>CSS changes are only visible on the live widget<\/strong> &#8211; The preview\/demo widget in the builder will not show your CSS changes. You must view the live giveaway to see your styling.<\/li>\n<li><strong>No <code>&lt;style&gt;<\/code> tags needed<\/strong> &#8211; The editor already wraps your code in style tags. Just write your CSS rules directly.<\/li>\n<li><strong>Works on embedded widgets too<\/strong> &#8211; Custom CSS is applied to both landing page giveaways and embedded widgets (iframe\/JavaScript embed).<\/li>\n<li><strong>All CSS features supported<\/strong> &#8211; You can use any valid CSS including <code>rgba()<\/code>, <code>calc()<\/code>, <code>var()<\/code>, <code>linear-gradient()<\/code>, attribute selectors, media queries, and more.<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\"><strong>CSS Selectors Reference<\/strong><\/h2>\n<p>Below is a complete reference of all targetable CSS selectors in SweepWidget. IDs (prefixed with <code>#<\/code>) are unique per widget and are the most reliable way to target specific sections. Classes (prefixed with <code>.<\/code>) may appear on multiple elements.<\/p>\n<h3 class=\"wp-block-heading\"><strong>Widget Structure<\/strong><\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Selector<\/th>\n<th>Element<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>.sw_container<\/code><\/td>\n<td>Outer widget container (outermost wrapper)<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_container_inner<\/code><\/td>\n<td>Inner container wrapper<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_inner<\/code><\/td>\n<td>Main widget area<\/td>\n<\/tr>\n<tr>\n<td><code>#widget_title<\/code><\/td>\n<td>Giveaway title<\/td>\n<\/tr>\n<tr>\n<td><code>#widget_description<\/code><\/td>\n<td>Description text area<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_featured_media<\/code><\/td>\n<td>Featured image or video container<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h3 class=\"wp-block-heading\"><strong>Top Stats Bar<\/strong><\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Selector<\/th>\n<th>Element<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>#sw_stats_bar<\/code><\/td>\n<td>Stats bar container (my entries, total entries, timer)<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_top_1<\/code><\/td>\n<td>My entries column<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_top_2<\/code><\/td>\n<td>Total entries column<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_top_3<\/code><\/td>\n<td>Countdown timer column<\/td>\n<\/tr>\n<tr>\n<td><code>#clockdiv<\/code><\/td>\n<td>Countdown timer numbers<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_my_entries<\/code><\/td>\n<td>My entries count number<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_total_entries_count_all<\/code><\/td>\n<td>Total entries count number<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h3 class=\"wp-block-heading\"><strong>Login \/ Entry Form<\/strong><\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Selector<\/th>\n<th>Element<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>#sw_login_form<\/code><\/td>\n<td>Login form container<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_login_fields<\/code><\/td>\n<td>Login fields wrapper<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_login_button<\/code><\/td>\n<td>Login \/ enter button<\/td>\n<\/tr>\n<tr>\n<td><code>#sw__login_name_wrapper<\/code><\/td>\n<td>Name input wrapper<\/td>\n<\/tr>\n<tr>\n<td><code>#sw__login_email_wrapper<\/code><\/td>\n<td>Email input wrapper<\/td>\n<\/tr>\n<tr>\n<td><code>#sw__login_phone_wrapper<\/code><\/td>\n<td>Phone input wrapper<\/td>\n<\/tr>\n<tr>\n<td><code>#sw__login_birthday_wrapper<\/code><\/td>\n<td>Birthday input wrapper<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_social_login<\/code><\/td>\n<td>Social login buttons section<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_text_input<\/code><\/td>\n<td>All text input fields<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_textarea<\/code><\/td>\n<td>All textarea fields<\/td>\n<\/tr>\n<tr>\n<td><code>.social_login_button_holder<\/code><\/td>\n<td>Individual social login button<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h3 class=\"wp-block-heading\"><strong>Entry Methods<\/strong><\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Selector<\/th>\n<th>Element<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>#sw_entry_methods<\/code><\/td>\n<td>Entry methods section container<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_entry<\/code><\/td>\n<td>Each entry method row<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_entry_h_1<\/code><\/td>\n<td>Entry method header (collapsed state)<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_entry_input<\/code><\/td>\n<td>Entry method expanded content<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_text_inner_text<\/code><\/td>\n<td>Entry method name text<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_entries_worth<\/code><\/td>\n<td>Entry count badges (e.g., &#8220;+5 entries&#8221;)<\/td>\n<\/tr>\n<tr>\n<td><code>.entry_icon_path_display<\/code><\/td>\n<td>Entry method icon<\/td>\n<\/tr>\n<tr>\n<td><code>#tabs_wrapper<\/code><\/td>\n<td>Tabs container (entries \/ my entries \/ leaderboard)<\/td>\n<\/tr>\n<tr>\n<td><code>#leaderboard_wrapper<\/code><\/td>\n<td>Leaderboard section<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h3 class=\"wp-block-heading\"><strong>Buttons<\/strong><\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Selector<\/th>\n<th>Element<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>.sw_verify<\/code><\/td>\n<td>Verify \/ submit buttons on entry methods<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_login_input<\/code><\/td>\n<td>Login submit button<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_share_btn<\/code><\/td>\n<td>Social share buttons<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_copy_clipboard<\/code><\/td>\n<td>Copy link button<\/td>\n<\/tr>\n<tr>\n<td><code>.sw_link<\/code><\/td>\n<td>Links and action buttons within the widget<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h3 class=\"wp-block-heading\"><strong>Bottom Section<\/strong><\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Selector<\/th>\n<th>Element<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>#sw_bottom_bar<\/code><\/td>\n<td>Bottom bar container (prizes, end date, rules)<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_prizes_column<\/code><\/td>\n<td>Prizes column<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_end_date_column<\/code><\/td>\n<td>End date column<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_rules_column<\/code><\/td>\n<td>Rules column<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_footer<\/code><\/td>\n<td>Footer area (expanded prizes\/rules content)<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_contest_prizes_holder<\/code><\/td>\n<td>Prizes expanded content<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_contest_rules_holder<\/code><\/td>\n<td>Rules expanded content<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_attribution<\/code><\/td>\n<td>&#8220;Built with SweepWidget&#8221; attribution footer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h3 class=\"wp-block-heading\"><strong>User Account, Rewards, and Other<\/strong><\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Selector<\/th>\n<th>Element<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>#sw_user_account_holder<\/code><\/td>\n<td>User account details section<\/td>\n<\/tr>\n<tr>\n<td><code>#sw_logout_link_holder<\/code><\/td>\n<td>Logout \/ account bar<\/td>\n<\/tr>\n<tr>\n<td><code>#verify_email_wrapper<\/code><\/td>\n<td>Email verification modal<\/td>\n<\/tr>\n<tr>\n<td><code>#unlock_rewards_main_wrapper<\/code><\/td>\n<td>Rewards \/ milestones section<\/td>\n<\/tr>\n<tr>\n<td><code>.unlock_rewards_row<\/code><\/td>\n<td>Individual reward row<\/td>\n<\/tr>\n<tr>\n<td><code>.leaderboard_row<\/code><\/td>\n<td>Leaderboard entry row<\/td>\n<\/tr>\n<tr>\n<td><code>.leaderboard_rank<\/code><\/td>\n<td>Rank number in leaderboard<\/td>\n<\/tr>\n<tr>\n<td><code>.leaderboard_name<\/code><\/td>\n<td>Name in leaderboard<\/td>\n<\/tr>\n<tr>\n<td><code>.leaderboard_amount<\/code><\/td>\n<td>Entry amount in leaderboard<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<h2 class=\"wp-block-heading\"><strong>CSS Examples<\/strong><\/h2>\n<p>Remember: <code>!important<\/code> is automatically added to all declarations, so you do not need to include it yourself. The examples below show clean CSS without <code>!important<\/code>.<\/p>\n<h3 class=\"wp-block-heading\"><strong>Change the Widget Title<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>#widget_title {\n    color: #333;\n    font-size: 28px;\n    font-weight: bold;\n    text-align: center;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style the Description<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>#widget_description {\n    font-size: 16px;\n    line-height: 1.6;\n    color: #555;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style Entry Method Rows<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>.sw_entry_h_1 {\n    border-left: 4px solid #4a3aff;\n    margin-bottom: 10px;\n    padding: 15px;\n    border-radius: 8px;\n}\n\n.sw_entry_h_1:hover {\n    background: #f5f5f5;\n    transform: translateX(5px);\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style the Login Button<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>#sw_login_button {\n    background: #ff6600;\n    border-radius: 25px;\n    font-weight: bold;\n    text-transform: uppercase;\n}\n\n#sw_login_button:hover {\n    background: #cc5200;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style Input Fields<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>.sw_text_input {\n    border: 2px solid #ddd;\n    border-radius: 8px;\n    padding: 12px;\n}\n\n.sw_text_input:focus {\n    border-color: #4a3aff;\n    box-shadow: 0 0 5px rgba(74, 58, 255, 0.3);\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style the Entry Points Badges<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>.sw_entries_worth {\n    background: #4a3aff;\n    color: white;\n    border-radius: 50%;\n    font-weight: bold;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Change Font Family<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>.sw_container {\n    font-family: 'Poppins', sans-serif;\n}\n\n#widget_title {\n    font-family: 'Montserrat', sans-serif;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style the Stats Bar<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>#sw_stats_bar {\n    background: #1a1a2e;\n    color: white;\n    border-radius: 8px;\n    padding: 10px;\n}\n\n#clockdiv {\n    color: #e94560;\n    font-weight: bold;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style the Bottom Bar<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>#sw_bottom_bar {\n    background: #f8f9fa;\n    border-top: 2px solid #eee;\n    padding: 15px;\n}\n\n#sw_prizes_column {\n    color: #28a745;\n    font-weight: bold;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Hide an Element<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>#sw_attribution {\n    display: none;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Add a Border to the Widget<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>.sw_container {\n    border: 2px solid #333;\n    border-radius: 10px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style the Leaderboard<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>.leaderboard_row {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    border-radius: 8px;\n    margin-bottom: 5px;\n}\n\n.leaderboard_rank {\n    font-weight: bold;\n    font-size: 18px;\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Style the Featured Image<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>#sw_featured_media img {\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}<\/code><\/pre>\n<h3 class=\"wp-block-heading\"><strong>Dark Theme Example<\/strong><\/h3>\n<pre class=\"wp-block-code\"><code>.sw_container {\n    background: #1a1a2e;\n    color: #eee;\n}\n\n#sw_inner {\n    background: #16213e;\n}\n\n.sw_entry_h_1 {\n    background: #0f3460;\n    color: #eee;\n    border-color: #e94560;\n}\n\n.sw_text_input {\n    background: #16213e;\n    color: #eee;\n    border-color: #0f3460;\n}\n\n#sw_stats_bar {\n    background: #0f3460;\n}\n\n#sw_bottom_bar {\n    background: #16213e;\n    border-color: #0f3460;\n}<\/code><\/pre>\n<h2 class=\"wp-block-heading\"><strong>Mobile-Responsive CSS<\/strong><\/h2>\n<p>You can use media queries to apply different styles on mobile devices:<\/p>\n<pre class=\"wp-block-code\"><code>\/* Desktop styles *\/\n#widget_title {\n    font-size: 28px;\n}\n\n.sw_entry_h_1 {\n    padding: 20px;\n}\n\n\/* Mobile styles *\/\n@media (max-width: 768px) {\n    #widget_title {\n        font-size: 20px;\n    }\n\n    .sw_entry_h_1 {\n        padding: 12px;\n    }\n}<\/code><\/pre>\n<h2 class=\"wp-block-heading\"><strong>Finding CSS Selectors with Browser DevTools<\/strong><\/h2>\n<p>To find the exact CSS class or ID for any element:<\/p>\n<ol class=\"wp-block-list\">\n<li>Open your live giveaway in a browser<\/li>\n<li>Right-click on the element you want to style<\/li>\n<li>Select <strong>Inspect<\/strong> (or <strong>Inspect Element<\/strong>)<\/li>\n<li>The developer tools will highlight the HTML element and show its classes and IDs<\/li>\n<li>Use those class names (with a <code>.<\/code> prefix) or IDs (with a <code>#<\/code> prefix) in your CSS<\/li>\n<\/ol>\n<p>The selectors reference tables above cover all major widget sections, but you can use this method to find additional classes on specific elements.<\/p>\n<h2 class=\"wp-block-heading\"><strong>Troubleshooting<\/strong><\/h2>\n<h3 class=\"wp-block-heading\"><strong>CSS not appearing on the widget<\/strong><\/h3>\n<ul class=\"wp-block-list\">\n<li>CSS only shows on the <strong>live widget<\/strong>, not the preview in the builder<\/li>\n<li>Make sure you saved your giveaway after adding CSS<\/li>\n<li>Clear your browser cache and refresh the page<\/li>\n<li>Check for syntax errors like missing semicolons, brackets, or colons<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\"><strong>Styles not applying<\/strong><\/h3>\n<ul class=\"wp-block-list\">\n<li>Since <code>!important<\/code> is auto-applied, your styles should override widget defaults. If they still don&#8217;t apply, try making your selector more specific (e.g., <code>.sw_container #widget_title<\/code> instead of just <code>#widget_title<\/code>)<\/li>\n<li>Use browser DevTools to check if another rule is conflicting<\/li>\n<li>Make sure your CSS syntax is valid. A single syntax error can break all rules that follow it.<\/li>\n<\/ul>\n<h3 class=\"wp-block-heading\"><strong>CSS works on landing page but not embedded widget<\/strong><\/h3>\n<ul class=\"wp-block-list\">\n<li>Custom CSS works on both landing pages and embedded widgets. If it is not applying to the embed, make sure you saved and republished the giveaway.<\/li>\n<li>If you are using an iframe embed, custom CSS is injected inside the iframe automatically.<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\"><strong>Tips<\/strong><\/h2>\n<ul class=\"wp-block-list\">\n<li><strong>Use IDs for precision<\/strong> &#8211; Target elements with <code>#id<\/code> selectors for the most reliable results. IDs are unique per element and won&#8217;t accidentally style the wrong thing.<\/li>\n<li><strong>Test on mobile<\/strong> &#8211; Use media queries to ensure your styles look good on all screen sizes.<\/li>\n<li><strong>Back up your CSS<\/strong> &#8211; Keep a copy of your CSS code in a text file in case you need to restore it.<\/li>\n<li><strong>Use browser DevTools<\/strong> &#8211; Right-click any element and select &#8220;Inspect&#8221; to see its exact class names and IDs.<\/li>\n<li><strong>Keep it simple<\/strong> &#8211; Start with small changes and build up. It is easier to debug a few rules at a time.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The custom CSS editor gives you complete control over the design of your SweepWidget giveaway. Target any element by its CSS class or ID to customize colors, fonts, spacing, borders, and more. Plan Required: Premium or higher Works on: Landing pages and embedded widgets How to Access the Custom CSS Editor Create or edit a giveaway Click on the Design tab in the left sidebar Click the + Add Custom Styling To Form button Check the Add custom CSS code &lt;\/&gt; checkbox Enter your CSS code in the editor Important Notes !important is automatically applied &#8211; SweepWidget automatically adds !important to all your CSS declarations. This ensures your styles override the widget&#8217;s inline styles. You do not need to add !important yourself. Custom CSS overrides design editor settings &#8211; Your CSS takes priority over the visual style settings in the builder. CSS changes are only visible on the live widget &#8211; The preview\/demo widget in the builder will not show your CSS changes. You must view the live giveaway to see your styling. No &lt;style&gt; tags needed &#8211; The editor already wraps your code in style tags. Just write your CSS rules directly. Works on embedded widgets too &#8211; Custom CSS is applied to both landing page giveaways and embedded widgets (iframe\/JavaScript embed). All CSS features supported &#8211; You can use any valid CSS including rgba(), calc(), var(), linear-gradient(), attribute selectors, media queries, and more. CSS Selectors Reference Below is a complete reference of all targetable CSS selectors in SweepWidget. IDs (prefixed with #) are unique per widget and are the most reliable way to target specific sections. Classes (prefixed with .) may appear on multiple elements. Widget Structure Selector Element .sw_container Outer widget container (outermost wrapper) .sw_container_inner Inner container wrapper #sw_inner Main widget area #widget_title Giveaway title #widget_description Description text area #sw_featured_media Featured image or video container Top Stats Bar Selector Element #sw_stats_bar Stats bar container (my entries, total entries, timer) #sw_top_1 My entries column #sw_top_2 Total entries column #sw_top_3 Countdown timer column #clockdiv Countdown timer numbers #sw_my_entries My entries count number #sw_total_entries_count_all Total entries count number Login \/ Entry Form Selector Element #sw_login_form Login form container #sw_login_fields Login fields wrapper #sw_login_button Login \/ enter button #sw__login_name_wrapper Name input wrapper #sw__login_email_wrapper Email input wrapper #sw__login_phone_wrapper Phone input wrapper #sw__login_birthday_wrapper Birthday input wrapper #sw_social_login Social login buttons section .sw_text_input All text input fields .sw_textarea All textarea fields .social_login_button_holder Individual social login button Entry Methods Selector Element #sw_entry_methods Entry methods section container .sw_entry Each entry method row .sw_entry_h_1 Entry method header (collapsed state) .sw_entry_input Entry method expanded content .sw_text_inner_text Entry method name text .sw_entries_worth Entry count badges (e.g., &#8220;+5 entries&#8221;) .entry_icon_path_display Entry method icon #tabs_wrapper Tabs container (entries \/ my entries \/ leaderboard) #leaderboard_wrapper Leaderboard section Buttons Selector Element .sw_verify Verify \/ submit buttons on entry methods .sw_login_input Login submit button .sw_share_btn Social share buttons .sw_copy_clipboard Copy link button .sw_link Links and action buttons within the widget Bottom Section Selector Element #sw_bottom_bar Bottom bar container (prizes, end date, rules) #sw_prizes_column Prizes column #sw_end_date_column End date column #sw_rules_column Rules column #sw_footer Footer area (expanded prizes\/rules content) #sw_contest_prizes_holder Prizes expanded content #sw_contest_rules_holder Rules expanded content #sw_attribution &#8220;Built with SweepWidget&#8221; attribution footer User Account, Rewards, and Other Selector Element #sw_user_account_holder User account details section #sw_logout_link_holder Logout \/ account bar #verify_email_wrapper Email verification modal #unlock_rewards_main_wrapper Rewards \/ milestones section .unlock_rewards_row Individual reward row .leaderboard_row Leaderboard entry row .leaderboard_rank Rank number in leaderboard .leaderboard_name Name in leaderboard .leaderboard_amount Entry amount in leaderboard CSS Examples Remember: !important is automatically added to all declarations, so you do not need to include it yourself. The examples below show clean CSS without !important. Change the Widget Title #widget_title { color: #333; font-size: 28px; font-weight: bold; text-align: center; } Style the Description #widget_description { font-size: 16px; line-height: 1.6; color: #555; } Style Entry Method Rows .sw_entry_h_1 { border-left: 4px solid #4a3aff; margin-bottom: 10px; padding: 15px; border-radius: 8px; } .sw_entry_h_1:hover { background: #f5f5f5; transform: translateX(5px); } Style the Login Button #sw_login_button { background: #ff6600; border-radius: 25px; font-weight: bold; text-transform: uppercase; } #sw_login_button:hover { background: #cc5200; } Style Input Fields .sw_text_input { border: 2px solid #ddd; border-radius: 8px; padding: 12px; } .sw_text_input:focus { border-color: #4a3aff; box-shadow: 0 0 5px rgba(74, 58, 255, 0.3); } Style the Entry Points Badges .sw_entries_worth { background: #4a3aff; color: white; border-radius: 50%; font-weight: bold; } Change Font Family .sw_container { font-family: &#8216;Poppins&#8217;, sans-serif; } #widget_title { font-family: &#8216;Montserrat&#8217;, sans-serif; } Style the Stats Bar #sw_stats_bar { background: #1a1a2e; color: white; border-radius: 8px; padding: 10px; } #clockdiv { color: #e94560; font-weight: bold; } Style the Bottom Bar #sw_bottom_bar { background: #f8f9fa; border-top: 2px solid #eee; padding: 15px; } #sw_prizes_column { color: #28a745; font-weight: bold; } Hide an Element #sw_attribution { display: none; } Add a Border to the Widget .sw_container { border: 2px solid #333; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } Style the Leaderboard .leaderboard_row { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; margin-bottom: 5px; } .leaderboard_rank { font-weight: bold; font-size: 18px; } Style the Featured Image #sw_featured_media img { border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } Dark Theme Example .sw_container { background: #1a1a2e; color: #eee; } #sw_inner { background: #16213e; } .sw_entry_h_1 { background: #0f3460; color: #eee; border-color: #e94560; } .sw_text_input { background: #16213e; color: #eee; border-color: #0f3460; } #sw_stats_bar { background: #0f3460; } #sw_bottom_bar { background: #16213e; border-color: #0f3460; } Mobile-Responsive CSS You can use media queries to apply different styles on mobile devices: \/* Desktop styles *\/ #widget_title { font-size: 28px; } .sw_entry_h_1 { padding: 20px; } \/* Mobile styles *\/ @media (max-width: 768px) { #widget_title { font-size: 20px; } .sw_entry_h_1 { padding: 12px; } } Finding CSS Selectors with Browser DevTools To find the exact CSS class or ID for any element: Open your live giveaway in a browser Right-click on the element you want to style Select Inspect (or Inspect Element) The developer tools will highlight the HTML element and show its classes and IDs Use those class names (with a<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-1320","post","type-post","status-publish","format-standard","hentry","category-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Custom CSS for SweepWidget<\/title>\n<meta name=\"description\" content=\"Manually edit the CSS of your SweepWidget giveaway. Custom code any class or ID in your giveaway.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom CSS for SweepWidget\" \/>\n<meta property=\"og:description\" content=\"Manually edit the CSS of your SweepWidget giveaway. Custom code any class or ID in your giveaway.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget\" \/>\n<meta property=\"og:site_name\" content=\"SweepWidget Help Docs\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-30T00:51:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-06T22:31:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"832\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"SweepWidget\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"SweepWidget\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget\"},\"author\":{\"name\":\"SweepWidget\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#\\\/schema\\\/person\\\/4cca2bc9c600116750eca1bfff6648e0\"},\"headline\":\"Custom CSS For A SweepWidget Giveaway\",\"datePublished\":\"2021-03-30T00:51:15+00:00\",\"dateModified\":\"2026-03-06T22:31:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget\"},\"wordCount\":957,\"image\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/custom-css-1-1-1024x568.png\",\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget\",\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget\",\"name\":\"Custom CSS for SweepWidget\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/custom-css-1-1-1024x568.png\",\"datePublished\":\"2021-03-30T00:51:15+00:00\",\"dateModified\":\"2026-03-06T22:31:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#\\\/schema\\\/person\\\/4cca2bc9c600116750eca1bfff6648e0\"},\"description\":\"Manually edit the CSS of your SweepWidget giveaway. Custom code any class or ID in your giveaway.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget#primaryimage\",\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/custom-css-1-1.png\",\"contentUrl\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/custom-css-1-1.png\",\"width\":1500,\"height\":832},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/custom-css-for-sweepwidget#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom CSS For A SweepWidget Giveaway\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/\",\"name\":\"SweepWidget Help Docs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#\\\/schema\\\/person\\\/4cca2bc9c600116750eca1bfff6648e0\",\"name\":\"SweepWidget\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g\",\"caption\":\"SweepWidget\"},\"sameAs\":[\"https:\\\/\\\/sweepwidget.com\\\/docs\"],\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/author\\\/sweepwidget\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom CSS for SweepWidget","description":"Manually edit the CSS of your SweepWidget giveaway. Custom code any class or ID in your giveaway.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget","og_locale":"en_US","og_type":"article","og_title":"Custom CSS for SweepWidget","og_description":"Manually edit the CSS of your SweepWidget giveaway. Custom code any class or ID in your giveaway.","og_url":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget","og_site_name":"SweepWidget Help Docs","article_published_time":"2021-03-30T00:51:15+00:00","article_modified_time":"2026-03-06T22:31:05+00:00","og_image":[{"width":1500,"height":832,"url":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1.png","type":"image\/png"}],"author":"SweepWidget","twitter_card":"summary_large_image","twitter_misc":{"Written by":"SweepWidget","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget#article","isPartOf":{"@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget"},"author":{"name":"SweepWidget","@id":"https:\/\/sweepwidget.com\/docs\/#\/schema\/person\/4cca2bc9c600116750eca1bfff6648e0"},"headline":"Custom CSS For A SweepWidget Giveaway","datePublished":"2021-03-30T00:51:15+00:00","dateModified":"2026-03-06T22:31:05+00:00","mainEntityOfPage":{"@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget"},"wordCount":957,"image":{"@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget#primaryimage"},"thumbnailUrl":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1-1024x568.png","articleSection":["Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget","url":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget","name":"Custom CSS for SweepWidget","isPartOf":{"@id":"https:\/\/sweepwidget.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget#primaryimage"},"image":{"@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget#primaryimage"},"thumbnailUrl":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1-1024x568.png","datePublished":"2021-03-30T00:51:15+00:00","dateModified":"2026-03-06T22:31:05+00:00","author":{"@id":"https:\/\/sweepwidget.com\/docs\/#\/schema\/person\/4cca2bc9c600116750eca1bfff6648e0"},"description":"Manually edit the CSS of your SweepWidget giveaway. Custom code any class or ID in your giveaway.","breadcrumb":{"@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget#primaryimage","url":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1.png","contentUrl":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2021\/03\/custom-css-1-1.png","width":1500,"height":832},{"@type":"BreadcrumbList","@id":"https:\/\/sweepwidget.com\/docs\/custom-css-for-sweepwidget#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sweepwidget.com\/docs\/"},{"@type":"ListItem","position":2,"name":"Custom CSS For A SweepWidget Giveaway"}]},{"@type":"WebSite","@id":"https:\/\/sweepwidget.com\/docs\/#website","url":"https:\/\/sweepwidget.com\/docs\/","name":"SweepWidget Help Docs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sweepwidget.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/sweepwidget.com\/docs\/#\/schema\/person\/4cca2bc9c600116750eca1bfff6648e0","name":"SweepWidget","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g","caption":"SweepWidget"},"sameAs":["https:\/\/sweepwidget.com\/docs"],"url":"https:\/\/sweepwidget.com\/docs\/author\/sweepwidget"}]}},"_links":{"self":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts\/1320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":10,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"predecessor-version":[{"id":7703,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts\/1320\/revisions\/7703"}],"wp:attachment":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}