Blog

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.