How to create a MySpace-style Squarespace template

Welcome to this workshop, where you will learn how to create a MySpace-style Squarespace template!

1. Download the MySpace HTML and CSS

Before we dive into the details, you'll need to download a code editor. We recommend Visual Studio Code. You'll also need to sync your code locally with the site using the SFTP extension. Once you've done that, you can download the MySpace HTML/CSS from GitHub. Here's how:

1. Go to https://github.com/omarih33/toms-myspace-page

2. Click on Code > Download Zip

3. Extract the files

4. Review the files: /css, /pictures, README.md, and index.html

2. Download the Squarespace Base Template

Now that you have the files, we can start with a Squarespace base template. A base template is a starting point for building your website. Here's what you need to do:

1. Go to https://www.squarespace.com/templates/base-template

2. Turn on Developer Mode

3. Download the template files

4. Review the files: /assets (add the pictures to this folder), /blocks, /collections, .item, .list, .conf, /Pages, /Scripts, /Styles (add your CSS files here), and Template Config

3. Update the Template Config

Next, we'll update the Template Config. The template config is important because it defines the overall structure of the website, including page layouts, navigation areas, and the order of the stylesheets. It also contains meta data such as the template name and author, which is displayed in the Template and Developer tabs. Here's what you need to do:

1. Add navigation config

2. Add a second region layout

3. Add stylesheets

4. Add custom types

4. Edit the Site.region

Now we need to paste the MySpace HTML/CSS into the site. This is important because it provides the foundation for your website. Here's what you need to do:

1. Duplicate the site.region and call it base.region

2. Delete body HTML in Site.Region and paste body HTML from MySpace index.html

3. Find and replace old filepaths

• Change /pictures to /assets

• Change /css to /styles

Once the foundation is set, we can start creating content! 

5. Create header and footer navigation

First, we need to create main and footer navigation. Here's what you need to do:

1. Create main and footer navigation

6. Use JSON-T to pull dynamic content

To use JSON-T to pull dynamic content, you need to scope into the appropriate section of JSON Data and then use curly brackets around any JSON key inside that section. For example, if you want to display a page title, you would use the following code:

{.section collection}

<h1>{title}</h1> <p>{description}</p> {.end}

Here's what you need to do:

1. Insert the site title

2. Insert the profile name

3. Insert the profile picture

7. Use Open Field Blocks for custom content

An open field block can be used when you wants to provide an area in a template where a user can add any system block and use the same LayoutEngine grid-based layout system that is used in Pages and Blog Posts. Open Block Fields are ideal for site footers and blog sidebars. This allows developers to create a more customized and unique look for their website. Here's what you need to do:

1. Insert open field blocks

8. Add the blog collection

Blogs are important for sharing news and updates. Here's what you need to do:

1. Add a blog

9. Add a friend collection

Friend collections allow you to showcase your friends on your website. Here's what you need to do:

1. Add a custom friend collection

10. Create CSS Tweaks

Finally, we'll make the CSS editable so you can customize the look and feel of your website. Here's what you need to do:

1. Make the CSS editable

Congratulations! You now know how to create a MySpace-style webpage using a Squarespace base template. If you're interested in learning more, there are plenty of additional resources available. Don't hesitate to ask questions or share your creations with others!