Fingerprinting Account sharingAccount takeoverFake accounts
Challenges
Navigation

CSS styling for challenges

You can customize the look and feel of your challenge pages by adding CSS to your project. This allows you to match your brand's style and create a seamless experience for your users.

Usage

Add your custom CSS in the challenge settings section for your project. The CSS will be injected into the challenge pages. If you would like complete DOM control, you can write your own custom challenge page using the Rupt API. See the custom challenges blog post for more information.

CSS styling settings

Element class names

The challenge pages use the following class names to more easily apply styles across the challenge pages. You can use these class names to target specific elements in your custom CSS.

  • .challenge-page - The main container for the challenge page
  • .challenge-container - The container for the challenge page content
  • .project-name - The project name
  • .project-logo - The project logo
  • .challenge-heading - The main heading of the challenge page
  • .challenge-subheading - The subtitle text below the heading
  • .primary-cta - The primary call-to-action button
  • .logout-button - The logout button
  • .back-button - The back button
  • .language-selector-button - The language selector button
  • .verication-button-container - The container for the verification buttons
    • .verication-button-container button - All buttons in the verification button container
    • .verify-email-button - The verify email button
    • .verify-sms-button - The verify SMS button
    • .limit-devices-button - The limit devices button
    • .skip-button - The skip button
  • .otp-input-container - The OTP input container
    • .otp-input-container input - The OTP input fields
  • .device-limit-enforcer-table - The device limit enforcer table
    • .device-limit-enforcer-table th - The table header cells
    • .device-limit-enforcer-table td - The table body cells
    • .device-limit-enforcer-table tr - The table rows
    • .device-limit-enforcer-table tbody - The table body
    • .device-limit-enforcer-table thead - The table header
    • .device-icon - The device icon column
    • .connection-status - The connection status column
    • .device-os - The device OS column
    • .device-location - The device location column
    • .device-last-seen - The device last seen column
    • .device-actions - The device actions column
      • .device-limit-logout-button - The device limit logout button

Example

Here is an example of how you can customize the challenge page using CSS.

.challenge-page {
  background: #333;
}

.challenge-container {
  border-radius: 0;
  border: 0;
  text-align: left;
  max-width: 500px;
  background-color: #e5e5f7;
  box-shadow: 10px 10px;
}

.challenge-subheading {
  margin-top: 10px;
}

.project-logo {
  margin: 20px 0 0 0;
}

.verication-button-container {
  justify-content: left;
}

.verication-button-container button {
  border-radius: 0;
  background: #151b85;
  color: #eee;
}

Result

Example of CSS styling

Best practices

  • Ensure sufficient color contrast for accessibility
  • Use specific selectors to avoid unintended style changes
  • Keep the CSS minimal and focused on essential brand elements

Limitations

For security reasons, certain CSS properties and selectors may be sanitized or blocked. If you encounter any issues, please contact support.