Manifold
Manifold for Developers
Manifold for Developers
  • Introduction
  • Shopify Merch Bridge
    • Overview
    • Tutorial
      • Step 1: Product Gate Setup
        • 1.1: Configure the Product
        • 1.2: Install Manifold Merch Bridge
        • 1.2: Create a New Product Gate
        • 1.3: Link a Product to the Gate
        • 1.4: Add Rules
      • Step 2: Store Theme Setup
        • 2.1 The Theme Editor
        • 2.2 Product Page Setup
        • 2.3 Cart Page Setup
    • Advanced Configuration
    • FAQ / Error Help
    • Reference
      • Product and Gate Configuration
        • Shopify Products
        • Product Gates
          • Gate Products
          • Rules
      • Custom Themes
      • Updating to the Latest Version
      • UI Configuration Options
      • Advanced Usage
      • Common Issues
  • Guides
    • Getting Started
    • HTML
    • React
    • NextJS
    • Vue
    • Wix
    • Squarespace
      • Simple Squarespace Site
      • Customised Squarespace Template
  • Resources
    • Apps
      • Grant Types
    • Widgets
      • Directory
      • Manifold CSS Variables
        • Scheme Utility Classes
        • List of Manifold CSS Variables
      • Connect Widget
        • Blockchain Interaction
        • Wallet Authentication
        • Data Client
          • NFT Information Retrieval
            • getNFT
            • getNFTsOfOwner
            • ownerHasNFT
            • getCollectors
          • Data Storage and Retrieval
        • Advanced Configuration
        • Customization & Styling
        • Automatic Error Handling
      • Campaign Widget
        • Campaign Creation
          • Questionnaire
        • Campaign Progress
        • Customization & Styling
      • Curation Widget
      • Marketplace Widgets
        • Widgets
          • Data Attributes
          • Layout Widgets
          • Card Widgets
          • Listing Widgets
        • Window Events
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 3.2.1 - CSS Selector Changes
          • 3.1.1 - CSS Selector Changes
      • Claim Widgets
        • Widgets
          • Data Attributes
          • Complete Claim Widget
          • Buy Button Only Widget
          • Mint Count Widget
        • Troubleshooting
        • Customization & Styling
        • Version Change Notes
          • 1.7.0, 1.7.1 - CSS Selector Changes
      • Restricted Token Widget
        • Customization & Styling
      • Wallet Identity Widget
        • Customization & Styling
      • Subscription Widget
      • 6551 Display Widget
    • Manifold Ethereum Provider
  • Tools and APIs
    • Merkle Tree Tool
    • Snapshot Tool
    • Discord Tools
    • Server-Side Session Authentication
      • Signature Grant
      • Authorization Code Grant
  • Smart Contracts
    • Manifold Creator
      • Contracts
        • Creator Core
          • Common Functions
          • ERC721 Functions
          • ERC1155 Functions
        • Extensions
          • Extensions Functions
          • Extensions Examples
          • Extensions Deployment Guide
            • Dynamic NFT Extension
            • Lazy Mint Extension ERC1155
            • Lazy Mint Extension ERC721
        • Mint Permissions
          • Mint Permissions Functions
      • Prior Versions
        • 1.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
        • 2.0.x
          • Creator Core
            • Common Functions
            • ERC721 Functions
            • ERC1155 Functions
          • Extensions
            • Extensions Functions
            • Extensions Examples
            • Extensions Deployment Guide
              • Dynamic NFT Extension
              • Lazy Mint Extension ERC1155
              • Lazy Mint Extension ERC721
          • Mint Permissions
            • Mint Permissions Functions
    • Marketplace
      • Identity Verifier
    • Royalty Registry
  • Contact Us
Powered by GitBook
On this page
  • Manifold CSS Variables
  • Marketplace-Specific CSS Variables
  • Floating Action Buttons (FAB)
  • Loading Screens
  • Popups
  • Other
  1. Resources
  2. Widgets
  3. Marketplace Widgets

Customization & Styling

Last updated 2 years ago

Marketplace widgets have simplistic dark and light mode styles. By default, it renders according to the end-user's preferred OS colour scheme. The widget can be easily stylized by changing the appropriate Manifold CSS Variables.

Manifold CSS Variables

This section assumes you have basic HTML and CSS knowledge.

You can also customize Marketplace widgets using the Manifold CSS variables.

The full list of variables can be found .

Marketplace-Specific CSS Variables

On top of the base Manifold CSS variables, Marketplace widgets offer a list of variables to simplify customization. These are located under the .m-marketplace scope.

Floating Action Buttons (FAB)

  • --m-marketplace-fab--size--primary: size of primary FABs. Defaults to 50px.

  • --m-marketplace-fab--size--secondary: size of secondary FABs. Defaults to 40px.

  • --m-marketplace-fab--size--popup: size of FABs located in popup overlays. Defaults to 2rem.

  • --m-marketplace-fab--color--text: text colour for FABs.

  • --m-marketplace-fab--color--background: background colour for FABs.

  • --m-marketplace-fab--color--hover: background colour for FABs on hover.

Loading Screens

  • --m-marketplace-loading--color--values: comma-separated HSL value. Read by --m-marketplace-loading--color--background and --m-marketplace-loading--color--overlay.

  • --m-marketplace-loading--color--background: colour for full-screen loading screens. By default, reads --m-marketplace-loading--color--values as an HSL value.

  • --m-marketplace-loading--color--overlay: colour for loading overlays. By default, reads --m-marketplace-loading--color--values as an HSL value and sets the alpha channel to 0.5.

Popups

  • --m-marketplace-popup--color--background: colour to dim the elements behind the popup.

  • --m-marketplace-popup--color--button: colour for buttons in a popup.

  • --m-marketplace-popup--color--button--hover: background colour for popup buttons on hover.

  • --m-marketplace-popup--color--button--text: text colour for popup buttons.

Other

  • --m-marketplace-bid-overlay--padding: padding value for the bid overlay screen. Defaults to 80px for screens wider than 525px and 30px for screens less than or equal to 525px in width.

  • --m-marketplace-overlay--color--border: colour for the surrounding border on overlay screens (m-layout-bid-overlay).

  • --m-marketplace-input--color--background: background colour for input fields.

here