Frequently Asked Questions:
FAQ: How to change the font size in your comments area
Nicole just left a comment asking how to adjust the font-size for her comments area. I thought that was a very good question, and one I’ve been asked a few times, so I’m writing it up here for everyone’s benefit.
There are two places you may want to change the font-size in your comments area. The first is in the area that lists how many comments and has the “show comments” and “add a comment” text, as shown below:
The second area, is the actual comments themselves, show below:
To change the font size in these areas, open up your Stylesheet in your Theme editor by going to “Design” => “Theme Editor” after loggin into your WP Admin area. Once you’re in your Theme editor, from the right-hand side choose to edit the file called “Stylesheet (style.css)”.
Scroll all the way to the bottom, put your cursor at the end of the line and press return a few times to get on a new line. Then paste in this chunk of code:
/* font size for comments area */
.meta-inner {
font-size:13px;
}
Adjust the number 13 to whatever size font you want. This will affect both of the areas I discussed above. If you’re OK with both areas having the same font size, you’re all set. Just view your blog (remember to force your browser to refresh so you can see your changes) and check your work.
If you want the font size for your actual comments (picture 2 above) to be different from the other area (picture 1 above), you’ll need to add another chunk of code, like so:
/* font size for only comments */
.meta-inner #comments {
font-size:12px;
}
Again, adjust the number 12 to whatever you want, save the changes, view your blog and refresh your browser to check your work.
Related posts:
Change comment text color,
Display comments by default,
Comments aren’t working
Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.
WOW…thanks for the prompt response. Off to try it now.
thanks for that
Hmmm…I don’t know what I’m doing wrong but for some reason, even with the following html added, my font stays the same size. There is no difference.
/*styles sidebar-footer links */
#sidebar_footer a:link {
text-decoration: none; /* no underlining default */
color: #3333CC; /* color of links not yet visited */
}
#sidebar_footer a:visited {
text-decoration: none; /* no underlining default */
color: #663399; /* color of links already visited */
}
#sidebar_footer a:hover {
text-decoration: underline; /* underlining as hover default */
color: #000000; /* color of links when being hovered over */<
/* font size for comments area */
.meta-inner {
font-size:15px;
}
What could I be doing wrong?
@Nicole: on the sixth line from the bottom of that code there is a “<” that shouldn’t be there at the end of the line. try removing that and see if it works.
I seem to have it working now. I think the problem was that prior to attending to the comments section I had made some changes to my html code at the bottom to change the colour of the font in the footer section which would have been different to the end of the ’standard’ html code. Therefore, I changed where I placed the above hmtl code. I placed it straight after this….(which would have been the end originally!)
div#footer{text-align:center;}
Now it works!
hey jared:
is there a way to just change the ( ADD COMMENT ) type so that is a larger size then the rest of the comments area?
@Dinofa: just add a line in your styleshheet that says this:
.commentform_link {font-size:44px;}
but change 44 to whatever size you want.