LogoLogo
  • Welcome to Alphabot
  • For Individuals
    • Introduction
    • Creating Your Account
    • Entering a raffle
    • Account Settings
      • Social Connections
      • Notifications
      • Communities Settings
      • Signed Wallets
      • Mint Wallets
      • Other Buttons
    • Premium Membership
      • Pricing
      • How to get Premium
      • Burn the Ape List NFT for Lifetime Free Premium Membership
  • The Calendar
    • Introduction
    • Project List Page
    • Adding External Wins
    • Adding Project To Calendar
    • Changing Project on Calendar
  • For Teams
    • Introduction
    • Setting Up Your Team
      • Team Name
      • Team Socials
      • Team Members
      • Raffle Templates
      • Loss Multiplier
      • Team Launch Reminders
      • Team Icon
    • Team Analytics
    • Team History
    • Subscription
      • How To Get A Subscription
      • Refresh Subscription Status
    • Free Plan
    • Collab Management
  • Use Cases
    • Alphabot Use Cases
      • Using Raffles in Spaces, Broadcasts & Streams
      • Accelerate Your X Growth: Launch Your Project or Become an Influencer from Zero with Alphabot Raids
      • Applications
      • Physical & Merch Giveaways
      • Gaming Tournaments & Events
      • Allowlist & Whitelist (WL) Distribution
      • Beta Tester Recruitment
      • More coming soon...
  • Raffles
    • What is a Raffle?
      • Raffle
      • FCFS
      • Wallet Collection
      • Application
    • Creating Your First Raffle
    • Entry Requirements
      • Verified Email
      • Connect Wallet
      • Connect Discord
      • Connect X
      • Optional X Tasks
      • Connect Telegram
      • Invite Codes (Applications)
      • Visit a Web Page
      • Generic Requirement
      • Password Protection
      • Captcha
    • Post Raffle to Discord
    • Post Raffle to Telegram
    • Using Raffle Templates
    • Raffle Visibility
    • Project Data Source
      • Project Data Fields
      • Adding Project To Database
      • Changing Project Data
    • Information For Winners
    • Rerolling Winners
    • Rolling & Finalization
    • Exporting Winners Data
    • Reskinning Raffles
    • Youtube Embed
  • RAIDS
    • What is a Raid?
    • Setting Up Alphabot Raids
    • USDT/USDC Raids
  • BOOST
    • Getting Started with $Boost Airdrop
      • Season 0 (closed)
      • Season 1 (Closed)
        • Beef Battles
      • TGE (Tokenomics)
      • Season 2
  • The Bot
    • Discord Bot
      • Discord Bot Setup
      • Daily Mint Schedule (Discord)
      • Entering Raffles on Discord
      • Discord Bot Commands
        • Create Raffles
        • Create Embed
        • Daily Launches
        • Wallet Management
        • Verify
        • Captcha (Private Messages)
        • Raffle Winners
        • Assign Roles in Bulk
    • Telegram Bot
      • Telegram Bot Setup
      • Daily Mint Schedule (Telegram)
    • Alphabot API
  • Support
    • Support / Help
    • Suggestions and Ideas
    • FAQ
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Raffles

Reskinning Raffles

Alphabot offers a basic yet powerful way to reskin your raffle page however you like!

PreviousExporting Winners DataNextYoutube Embed

Last updated 1 year ago

Was this helpful?

We have added a field for all raffles with an active subscription called "Style overrides". This allows a raffle creator to have full control over the page styling for their raffle. This requires a valid JSON object and will pass the result into a . This will require the creator to have a strong CSS skill with at least a basic understanding of CSS in Javascript or

A very basic (and ugly) example is here:

{
  body: {
    backgroundColor: 'blue',
    '& .MuiPaper-root': {
      backgroundColor: 'green',
    },
  },
}

This will turn the background color blue, and the "paper" elements background color green. Light & dark mode can be targed with different overrides with "body.dark": { ... and "body.light": { ... Though you can find many classes throughout the page with very high specificity, it is not recommended to target classes ending with a hash (bunch of random characters at the end), for example .css-1jkf8rs - These can change with each web deployment and will not be reliable long term. The .Mui... classes (without hashes) are generally pretty safe to target. Also, we have added several static classes starting with ab- targeting different elements or sections:

.ab-theme-dark // Theme-based class for 'dark' theme
.ab-theme-light // Theme-based class for 'light' theme
// A class also gets applied to the body element per theme - ex: body.dark, body.light

.ab-actions // Action icons section (twitter/discord/edit/etc)
.ab-banner // Banner image element
.ab-blockchain // Blockchain icon element
.ab-body // Main body of the raffle page
.ab-body-content // Body content of the raffle page (adjacent to tasks)
.ab-created-by // Created by section at the bottom of raffle
.ab-data // Project data pills
.ab-description // Raffle description section
.ab-footer // Page footer
.ab-header // Page header
.ab-header-profile-button // User profile button in headre
.ab-header-title // Alphabot title in header
.ab-left-rail // Left rail navigation bar
.ab-tasks // Tasks panel
.ab-team-chip // Team chip
.ab-team-pfp // Team pfp avatar
.ab-title // Raffle title
.ab-twitter-pfp // Project pfp avatar

// Button where the user clicks register
.ab-register-button // Register button
.ab-unregister-button // Cancel registration button
.ab-register-success // Register success element

// Sections w text about the user's status regarding the raffle/application
.ab-ended-lost // Didn't win
.ab-ended-over // Didn't enter & ended
.ab-ended-submitted // Submitted (Application)
.ab-ended-unpicked // Ended but winners not yet picked
.ab-ended-winner // Winner

// Added to the body element based on raffle state
.ab-raffle-prestart // Raffle has not started yet (before start date)
.ab-raffle-active // Raffle is actively accepting entries
.ab-raffle-ended  // Raffle has ended but is not yet finalized
.ab-raffle-finalized // Raffle is finalized

// Application specific
.ab-app-code-loading // Shown temporarily when app invite code check is loading
.ab-app-code-success // Shown temporarily when app invite code success
.ab-question-option // Question option 
.ab-question // Question (will also have `.ab-question-1` on first question, etc)
.ab-questions // Questions section
.ab-question-step // Question Step (also `.ab-question-step-1` on first step, etc)
.ab-question-steps // Question Steps container

These classes will always be safe to target and should help with various styles desired for raffles in different states.

Material UI Global CSS Override
JSS