D
D
DappFactory
Search
K

Customization

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 Form 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

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

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

Both Form as well as Button components accept a prop customGradient : string to customize the gradient styles present throughout the component
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;