Skip to content

Latest commit

 

History

History
85 lines (55 loc) · 3.23 KB

add-skin.md

File metadata and controls

85 lines (55 loc) · 3.23 KB
Raw
description
Learn what a custom skin is and how to use one for your space with a custom domain.

Add a skin

What is a skin?

A skin is a custom color scheme which you can use for your space if it has a custom domain set up. The customization will be visible only on the custom domain and will not affect the color scheme of your space on https://snapshot.org.

{% hint style="info" %} If you haven't setup a custom domain yet, head to add-custom-domain.md to learn how you can do it. {% endhint %}

Add a skin to your space

Head to your space settings on Snapshot and find the Custom domain section.

Select a skin by scrolling through the list of available choices or by typing the name you are looking for. If none of them work for you, you can create a custom skin following the section below: #create-a-custom-skin

Don't forget that the skin will only be applied to the custom domain URL!

Snapshot skin selector.

That's it! You should be able to see the custom color scheme for your space on its custom domain 🎉

Create a custom skin

1. Fork the snapshot-spaces repository

Create a fork of the snapshot-spaces repository:

{% embed url="https://github.com/snapshot-labs/snapshot-spaces" %}

2. Add the styling for your space

Create a new file in the skins directory following the my-space.scss naming convention:

└── skins
    └── my-space.scss

Add your custom scss to the newly created file. The class name .my-space should match the filename you created. Make sure that you edit only the values (i.e. #384aff on the right-hand side and do not change the properties (i.e. --primary-color). 

.my-space {
  --primary-color: #384aff;
  --bg-color: white;
  --text-color: #586069;
  --link-color: #111111;
  --heading-color: #111111;
  --border-color: #d1d5da;
  --header-bg: white;
  --block-bg: transparent;
}

{% hint style="info" %} Don't forget to change the file name my-space.scss and css selector .my-space to your space name. {% endhint %}

You can have a look at a custom skin example by following this link.

3. Import the scss file

Add the import of your newly created scss file to the skins/index.js file in the following format:

import my-space from "./my-space.scss";

4. Create a pull request

Create a Pull Request with the above changes on the original snapshot-spaces repo.

The review can take the team up to 72 hours, so please be patient 🙏

After the PR has been merged, you will need to wait for the release of a new version of Snapshot which can take a couple of days. Once it's deployed you can move on to the next step.

5. Update your space settings

Follow the steps from #add-a-skin-to-your-space to use your own custom skin.