New York Dribbble Meetup

Dribbble is our morning cup of coffee.

Each day our design team pokes through Dribbble, sharing beautiful shots with each other, finding inspiration in UX elements, iconography, print layouts, 3D design and more. We love Dribbble for the instant feedback we receive on our work, for the always enthusiastic community of designers, and for the powerful interface and experience.

What's more, Dribbble is a wonderful place to identify unique talent. We're incredibly lucky to be adding three new members to our design team this summer, all of whom we discovered on Dribbble.

Here at Squarespace design and technology are given equal weighting. Respecting design is core to our culture, so hosting the NYC Dribbble Meetups couldn't make us happier. The more designers we all can reach and interact with, the better each of us becomes.

We are thrilled to host the first NYC Dribbble Meetup on Wednesday, June 15th at 7PM. Please join us for an evening of networking, demos & showcases, and refreshments. RSVP here so that we'll know how many new friends to expect, and be sure to drop us a line if you'd like to be added to the demo list. We are located at 459 Broadway (entrance on Grand Street behind the drug store), on the 5th Floor.

We look forward to meeting you! In the meantime, check out our team on Dribbble here, here, here, here, and here.

Squarespace's 2009 Holiday Party

Please join us Thursday, December 10th 2009 at 7:30PM to celebrate a new year -- and our new office --at our Squarespace Holiday party (open bar included!).

You'll be able to document the night's shenanigans in our "un" photo booth, rock out with our new Rock Band set up, and join in for some other surprises.

Feel free to invite friends and RSVP so we know who's coming. 

459 Broadway, 5th Floor
(entrance is on Grand Street)
New York, NY 10013 

Advanced Customizations

Since launching the new manual a few weeks ago, we noticed the need for more advanced walk-throughs on customizing modules.

Josh jumped on the case, and took to creating a bunch of working examples of our most requested customizations for the photo gallery and journal modules. These sites are live examples, with the exact configurations and CSS you'll need to achieve them. We plan on adding more of these for other modules in the future, to help people achieve some cool, more advanced things with their Squarespace sites.

If you feel like diving into some Custom CSS, jump on over and see the different options you can set up for your Squarespace site.

Journal Customizations

Photo Gallery Customizations

Creating a Splash Page

Ever wish you could work on your Squarespace site in peace, and do things behind-the-scenes without people visiting your site and seeing your progress before you're ready?

I am going to show you how to throw up a quick "under construction" splash page, so you can get down to business without anyone peeking at your goods. ( You will need an advanced account or higher for this )

1. Click into Style Editing Mode ( the paint brush )
2. Click "Template" and then click the little "Copy" link on one of the styles in that template.
3. Then name that new style "Under Construction" via the "Advanced" tab.
4. Click "Banner & Navigation," and choose the One Column option. Choose  the no top navigation option below that (they are both the furthest left options), and hit "Save." You can also change the width of the column at this point too, if you have a graphic that you want to match it up with.
5. Click "Website Management" in the upper left of the window to pull up the admin menu, and choose "Architecture."
6. Then, in one of your existing navigation sections, add a "Basic HTML" page and name it "Under Construction." At the bottom of the menu, you will see a drop down called "Style Override" -- drop it down, and choose your newly created "Under Construction" style. Hit "Save."
7. Now, hover over your "Under Construction" page and click "Configure."You will see the same menu, but at the very bottom again, click "Set as Front Page." This makes the newly created "Under Construction" page your homepage.
8. Now you can go to that page and type your message or add an under construction image. By choosing a one column layout with no top nav options, there will be no nav bar showing.
9. (Optional) If you want, you can even hide the header and footer, so that only your message is visible and nothing else. To do this, make sure you have the current "Under Construction" style enabled and jump back to "Style Editing" mode. Go to "Custom CSS" and type the following:

#pageHeaderWrapper, #pageFooterWrapper { display: none; }

Welcome to super stealth mode.

Now for the rest of your pages, you will want to apply a different style so that you can change things without it affecting your under construction page.

Hope that helps! Feel free to chime in if you have a different and or better work-flow for this.

Positioning Comments

I got a slew of emails when I launched www.newtoyork.com asking about how I moved the comments to the right of my blog instead of the default location below the content. I will give you a quick overview of how to achieve what I did on www.newtoyork.com, and from there you should be able to take things anywhere you want.

So first, you need to determine how wide your content area is. On www.newtoyork.com it is 500px wide. You can find this by going into Style Editing Mode > Banner & Navigation > Change Widths > Content. Once you have that number drop in this little chunk of code into your custom CSS area.

.journal-add-comment-area-wrapper { position: absolute; top: 315px; left: 565px; width: 400px; }

Since my content area is 500px wide I position the .notice-box 565px from the left edge, leaving 65px of a margin between the content and the comments. This is where you would plug in your site's width, and then add whatever margin to the total to achieve what you are looking for. I am also positioning it down to align and then specifying a width for it.

So that will pull up the text-area and comment generation area, but the actual comments themselves are still below the content. Next, add this chunk of code to your custom CSS.

.journal-comment-area-wrapper { position: absolute; top: 970px; left: 565px; width: 400px; }

This is bringing the actual comments themselves over. The thing you have to do here is make sure you position them down from the top enough to clear the add comment wrapper, which is why my top position is 970px. You can leave the left position the same.

I really like how it looks when the comments section is up right next to the content and not hiding below the content--it seems to encourage people to actually comment.

Hope this helps open up some more custom designs from all of you in the future.