Design Kit Presettings

Once you have downloaded Onyx files and unzipped them, you will notice that the files are all organized by folders, to make it easier to find and use the different elements we’ve created for you. All of the files included will help you setup the Onyx demo on your Squarespace, as well as customize elements to personalize the theme, which is covered in the article Adding Personal Content.

For this step you need to find the Style Kit folder and open the Style Kit.png file, which is a style guideline. The first step to setup Onyx is to stylize the fonts and combination of them that you will use across the site pages: H1, H2, H3, Quote, and Normal (or also known as body text), as well as header and footer styling, buttons styles.  For this we will have to create first an unlinked page in your Squarespace in order set these styles. The benefit of starting with this step is that all the styles will automatically be applied whenever we create Onyx pages, so we won’t have to repeat the style setup for each page separately. Which is great, as it means less work for you!

Follow the link below to create the Style Kit page. PASSCODE: onyx. 

Styling Process

Once you’ve setup the Style Kit page, you can now apply the styling for each element. In the Style Kit png, you will find screenshots of settings for each element.

To apply the styling follow the video. PASSCODE: onyx. 

If you need to create dropdowns in your header menu follow the instructions described in this article: https://support.squarespace.com/hc/en-us/articles/205813818

Footer

One area that is carried across all pages is your footer, which you will also setup at this stage, so that you don't have to worry about it any longer. Follow the video. PASSCODE: onyx.

Header Settings

Now that you are familiar withe the styling process, you can simply apply the Header Settings based on the screenshots below: