Customization

Verse Frame supports custom CSS styling to match the embed's appearance with your website.

Custom CSS

Pass a URL to your CSS file via the verse-custom-styles-path attribute:

<div
  verse-series-slug="your-collection"
  verse-custom-styles-path="https://yourdomain.com/verse-styles.css"
></div>

The CSS file is fetched and injected into the iframe, allowing you to override default Verse styles.

Targeting Elements

Verse uses a build system that generates class names with dynamic postfixes. To target elements, use partial class name matching with CSS attribute selectors:

/* Target the asset cover area */
[class*="CollSinglePMSection_assetCoverRoot"] {
  --forced-max-width: 200px !important;
}

/* Target the price display */
[class*="PriceDisplay_root"] {
  font-size: 1.25rem !important;
}

/* Target the buy button */
[class*="BuyButton_root"] {
  border-radius: 8px !important;
  background-color: #000 !important;
}

/* Hide specific sections */
[class*="ActivitySection_root"] {
  display: none !important;
}

tip

Use your browser's DevTools to inspect the iframe content and identify the class name prefixes you want to target.

Programmatic Styling

You can also apply styles programmatically after initialization:

const verseEmbed = new VerseEmbed({
  baseUrl: "https://iframe.verse.works"
});
verseEmbed.initialize();

// Apply styles after iframe loads
const customCSS = `
  [class*="BuyButton_root"] {
    background-color: #1a1a1a !important;
    color: white !important;
  }
`;
verseEmbed.applyStyles(customCSS);

Container Styling

The container <div> is styled by Verse Frame with:

position: relative;
width: 100%;
min-height: 480px; /* configurable via minHeight option */
overflow: hidden;

You can add your own wrapper styles around the container:

<div style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <div verse-series-slug="your-collection"></div>
</div>

Responsive Behavior

Verse Frame embeds are responsive by default:

• The iframe width is always 100% of its container
• Content inside adapts to the available width
• Height auto-adjusts based on content

For best results, control responsiveness through the container's width:

.verse-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .verse-wrapper {
    padding: 0 16px;
  }
}

Limitations

• CSS changes require !important to override built-in styles
• Class names may change between Verse deployments — use broad partial matches
• Some layout properties are controlled by the iframe's internal JavaScript and may resist CSS overrides
• Fonts loaded by the iframe cannot be changed via CSS alone