[twenty eleven] Need help making comments wider
-
So are you saying that you want the entire content section to be wider? (That’s really the only way to make the comments section wider without making a mess of the layout…) If so, that becomes quite complicated as you will then need to change width and margins on many other elements on whichever templates you are using. Do you want the change to be site-wide or only on the page you linked to?
On that page, the content width / margins are set here:
#content { margin: 0 34% 0 7.6%; width: 58.4%; }So you could copy the above code to your child theme and make changes. But you’ll then likely need to also change this:
#secondary { float: right; margin-right: 7.6%; width: 18.8%; }A great tool for working with CSS issues like this is Firebug…as it shows you which CSS is affecting a specific element on the page and allows you to test changes in the browser before making them in the actual theme code.
Wpyogi, thanks for your answer!
Yes, I do want this change to affect the entire site (every single post). Simply I want the comments to look exactly like here, i.e. to be as wide as content (not wider to not to mess with the side-bar). Compare it to the comment section at my page here, and you’ll see the difference.
I must say that I’ve added some styling to my child-theme css from this tutorial about adding side-bar to every post. It helped me to widen the post content and get rid of plenty of white space, but hadn’t affect the comments. I guess the whole point of this tutorial was to make content wider, leave place for the side-bar, but not mess with it. So is it not possible to make comments exactly as wide as the content above them? Here is my entire css. I hope it helps.
I added your code, but for some reason it didn’t affect anything.
I know about firebug, it helps sometimes, but this styling is too complicated for the not so experienced person like I am.Okay, I did not clearly see the problem on your site because there are no comments on the page you linked to – but I went to another page and found some. So it looks like what you need to add to the child theme styles.css file is this:
#respond { background: none repeat scroll 0 0 #FFFFFF; width: 100%; }The background will get rid of that grey that you mentioned initially as well.
See if that does what you want :).
Wpyogi, thanks! It helped widen the respond. Also I added
#respond{ border: medium none; }to get rid of the border.
But what about the existing comments (there are two at the page I linked, and I don’t know why you don’t see them)? They should be the same width.
I’ll try to customize it myself, but any help is much appreciated.Are comments enabled on that page? Looks like they may not be.
Wpyogi, they are enabled! I’ve just checked. I have only two posts and comments on both of them are enabled. I don’t know what it could be. I’m also looking at them right now through chrome – my default browser, and firefox with firebug, where I’m not logged in to the site.
That’s the default behavior of twentyeleven — to change it, you’ll need to modify the php file — this thread explains the changes:
http://wordpress.org/support/topic/theme-twenty-eleven-show-all-comments-on-home-page?replies=8
But make sure to make a new template file which should go in your child theme.
I’m sorry, but I don’t get it. I don’t want comments to be seen on home page. I like the way it is right now, i.e. to see the comments one should open the post. And as I’ve said I can see them. I’ve even checked in Opera.
So I gave you a link to the certain post: http://mental-notes.ru/blog/2012/11/20/first-post-ever/. Do you not see two comments there?Okay, sorry if I’m confused. Yes, that page has comments. The narrower width is set here:
.commentlist { list-style: none outside none; margin: 0 auto; width: 68.9%; }But as you’ll see, if you change that width, it may start moving other parts around. Comments are coded as lists, so they automatically get progressively narrower as more are added — is that the question?
Wpyogi, I’m glad we’ve figured that out. This .commentlist width is only a tip of the iceberg.
I already see, that to make default twenty eleven comments look exactly like in the example I’ve posted (and that is what I want to see in the end), I should change a lot! Even the first level avatar’s sizes are changed. Oh, well.
I guess, I’ll proceed to code it myself. I’m starting to dig that firebug.
Thank you for your help anyway.Ok, I’ve made it more or less. Here’s the styling. Also 1st level avatar size should be changed to 39 in twentyeleven_comment() in functions.php (copy-paste it to child-theme functions.php and change one single “68” to “39”).
Cookowl, which child theme did you add that to? style.css? I tried adding your code to my style.css (child theme) but it didn’t do anything.
I am trying to tighten up the comments section on my single posts (like at the bottom of this post) so it’s not so spread out. This thread is one of the few I’ve found re: how to modify the Twenty Eleven comments section.
Hey Erica,
Your comments are mostly styled by the “spam free wordpress” plug-in, so that’s probably why the code above did not work… What is it that you want to do??Nice blog, BTW. Love the Mt. Whitney posts especially — I was down there this past July — shuttling a car for some friends who did the entire JMT (Yosemite Valley to the top of Whitney — they spent their last night on top) in 6 days — yow!
Erica, I added that to my child-theme, located in wp-content\themes\twentyeleven-child. I’m fairly new to css, and I don’t know in what order are multiple css implemented. Sometimes adding “!important” helps. Like here:
h1.entry-title{ font-size: 22px !important; font-family: Georgia, Times, serif !important; }It raises the priority.
But I guess adding “!important” to everything is not a good coding, so probably you need to look for better solution.
- The topic ‘[twenty eleven] Need help making comments wider’ is closed to new replies.
(@cookowl)
11 years, 5 months ago
Hi, everyone!
I need help customizing this site: mental-notes.ru
I want to make comments wider, I guess 100% of content area (excluding side-bar). Specifically, I want it to look like this.
Also as in the example I’d probably want to remove grey frames around comments.
I’m using child theme, so no problem here.
Thanks!