Custom CSS For A SweepWidget Giveaway

With the custom CSS editor, you have complete control over every design element of your giveaway widget. You can style any element by targeting its CSS class or ID.

Plan Required: Premium or higher

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 </> checkbox
Enter your CSS code in the editor

Important Notes

Custom CSS overrides design editor settings – Your CSS takes priority over the visual style settings
CSS changes only visible on live widget – The preview/demo widget in the builder won’t show your CSS changes. You must view the live giveaway to see your styling
No <style> tags needed – The editor already wraps your code in style tags

Finding CSS Classes and IDs

To find the CSS classes and IDs for elements you want to style:

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 and show the element’s classes and IDs
Use those class names (with a . prefix) or IDs (with a # prefix) in your CSS

Common CSS Classes

Here are the actual CSS classes used in SweepWidget that you can target:

Widget Container

Class	Element
`.sw_container`	Main widget container (outermost wrapper)
`.sw_container_inner`	Inner container wrapper
`.sw_inner`	Widget inner element
`.sw_inner_2`	Secondary inner wrapper (contains content)

Header & Title

Class / ID	Element
`.sw_header`	Main header/title section
`.sw_header_2`	Alternative header style
`#widget_description`	Giveaway description text area
`.header_view`	Navigation header wrapper
`.nav_logo_view_sweep`	Logo area in the header
`.sw_sub_header`	Sub-header text
`.sw_sub_header_2`	Alternative sub-header style

Entry Methods

Class	Element
`.sw_entry_main`	Entry method main container
`.sw_entry_h`	Entry method wrapper
`.sw_entry_h_1`	Individual entry method row (clickable)
`.sw_entry_h_1_right`	Right side of entry method row
`.sw_entry_row_1`	Entry row container
`.sw_entry_input`	Entry input field wrapper
`.sw_inner_entry_methods`	All entry methods container
`.sw_entries_worth`	Entry points/value display
`.sw_entries_worth_2`	Alternative entry points display
`.sw_entries_worth_locked`	Locked entry display
`.sw_center_icon`	Centered icon container
`.sw_icon_centered`	Centered icon element
`.sw_text_inner`	Text wrapper inside entry row
`.sw_text_inner_text`	Text content in entry row

Buttons & Forms

Class	Element
`.sw_button_holder`	Button container
`.sw_button_text_1`	Primary button text style
`.sw_button_text_2`	Secondary button text style
`.sw_default_button`	Default button styling
`.sw_text_input`	Text input fields
`.sw_text_input_2`	Alternative text input style
`.sw_textarea`	Textarea fields
`.sw_select_full`	Full-width select dropdown
`.sw_link`	Link/action buttons
`.sw_verify`	Verify buttons

Layout Sections

Class	Element
`.sw_top`	Top section of widget
`.sw_top_row`	Row within top section
`.sw_bottom`	Bottom section of widget
`.sw_bottom_row`	Row within bottom section
`.sw_bottom_container`	Bottom container wrapper
`.sw_row_1`	Primary row layout
`.sw_row_2`	Secondary row layout
`.sw_desc`	Description area
`.sw_desc_top`	Top description section
`.sw_desc_bottom_1`	Bottom description sections (1-7 available)

Images

Class	Element
`.sw_image`	Full-width image container
`.sw_image_2`	Image with padding (25% width)
`.sw_image_3`	Alternative image style
`.sw_image_4`	Additional image variant

Social & Sharing

Class	Element
`.sw_share_btn`	Social share buttons
`.sw_share_link_holder_inner`	Share link input wrapper
`.social_login_holder`	Social login buttons container
`.viral_share_header`	Viral share section header
`.viral_share_top_wrapper`	Viral share section wrapper

Rewards & Leaderboard

Class	Element
`.unlock_rewards_row`	Unlock rewards display row
`.unlock_rewards_row_header`	Rewards header
`.earned_rewards_each_wrapper`	Individual earned reward container
`.leaderboard_row`	Leaderboard entry rows
`.leaderboard_header`	Leaderboard section header
`.leaderboard_rank`	Rank display in leaderboard
`.leaderboard_name`	Name display in leaderboard
`.leaderboard_amount`	Entry amount in leaderboard

Other Elements

Class	Element
`.sw_loading_text`	Loading text display
`.sw_loading_image`	Loading spinner
`.sw_login`	Login section
`.sw_attribution`	SweepWidget attribution/footer
`.upload_a_file_row`	File upload entry section
`.sw_total_entries_2`	Total entries display
`.close`	Close button (for popup mode)

CSS Examples

Style the Main Header

.sw_header {
    color: #333;
    font-size: 28px;
    font-weight: bold;
}

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 Action Buttons

.sw_link {
    background: #ff6600 !important;
    border-radius: 25px !important;
    font-weight: bold;
    text-transform: uppercase;
}

.sw_link:hover {
    background: #cc5200 !important;
}

Style Input Fields

.sw_text_input {
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

.sw_text_input:focus {
    border-color: #4a3aff !important;
    box-shadow: 0 0 5px rgba(74, 58, 255, 0.3) !important;
}

Style the Entry Points Display

.sw_entries_worth {
    background: #4a3aff !important;
    color: white !important;
    border-radius: 50% !important;
    font-weight: bold;
}

Change Font Family

.sw_container {
    font-family: 'Poppins', sans-serif;
}

.sw_header {
    font-family: 'Montserrat', sans-serif;
}

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;
}

Pro Tips

Use !important when needed – Since SweepWidget has its own styles, you may need to add !important to override them (e.g., color: red !important;)
Be specific with selectors – If styles aren’t applying, make your selectors more specific (e.g., .sw_container .sw_header instead of just .sw_header)
Test on mobile – Make sure your custom CSS looks good on mobile devices. Use media queries if needed.
Back up your CSS – Keep a copy of your CSS code in a text file in case you need to restore it.
Use browser DevTools – Right-click any element and select “Inspect” to see its exact class names

Mobile-Responsive CSS Example

/* Desktop styles */
.sw_header {
    font-size: 28px;
}

.sw_entry_h_1 {
    padding: 20px;
}

/* Mobile styles */
@media (max-width: 768px) {
    .sw_header {
        font-size: 20px;
    }
    
    .sw_entry_h_1 {
        padding: 12px;
    }
}

Troubleshooting

CSS not appearing on the widget

Remember that CSS only shows on the live widget, not the preview in the builder
Make sure you saved your giveaway after adding CSS
Clear your browser cache and refresh the page
Check for syntax errors (missing semicolons, brackets, etc.)

Styles being overridden

Add !important to your declarations
Make your selectors more specific (e.g., .sw_container .sw_entry_h_1)
Check if another style has higher specificity using browser DevTools

Finding the right class name

Open your live giveaway
Right-click the element you want to style
Select “Inspect” or “Inspect Element”
Look at the highlighted HTML to find the class names
Copy the class name and add a . prefix in your CSS