Friday

Diggnation LIVE + Internet Week

On June 1-8, all the tech geeks descend on NYC for a week long celebration of everything world wide web: it's Internet Week NY '09!

Needless to say, Squarespace is going to be front and center, soaking up all the geek action we can get our hands on. And most everyone who's anyone would agree that the biggest, baddest, geekiest event of the week is going to be Revision3's Live Diggnation taping at Webster Hall on Thursday, June 4.

Here are the details:

June 4

7:30pm

Webster Hall

125 E. 11th Street

You're coming, right?

You can RSVP on either Facebook or Meetup and, trust us, you do not want to miss this!

Squarespace will be co-sponsoring this kickass event and, we're seriously pumped to hang with Alex, Kevin and a couple thousand of our favorite Diggnation fans.  

We'll have the whole Squarespace crew, and loads of other fun surprises, so please come by and say hi!

Tuesday

Squarespace Hack: Google Analytics

While we all love the Squarespace statistics that can be accessed from our Website Management dashboard, many users still like to concurrently keep track of their site's traffic with Google Analytics.

If you'd like to implement this on your own site, here's how:

After setting up an account with Google Analytics and generating your unique tracking code, the key to accurate stats is ensuring that the code is installed on ALL of your Squarespace pages. Now, this doesn't mean that you need to manually install the code on each and every one of your pages one by one.

The Squarespace Manual offers the following bit of scoop:

You add the code directly to your footer, which can be accessed on any page on your site in Content Mode by clicking on "Edit Website Footer."

Finito!

Your unique code will now appear on every current AND future page of your Squarespace website!

P.S. In case Google Analytics isn't your thing, this hack will work for any other bit of statistical tracking code as well.

Friday

Unique Identifiers

A little known fact about your Squarespace site is that every page has it's own unique identifier. Sounds great right, but what can that do for me you ask...

If you view the source ( option+command+u in safari or in the top menu, view > view source or if you have developer tools turned on, you can right click and inspect, anyway....) you will see at the top of the page a little something like this:

 

<body id="modulePage2574191" >

 

modulePage2574191 is the unique identifier for this page only, all others have a different number. With this little number you can do some really cool stuff. For instance, if you had a style set up on your site with a giant picture of oh, I don't know, lets say the word "blog" for instance. That would apply to every page, but on the about page you wanted that background image to say "about" instead of blog you could employ the help of our good old friend unique identifier. Here's how you would do that:

 

body#modulePage2574191 { background: #fff url(/storage/about.png) no-repeat top left; }

 

This can work for any element on your site, say you want h2's on one page to be completely different than all the others, you could simply do the following:

 

#modulePage2574191 h2 { font-size: 50px; }

 

Ok, so there you have it. Now you know it is there if you ever need it, hope that helps.

Monday

Squarespace on Twitter

Our snazzy new Blog is definitely a great way to keep up with all of the fun things going on in the Squarespace-a-verse, but for up-to-the-minute scoop, Twitter is really where its at.

So herewith is your guide to keeping up with all of our non-stop Squarespace Twitterverse shenanigans:

*@squarespace! You can follow us here now too. We'll include any general Squarespace announcements, fun upcoming news, and alerts about new blog posts.

*@acasalena is our Founder...and one of the few people on Twitter who actually liked their new proposed @ policy. Also, he seems to attract falling buildings.

*@daneatkinson is our CEO. And he has a very adorable dog named Freya who keeps us all company at the Squarespace office.

*@davinchew is our Director of Engineering...and he is seriously considering joining the hamburger-of-the-month club. He's also fascinated by the wild world of tugboats.

*@tyler_thompson is our Creative Director. He has some pretty strong opinions on mostly everything--but especially on well-designed and poorly designed things (potty mouth warning).

*@snookca is our Lead Developer. He always offers up some excellent marriage advice and he may unfollow you if you do this whole twitter thing wrong.

*@squaregirl is our Senior Designer. She's a fangirl, a Blip devotee and might just be tweeting a NYOMFG right N-O-W.

*@joshkill is our Information Architect, but don't let his twitter name scare you--he actually doesn't kill anyone. He also wants us to look into getting branded Squarespace skate decks.

*@erica_reitman is me!--and I'm Squarespace's Marketing Director. In the brownie vs. cupcake debate, I believe very STRONGLY that cupcakes are the right answer.

Also, you should join our Squarespace Twibe! And hang out with all of the other cool Squarespace tweeple! (ok, ok...we promise to stop doing that thing now where a "TW" gets added to every friggin word. Annoying, right).

Friday

Styling Comments by Author

Awhile back, we added per-author wrapping div's so that you could style entries based on the author of the post. Along with that, we snuck out wrappers for per-author comments as well. 

In the new blog re-design, I chose to take advantage of those wrappers and am going to give you a quick write up on how to do it on your own site. 

Here is what a comment wrapper looks like that was authored by me (Tyler). 

<div class="comment-wrapper authored-by-tyler"> .... </div>

 

 For reference, if I had another author on my blog named Mark, his would be ...authored-by-mark.

 So to target my comments and style it differently, here is what I did: 

/* TYLER */

.comment-wrapper.authored-by-tyler { background: url(/storage/layout/icon-tyler50.png) no-repeat 0 8px; padding: 0 0 0 75px; } /* comments */

 

This puts my icon next to the left of my comment and pads it accordingly (see below):

 

What I did in terms of styling was really basic, but with the per author wrapper encompassing everything in the comment (signature included), you could do anything you want style-wise to just my specific comments.

For instance, if I wanted to make the actual body copy of my comment green and 30px, it would look like this:

/* TYLER */

.comment-wrapper.authored-by-tyler .body { color: #00ff00; font-size: 30px; } /* comment body text */

 

Likewise, if you want to give all unregistered commenters an icon, you can style them like so:

/* UNREGISTERED COMMENTER */

.comment-wrapper.authored-by-none { background: url(/storage/layout/icon-unreg50.png) no-repeat 0 8px; padding: 0 0 0 75px; } /* comments */

 

Hope this helps you further customize your Squarespace site with a bunch of nice little touches.

Page 1 of 2 Previous | Next »