> For the complete documentation index, see [llms.txt](https://alphabot-docs.gitbook.io/alphabot/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alphabot-docs.gitbook.io/alphabot/raffles/reskinning-raffles.md).

# Reskinning Raffles

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](https://mui.com/material-ui/customization/how-to-customize/#4-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](https://cssinjs.org/?v=v10.9.2)

A very basic (and ugly) example is here:

```javascript
{
  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:

```javascript
.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.