Manifold for Developers
Search…
⌃K
Links

Customization & Styling

Optional Widget Customizations

Additional button settings are available out of the box by specifying the following props. Add these in the HTML component covered in the Installation page like so:
<div
data-widget="m-campaign"
data-campaign-id="<your campaign id>"
data-client-id="<your app client id>"
data-app-name="<your app name>"
data-network="<your desired network's chain id>"
data-connect-wallet-text="desired text"
data-claim-text="desired text"
data-inner-claim-text="desired text"
></div>
Here are the available button text modification props:
  • data-connect-wallet-text - This is the text shown on the "Claim" button before it is clickable when there is no web3 wallet connection. Currently this defaults to "Connect Wallet" though can sometimes be confusing when implemented as a button. Use this prop to modify it to whatever you'd like.
  • data-claim-text - This is the text shown on the "Claim" button when active (e.g. when web3 wallet is connected). Use this prop to modify to whatever you'd like
  • data-inner-claim-text - This is the button text shown in the widget once an NFT is selected to start the claim process. Currently this defaults to "Claim Here" (see screenshot below). Use this prop to modify it to whatever you'd like

Styling

The Campaign Widget can be styled as desired by modifying the below out-of-the-box SCSS to suit your project. Primary elements are defined below. When building a full custom campaign widget flow be sure to inspect all available elements for other classes within the flow you may like to custom style.
// Out of the box campaign widget styling
<style lang="scss">
@import "@/scss/_reset.scss"; /* Manifold's opionated reset */
.m-campaign-button {
background-image: linear-gradient(45deg, rgba(50, 50, 200, 0.8), rgba(55, 55, 180, 0.8));
background-color: rgba(50,50,200, 1);
width: 100%;
height: 100%;
margin: 0 auto;
border-bottom: 1px solid #4444cc;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
transition: all 0.5s;
display: flex;
justify-content: space-between;
align-items: center;
span {
color: white;
text-align: center;
font-size: 10.5px;
text-transform: uppercase;
text-overflow: ellipsis;
&:only-child {
margin: 0 auto;
}
}
&:hover {
cursor: pointer;
background-image: linear-gradient(45deg, rgba(70, 70, 220, 0.8), rgba(80, 80, 200, 0.8));
background-color: rgba(50,50,200, 0.5);
}
&:disabled {
background: #e5e5e5;
box-shadow: none;
border-bottom: none;
pointer-events: none;
span {
color: #999;
}
}
&.success {
background-image: linear-gradient(45deg, rgba(50, 200, 50, 0.8), rgba(55, 180, 55, 0.8));
background-color: rgba(50,50,200, 0.5);
border-bottom: 1px solid #44cc44;
span { color: white; }
}
&.error {
background-image: linear-gradient(45deg, rgba(200, 50, 50, 0.8), rgba(180, 55, 55, 0.8));
background-color: rgba(50,50,200, 0.5);
border-bottom: 1px solid #cc4444;
span { color: white; }
}
&.button-loading {
background-image: linear-gradient(45deg, rgba(40, 40, 150, 0.8), rgba(45, 45, 120, 0.8));
background-color: rgba(50,50,200, 0.5);
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
padding: 0 10px;
span {
text-align: left;
}
}
}
</style>