Community

There is currently no general purpose SQ interface for adjusting the print stylesheet to give your content a printer-friendly layout. There is a method of doing this when configuring Journal pages, but no equivalent support for simple HTML pages.

However, I discovered that I can override the print stylesheet using Custom CSS, provided I include the !important directive to each CSS statement. For example, by adding the following statements to my custom CSS, I was able to hide sidebar1 and the footer, and reposition sidebar2, in the printed version of a site's pages.

@media print {
#sidebar1,
#pageFooter { display: none !important; }
#sidebar2 { margin-left: -25px !important; }
}

If there's more to be said about this topic, please chime in below.
--Chris

For anyone researching the topic of browser support for printing, this CSS-Discuss Wiki is a good place to start:

Printing Web documents and CSS

Craig,

If you post a link to your site, someone here can take a look at your code.

--Chris

Katherine,

You have to pick your poison -- in this case which language do you want to use to tackle your requirement. In principle, you have three options:

1. HTML: Simply design and code (using standard Squarespace features) versions of your pages that work well for printing. See (for example) this type of advice -- What is a Printer-Friendly Web Page?. For each printable page, create a new HTML page that you don't display in any site navigation, but just link from its corresponding (less printer-friendly) partner. Or you could link each printer-friendly page from its own sidebar section, and use Squarespace's selective display option to control on which page each of those sidebar sections appeared. So the link could say "Print This Page" on every page of your site, but it would link to different printable pages.

2. CSS: This is the simplest and (imo) the best approach, because it is consistent with the intent of CSS and the goal of separating the code you use to define your Web content (HTML) from the code that controls its appearance (CSS). The HTML/CSS architecture and technologies are the foundation of everything in the Squarespace product, and using CSS is (naturally) the most widely-recommended approach for creating media-specific views of Web pages. You can find dozens of tutorials online if you Google "printer-friendly CSS tutorial".

3. JavaScript: If you search for them, you can also find articles online proposing JavaScript code to accomplish what can be done with CSS. In my opinion, this could only be considered a simpler approach by people who are already familiar with JavaScript and are actively trying to avoid using CSS. And (rightly, imo) you will also find people responding to the question of How can I make a printable page using Javascript? with a recommendation to use CSS, not JavaScript. Or sometimes, to use both.

So, to sum up: In your case, you have already made an initial commitment to work with a CSS-based platform when you decided to try using Squarespace. So it makes sense to try to do it the "right" way. Ultimately (once you have designed how a site's content maps to the browser and printer views) you will save yourself a ton of extra content development work by using a CSS-based approach to implement that conceptual design. And by not creating separate "printer-friendly pages" you will avoid all the potential headaches that come with maintaining two versions of all your sites' main content pages.

And since you are not a programmer, and don't already know either CSS or JavaScript, if you want to learn how to get the most out of Squarespace it would make a lot more sense to start learning a little bit of CSS than to tackle a JavaScript solution.

This is a long answer, but since your question may be of general interest, it seemed worthwhile to spell out the thinking behind the recommendation that started this thread.
Hope this helps,
--Chris