Comments Box: Changing the size
-
Are you using the Twenty Twelve theme? My site is, and I used Chrome’s Inspect Element function to examine the code.
In the HTML (not CSS), I found the following line:
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>Which creates the text area. Changing the
cols="45"value doesn’t do anything (possibly CSS controlling the width?) but changingrow="8"to a different number allows you to change the length of the box, by adding or removing rows.You sound like you know what you’re doing, so I won’t get into detail about how to create and use Child Themes.
If using a different theme, the Styling Theme Forms page in the WordPress Codex may give insight into how themes control the comment area.
Oh Lord, I’ve managed to give them impression that I know what I’m doing! I don’t!
I am using the Twenty Twelve theme but can’t for the life of my to figure out where to change the width of the comment box.
I assumed it would be obvious from the stylesheet, but it seems to be more in depth than I first thought.
Help!
Do you know how to create a Child Theme? A Child Theme is a theme that essentially goes on top of another, as it’s “child”. You only have to add the code that you want, and it gets everything else from the parent.
Child Themes are the recommended way to make changes to themes, for boring technical reasons. You want to use them.
The Codex has an explanation on how to create a Child Theme, or you can use the excellent One-Click Child Theme plugin.
Once you have your child theme, you need to add this code to your style.css file:
#respond form input[type="text"], #respond form textarea { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 12px; font-size: 0.857142857rem; line-height: 1.714285714; padding: 10px; padding: 0.714285714rem; width: 100%; }That’s the Twenty-Twelve CSS that controls the comment box, and there’s one thing that you want to change:
width: 100%;You can change that to the size you want, for example:
width: 100px;will make a 100 pixel wide box (very small). Try different values until you get the width you desire. Hope this helps, and let us know if you have any problems.
Okay, seems kind of a messy way of making a change!!
I just assumed you could do this in the main theme without having to set up a bunch of new code…
I’ll take a look at the child theme, but I’d like to avoid that if possible.
Anyone else got any suggestions!?!?
Child Themes are essential for changing theme files — particularly for default WP themes. If you are only going to change CSS, you can instead use a custom CSS plugin such as jetpack.
If you make changes to theme files they will be erased when WP is updated.
Child Themes sound daunting, I know, but they’re not too bad, especially if you use that One-Click Child Theme plugin, as it will create all the code for you.
The big reason you want to use a Child Theme is that, when a new version of a theme (say, Twenty Twelve) comes out and you update, what WordPress does is overwrite all the old code.
So if you’ve made edits directly to the theme, they’ll be overwritten. If you’re using a Child Theme, your edits will be protected.
Once you’ve got the Child Theme (and activated it!), you can actually edit from with the WP Dashboard. Under the “Appearance” menu, there’s a link to the Editor, and you can edit from there.
Once you’re in the Editor (on your Child Theme’s style.css file), all you have to do is copy and paste the code in.
It’s fairly straight forward, and if you mess up, just switch back to Twenty Twelve while you fix it.
Okay, I literally just started using WP 3 days ago having never seen it before so this is all still a bit learning curve for me. I, in retrospect, naively just assumed you made all the updates that you wanted in the main theme and were done with that, but I guess not…
This may sound slightly dumb, so sorry if it does, but: if I install the one click child theme thingy – is it going to screw up any of the current settings I have in place? That is, what is the default code that it puts in?
Do I need to go through and change it all like font size and stuff myself???
Sorry, but I’ve not a clue how this is gonna work!
Thanks for all the help BTW, it is very much appreciated!
Andy
Don’t worry about it, Andy, we all started out knowing very little. I really believe in the power of WordPress, which is why I help people on these forums.
Just out of curiosity, do you know HTML or CSS? How about PHP? Have you used other CMS like Joomla or Drupal? Just trying to get a feel for your background knowledge.
And I do agree, it would be good if you could change more things (like box sizes) without having to resort to Child Themes, and I think that’s a long-term aim of the WordPress development team.
..
If I recall, your Child Theme won’t remember things like custom background colors that you may have set up, but you can use the “Live Preview” tool when you switch themes to get things set up. It’s hard to explain, but use it and you’ll see what I mean.
The “default code” it uses is all the code from Twenty Twelve. If WordPress needs code, it checks your Child Theme – if it doesn’t have any code for that, it falls back to Twenty Twelve.
So it’s essentially a mirror of Twenty Twelve, and you can draw on top of the reflection.
I hope this answered your question, I wasn’t 100% sure what you were asking.
Hi again,
That’s cool… I’ve installed and created a child theme now. You’re right, it did lose some stuff I set up, but those changes took me about 30 seconds to get back, so no biggie.
In terms of experience, I used to code HTML and CSS by hand, no problem, but that was going back about 5/6 years… so I’m a little rusty to say the least. PHP, not a freakin clue… never heard of the other three.
I’ve just input the code you suggested, and it certainly has worked for me, although it hasn’t quite solved the issue I thought it would. No problem though, it’s obviously something else causing it.
Guess I need to brush up on my WP CSS.
Thanks,
AndyThese are the codes for the comment list resizing :
li .comment{ width:700px !important; }Change the width to whatever you want. An you should use a child theme because all the changes made to the parent theme would be erased as wordpress need a default theme to switch if the theme in use is not working or there is a mistake in the theme 🙂
- The topic ‘Comments Box: Changing the size’ is closed to new replies.
(@symptomlesscoma)
11 years, 2 months ago
Hi
Please can someone tell me how to change the size of the comments box? I’ve looked through the style.css file and the comments.php file, but can’t seem to find anything that would control the size of the box.
I suspect I’m just being dumb and I’ve managed to overlook it, tired eyes and all that, but if someone could let me know, that’d be great!
Thanks,
Andy