DappFactory
  • Introduction
  • How To Guides
    • ERC-20 Token
    • Tokensale
    • Vesting
    • Liquidity Lockers
    • Staking Pools
    • Farms
  • Custom Development
  • SDK
    • Getting started
    • ERC20 Token
      • Create ERC20 Token
    • NFT
      • Create NFT
    • IVCO / IDO / Presale
      • Create IVCO / IDO
    • Farms
      • Create Farm Button
      • Fetch Farms Data
      • Create Farm Function
    • Staking Pool
      • Create Staking Pool Button
    • Vesting Schedule
      • Create Vesting Schedule
    • Liquidity Locker
      • Create Liquidity Locker
    • Components
    • Customization
    • Demo
  • MISC
    • Dapp Factory and CNT
      • Figma Integration
    • FAQs
      • GitHub Integration
    • Referral Systems and how they work
      • Intercom Integration
  • Extras
    • Keyboard Shortcuts
Powered by GitBook
On this page
  • Custom class names
  • Custom Gradients
  1. SDK

Customization

PreviousComponentsNextDemo

Last updated 3 years ago

You must add !important add the end of each file so that your styles take a higher precedence then ours.

Check out the example below.

Custom class names

You can customize / white-label the exported component using these specific class names

1. df-sdk-create-btn

Add CSS styles like this:

src/views/Farm.css
.df-sdk-create-btn {
  background: #0275d8 !important;
}

And import them into component page like this:

src/views/Farm.tsx
import { CreateFarm } from "@cryption/dapp-factory-sdk";
import "./Farm.css"; // imported CSS file

const Farm = () => {
  return <CreateFarm />;
};
export default Farm;

Result:

Similar to this example you can style other buttons with classes like:

2. df-sdk-next-btn

3. df-sdk-previous-btn

4. df-sdk-cancel-btn

5. df-sdk-confirm-create-btn

6. df-sdk-form-container

src/views/Farm.css
.df-sdk-form-container {
  background: #0275d8 !important;
}

7. df-sdk-card-container

1. df-sdk-single-btn

src/views/Farm.css
.df-sdk-single-btn {
  background: #ffffff !important;
  border: 2px solid #0275d8 !important;
  color: #0275d8 !important;
}
src/views/Farm.tsx
import { CreateFarmButton } from "@cryption/dapp-factory-sdk";
import "./Farm.css";

const Farm = () => {
  return <CreateFarmButton />;
};
export default Farm;

Custom Gradients

Eg:

src/views/Farm.tsx
import { CreateFarm, CreateFarmButton } from "@cryption/dapp-factory-sdk";

const Farm = () => {
  return (
    <>
      <CreateFarmButton
        title="Create new Farm"
       customGradient="linear-gradient(to right, red, yellow)"
      />
      <CreateFarm customGradient="linear-gradient(to right, red, yellow)" />
    </>
  );
};
export default Farm;

You can customize / white-label the exported component using this class.

Both as well as components accept a prop customGradient : string to customize the gradient styles present throughout the component

Form
Button
Form
Button