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-color: var(--manifold-theme--color--primary);
    width: 100%;
    height: 100%;
    margin: 0 auto;
    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: var(--manifold-text--color--primary);
      text-align: center;
      font-size: 10.5px;
      text-transform: uppercase;
      text-overflow: ellipsis;
  
      &:only-child {
        margin: 0 auto;
      }
    }
  
    &:hover {
      cursor: pointer;
      filter: brightness(0.9);
    }
  
    &:disabled {
      background: #e5e5e5;
      box-shadow: none;
      border-bottom: none;
      pointer-events: none;
  
      span {
        color: #999;
      }
    }
  
    &.success {
      background-color: var(--manifold-theme--color--success);
      border-bottom: 1px solid #4c4;
  
      span {
        color: white;
      }
    }
  
    &.error {
      background-color: var(--manifold-theme--color--error);
      border-bottom: 1px solid #c44;
  
      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>

Manifold CSS Variables

The campaign widget has 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.

This section assumes you have basic HTML and CSS knowledge.

You can also customize the identity widget using the Manifold CSS variables.

The following list of variables are those that have an effect on the identity widget:

• --manifold-text--font-family--body: sets the font-family of the widget.

• --manifold-text--font-size--body: sets the font-size of the widget.

• --manifold-text--color--body: sets the interior text colour.

• --manifold-page--color--background: sets the background colour of the widget.

• --manifold-element--color--background: sets the background colour of the form inputs.

• --manifold-theme--color--primary: sets the colour for the "Submit" and "Edit" buttons.

• --manifold-theme--color--secondary: sets the colour for the eligible token and already redeemed tabs.

• --manifold-text--color--primary: sets the inner text colour for the "Submit" and "Edit" buttons.

• --manifold-text--color--secondary: sets the inner text colour for the eligible token and already redeemed tabs.

• --manifold-border--color: sets the line colour between cells in the Edit form.