SQUARESPACE TEMPLATE

I'm a big fan of the Squarespace platform, and wanted to make it work for webcomic artists. This site is built with the template, so it can do everything you see here and a bunch more. I'm putting up the template here for free, because I'd like to see more people use the platform for webcomics in general. If you are unaware of Squarespace, check out their site to get a better grasp of what you can do with it.

DISCLAIMER

First of all, to make the template fit your specific needs, you are probably going to want to know a little HTML and CSS. If you want to have complete control over your template's look and feel, you'll have to know how to make styles changes, and if you want to adjust the template structure you'll have to know some HTML. Not a lot, but enough to understand the basics of building a webpage. While it is possible to make a website with this template without touching a line of code, unless you are willing to do a little CSS, you're stuck with a lot of the style defaults I've chosen. This is the only documentation for this template, so I'd recommend it to people who aren't afraid of getting their hands a little dirty with HTML and CSS. The good news is that that's all you really need to know.

Also, this is built off the Squarespace platform, so you need to be ok with their pricing plans. This template requires the developer platform, so you need to at least use be on their Professional Plan.

Still interested? Ok.

Getting Started

The first thing you're going to do is sign up for the Squarespace developer trial. It's free and only requires an email address, so don't worry about getting charged before you've decided if the template will work for you. Go here and follow the instructions to set up your developer account. Choose the Blank Slate template.

Once you have followed all their steps (don't forget to set your site to developer mode), you will use either GIT or SFTP to access your template files on the Squarespace server. This tutorial covers SFTP, but if you prefer GIT, feel free to use that. 

Use an FTP client like CyberDuck (Mac) or FileZilla (Windows) and follow the instructions here to set up an SFTP connection.

Once you have SFTP access, download my template files here:

NOTE: Last updated on 04/22/15

Then replace the default Blank Slate template files on the Squarespace server with the files you just downloaded and uncompressed.

Your site should look something like this when you are logged in now:

You are now ready to start customizing your site!

Single Comic Site

In the left hand menu, click the selection "Pages", then click on the plus sign next to main navigation to add a new comic page.

 

Name it "archives" or "comic" or something. Notice the Page Layout setting, we'll need this later to put in sidebars. 

Scroll down in the menu and set the URL Slug to "/comic". That is what the template's comic home page is set up to look for. 

NOTE: The url slug is the folder in your domain where your comics will be located. For example if you slug is "comic" your comics would be in:

www.yourdomain.com/comic/year/month/day/comic-title

If you want to change the URL slug to be something other than "comic", you need to go into the pages folder extracted from the template.zip you downloaded, and edit the home-comic.page file so the Squarespace query attribute "collection" is set to your custom URL slug.

Once you have the comic archive page set up. Go back to the main Pages section in the console, and click and drag to move the "Home-comic" page up from the Not Linked section to the "Main Navigation" section.

Click on the settings gear to the left of Home-comic. Rename it to "Home", scroll down to the bottom of the Configure Page, and click "Set As Homepage" You now have a comic home page with an archive! Yay!

Adding comics

Great, you have two pages with no content... Let's add some comics!

First click on your comic archive page in the sidebar, you'll see a plus sign the left of your page name to add comics. Click that and it'll bring up an Edit Post area. Give your first comic a title, and hover above the "Write here" section in the body editor. Click the insertion point and it'll bring up a box to add elements.

click on "Image" and a dialog box will open to upload a comic image from your computer. You can then add any text/images/whatever below the first image and that will be the "Comic comment" that appears below the comic image. The template takes the first image from your post body and makes that the comic, so it's important to not put any other images above the comic.

You can also add categories and tags, turn comments on/off and set the comic to be posted right away, schedule it for a specific dats, or save it as an unpublished draft. If you click the Options tab at the top of the dialog, you can add a comic thumbnail, change the post URL, change the author, or make it a featured post. If you clikc the Social tab, you can set the post to automatically cross post to whatever social media accounts you have linked. (Twitter, Facebook, Tumblr etc.) This will only occur when the post is published, not when it is saved.

 

Adding a blog

Add a blog the same way you just added a comic, except choose the "Blog" option when adding your page. A blog is optional, but most people seem to want one. Since the blog is set up the same way it is on any Squarespace site, I'm not going to go over all the possible options here.

You notice that your site is titled with "Your Site Title". Not very original. We're going to change that by going back to the main menu, clicking "Design" which is below "Pages" and then clicking "Logo & Title" You can change the title text of your page, and if you upload a logo, it will take the place of your site title. You should still give your site a title, because that's what shows up on the page tab.

Adding Custom Blocks

Squarespace has a selection of custom blocks that you can add to pages at certain edit points. This will let you add text, images, video, audio, and dozens of other block types, including pure code, so you can get as custom as you want. I've added a bunch of edit points to my template so you have plenty of places to add blocks. Let's get started by adding a blog summary to the home page, so readers can see the comic and excerpts from your most recent blog posts on one page. in the side menu, click on the "Home" page and scroll down to the bottom. When you hover an edit point will appear for "Region #blog-summary". Click on the edit button and you'll see the page change over to editing mode with "Save" and "Cancel". Click one of the edit points, and add a "List" summary.

Then choose your blog as the source for the summary, and edit the display and layout tabs to your specifications.

Customizing Look and Feel

Easy mode (no code)

Go back to the main menu and select "Design" under "Pages". Then click "Style Editor" and it will bring up a selection menu for editing style options for various elements on the pages.

I'm not going to go through all of them here, but they are labeled pretty descriptively, so play around with them and go to town!

Hard MODE (custom css)

If you want complete style control, SFTP into the styles folder of your template, and edit the custom.less file. The file is automatically appended to the base.less file and is run through a LESS pre-processor to make the site.css file your site uses. If you are unfamiliar with LESS you can just write your edits in regular old css, it'll work just the same.

NOTE: There are a couple of style property tweaks that affect the layout of certain pages. You can customize the buttons in the comic navigation, whether the archives are a grid or list, whether the archives have a sidebar, etc. They are labeled to describe their function.



Using Sidebars

Squarespace lets you create multiple page layout options for each page. I've set up a right and left sidebar option so you can have a place to add some ads, tag clouds, social media blocks etc. We are going to add a sidebar on the archives page to allow for a search bar and a date picker.

First go to your achive page, and click the cog icon to enter the configuration settings. Change the Page Layout to "Right Sidebar" and click "Save".

add-sidebar-1.jpg

Now you'll see a light grey sidebar on the archive page with an editable region called "#comic-sidebar". Click edit and add a content block for "Search" and one for "Calendar".

Great, now you have an archive with a search and date picker options! You can also add a month list, tag cloud, featured posts summary, etc. This sidebar is now on all pages in the comic archive, including the individual comic pages. You probably don't want this, so I've made it so you can hide the sidebar on the individual comic page in a setting in the style editor under "Sidebar". This is also the place where you can choose the sidebar width if you want to make it larger or smaller.


Adding Advertising

Most comic sites have advertising, so supporting it is important. You can add your own ad code to your site with the "code" block in the content block editor. This Squarespace template has a responsive design, so any ads you use should also be responsive also. Google has a responsive ad format that will load an ad based on the space you have available, but I've also added a couple special helper classes that will use CSS 3D transform to scale non-responsive leaderboard ads to fit in your design. Wrap your google ads (or any 728x90 sized ads) like this:

<div class="leaderboard-ad-holder google-ad">
<div class="leaderboard-ad">

**YOUR GOOGLE AD CODE HERE**

</div>
</div>

and wrap your project wonderful ad code like this:

<div class="leaderboard-ad-holder project-wonderful-ad">
<div class="leaderboard-ad">

**YOUR PROJECT WONDERFUL AD CODE HERE**

</div>
</div>

Adding Sharing

Like the ads, sharing code can be added via the code content block at any edit point. Most share tools will share the URL for the current page, but on the comic homepage, you probably would rather that they share the permalink to the current comic. I've add the global javascript variables "thisComic" and "thisComicTitle" so you can customize your sharing code to allow for that. For instance, Add This custom code would look like this:

<script type="text/javascript">
var addthis_share = {"url":thisComic, "title": thisComicTitle};
</script>

I've also made a "share button" option that can be toggled on/off in the style editor under Comic Navigation if you don't want to mess with sharing code.

Managing Comments

You can turn comments on and off in the Squarespace console. Refer to the Squarespace documentation for more info

Importing Old Sites

You can import your old comic site from WordPress, Tumblr, or Blogger, and you can import a store from Etsy, Shopify, or Big Cartel. Squarespace will import a blog into the last format you created a page in, so if you want to import a blog as a comic, make sure you create a new comic page before you do it. Create a new blog page if you want to import a blog.

Multiple Comics

There is no reason you can't host multiple comic archives and comic home pages on your site. If you are like me and have multiple comics, simply add multiple comic pages in the console, and give them distinct URL Slugs. E.g. "/comic1-archive", "/comic2-archive" etc.

Then, duplicate the "home-comic.page" and home-comic.page.conf" files in the "pages" folder of the template, and rename them to suit your comic, eg: "comic1.page", "comic1.page.conf", "comic2.page", "comic2.page.conf". Then edit the .page files so that the squarespace queries are looking for the url slugs of the matching comic archives. For instance, you would edit comic1.page's code like this:

<!--SET THE COLLECTION TO YOUR COMIC URL SLUG-->
<squarespace:query collection="comic1-archives" limit="1">

After you duplicate and upload the files to the server, you will see new pages appear in the "Not Linked" section of your main console menu. Rename them and give them the URL slug you want. 

Custom Domain

Refer to the Squarespace documentation for more info on implementing a custom domain.

Updating the Template

For all intents and purposes, this template is a beta release. As I find bugs, or add new features, I'll be updating the template.zip file in the download link at the beginning of the tutorial, and I'll change the date to show when the last update was made. You can simply download the latest version and replace the files via SFTP or GIT on your Squarespace server to get the lastest fixes and features. It is important to note that if you made any changes to your custom.less or custom.js files, don't overwrite those. If you want to be extra secure, you can always get an extra free Squarespace trial dev account to install the update first to make sure it doesn't break anything on your live site.