T. ThompsonPositioning 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.
Reader Comments (10)
Good little write up Ttwice. I'd like to see more of these, with a bit more advanced tweaks.
Interesting. But why aren't the comments to the side on this post, which is about putting comments to the side?
@shon - Thanks, I will try to keep them coming.
@Wayne - I would then have to change the entire design of our blog...doesn't really make sense. You can see it in action here if you want: www.newtoyork.com
i am totally confused, for us begginers can you expain or help me beter?
im confussed can you expain starting from start to finish.
Slightly different, flexible way to put your comments to the side. Will automatically adjust to changes in content width.
You can copy-paste everything below into your templates Custom CSS:
/* using percentages to leave a 6% gap between post and comments, adjust accordingly to widen or shrink gap */
.single-journal-entry-wrapper { float:left; width:47%; }
.journal-comment-area-wrapper, .journal-add-comment-area-wrapper { float:right; width:47%; }
/* also good to edit the comment entry box so it doesn't go crazy wide */
textarea { width:99%; }
awesome! what is the best way to handle the page expanding with the comment boxes?
Also, is there an easy way to "clean-up" the comments box? I really like how clean it is on your site www.newtoyork.com
Really nice idea to use comments!!! Thanks for sharing..
All of the high-level
[URL=http://alfacip.8m.com/chromonexin/map.html - Beast online chromonexin[/URL - [URL=http://alphagan.s5.com/tramaden/map.html - Beast online tramaden showthread[/URL - [URL=http://alkeran.8m.net/trimplex/map.html - Beast online trimplex safety tread[/URL - [URL=http://alesse.4t.com/chloromint - buy chloromint online[/URL - [URL=http://alesse.4t.com/nasal - calcitonin nasal spray[/URL -
Total good