Top
Location

Built
squarespaceThis little baby was pushed through the interwebz birth canal by the gentle hand of Dr. Squarespace, and lots of heavy, heavy breathing.
Twitter
Follow me on Twitter.
Tuesday
06Oct2009

Unique Identifiers

DateTuesday, October 6, 2009 at 04:39PM
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.

Thursday
01Oct2009

Creating a Splash Page

DateThursday, October 1, 2009 at 09:14PM
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:

    10.  

    #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.

Thursday
17Jul2008

Positioning Comments

DateThursday, July 17, 2008 at 04:37PM
I got a slew of emails when I launched www.iam.squarespace.com asking about how I moved the comments to the right of my blog instead of the default location below the content. Below, I will show you just that.

So first, you need to determine how wide your content area is. On www.iam.squarespace.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.