LogoLogo
NFTEmbedGravitonHelp
  • 🖼️NFT Embed
  • Intro
    • 🤔What is NFT Embed?
    • 🔢How to use NFT Embed
    • 🎛️Embed Features
    • ❓FAQs
  • Custom Styling
    • Using Custom Styles (CSS)
    • Fonts and Colors
      • Fonts
      • Colors
    • Spacing and Orientation
      • Padding
      • Margins
      • Alignments
    • Code Examples
      • Full Code with Comments
    • Tips for Customization
  • Details
    • ⚙️Features
      • 🧑‍⚖️Auctions
      • 🧑‍🎨Collections
      • 🤝Finders Fee
      • 🏪Marketplace
        • Collection Royalties
      • ⚛️React SDK
    • 🧰Implementations
      • 🔳SquareSpace
      • 🔡WebFlow
      • 🛍️Shopify
  • Resources
    • 🛠️Tools
    • 🙋Support
  • 📩Contact Us
  • 🧲Graviton
  • 🎨NFT Embed
Powered by GitBook
On this page

Was this helpful?

  1. Custom Styling
  2. Code Examples

Full Code with Comments

Below you'll find a breakdown of a handful of lines of code that get used when making the NFT embed look so beautiful! Of course, the code explained below is a mere fraction of what goes on behind the scenes. These powerful lines empower our users to host NFTs how and when they want.

custom css for nft embed
{
  "general": {
    "color": "black",
    "background": "linear-gradient(170deg, #bceb00 15.57%, #00eaea 84.88%)", // the linear color change in the background of the embed
    "borderRadius": "20px",
    "height": "100%"
  },
  "metadata": { // metadata properties box = MPB
    "backgroundColor": "black", // the color of the MPB
    "fontSize": "12px", // the size of the font in the MPB
    "color": "white", // the secondary font for the MPB
    "margin": "0.2rem", // space around MPB borders
    "padding": "0.3rem", // space between MPB content and borders
    "textAlign": "center", // the font location inside the MPB
    "border": "1px solid white", // the border around the MPB
    "borderRadius": "10px" // the radius of the box corners around the MPB

  "asset": {
    "borderRadius": "10px", // the radius of the box corners of the NFT
    "padding":"10px", // space between NFT content and embed borders
    "border": "10px solid pink" // border around NFT
  }
}
PreviousCode ExamplesNextTips for Customization

Last updated 2 years ago

Was this helpful?