Squarespace Hack: "Image Needed" (image replacement)

When working on templates for clients, I'm typically inserting temporary image content to get through training. 

In this case, I'm using the default Squarespace "Default Image" to show the client admin: "you need an image here"

Simply, on mouse hover, the user would see an image is needed when they see the image I've provided.

Another class could be selected to normally display the helper image, or a logo could be added to replace the default image JUST IN CASE the site is launched with this "hack" in place.

Using the Squarespace 7 Custom CSS Panel while in "DEV MODE"

This is a good thing to keep in mind, either for Developers handing-off client sites (for them to have CSS access) — or if you're a Designer who has hired a Developer to work on some advanced code in the Squarespace Developer environment, and you still want access to all or part of the template's CSS...

Fact: in "Developer Mode", you can still access the Custom CSS panel in Squarespace. 

This is handy to bring some of the styles-forward into the consumer-side of Squarespace. This can allow client access to a selection of styles. 

Additionally, this means that in "Developer Mode", any other developer can inspect the code in a browser and add his/her override classes to the CSS and add those overrides to the Custom CSS panel. 

Just know that the Squarespace Custom CSS panel code will load LAST, meaning that the overrides applied to the panel will "win" in the browser. (That's a cool bit of engineering, isn't it!?) 


This rather kludgy, unedited training video was recorded by Squareflair at the time of "development hand-off". While representative of the design and development available on the Squarespace platform, each project is unique and completely custom for each application.

Third party brands and images are copyright to their respective copyright holders. Copyright 2011-2014 Creative Component, LLC. | www.squareflair.com

Setting Up Squarespace 7 (Squarespace 6) Developer Platform with Espresso2 and LiveReload

Start styling templates locally by setting-up the Squarespace Developer platform.

In this video, I walk through setting-up the Squarespace Developer environment. This information applies to both Squarespace 6 and Squarespace 7. (Squarespace 7 is the same core CMS as Squarespace 6; the difference being that Squarespace 7 has a greatly-improved user interface. But all of the workflows are pretty-much identical between the two versions)

If you're familiar with Squarespace's architecture and HACKING the stock commercial templates with "CSS overrides", this video should help you go further in your front-end development by showing how you can do the same thing locally using MacRabbit's Espresso 2 to apply style overrides. 

What I cover here:

1. start with an existing template
2. convert the template to the Dev platform (turn-on Squarespace Developer mode) 
3. set-up SFTP on the Espresso2 app (very pleased with the app; get it here http://www.macrabbit.com/espresso/ )
4. making the connection to the site, basic template configuration, etc.


This rather kludgy, unedited training video was recorded by Squareflair at the time of "development hand-off". While representative of the design and development available on the Squarespace platform, each project is unique and completely custom for each application.

Third party brands and images are copyright to their respective copyright holders. Copyright 2011-2014 Creative Component, LLC. / squareflair.com

Intro to Squarespace Version 7: Switching from Version 6 to 7

VIDEO OVERVIEW

This is a video I recorded to hand-off to a new Web Developer who's working for me. In this video, I'm primarily showing what to expect with Squarespace's new "Version 7" update. 

You'll see I've started with Version 6, and switched-on Version 7. Not much detail to view yet, but this should be helpful to know what's coming.

WHAT'S NEW IN SQUARESPACE 7?

Basically, the difference between Version 6 & 7 is the back-end. The admin controls have been completely redesigned, and you'll soon see how great everything looks. If you're already familiar with Version 6, then you should be able to adapt very quickly to the update, because many of the design patterns are identical— or at least the workflow is very similar.

The biggest difference is the fact that there's not a "back-end" anymore. All site controls / edit functions / settings are now accessed on the front-end of the site. This difference will take a few minutes to grasp, but in my opinion, this takes very little time to learn.


This rather kludgy, unedited training video was recorded by Squareflair at the time of "development hand-off". While representative of the design and development available on the Squarespace platform, each project is unique and completely custom for each application.

Third party brands and images are copyright to their respective copyright holders. Copyright 2011-2014 Creative Component, LLC. / squareflair.com