Reskinning Raffles
Alphabot offers a basic yet powerful way to reskin your raffle page however you like!
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 Material UI Global CSS Override. This will require the creator to have a strong CSS skill with at least a basic understanding of CSS in Javascript or JSS
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.
Last modified 4d ago