Blogger has released its much anticipated threaded comment system, and so far I'm loving it. Except for one thing - the font looks weird. So I changed the font back to how it was in the old system, and in this post I'm gonna show you how. By the way, a big shout and super thanks to Anonymous for her generous donation to SouthernSpeakers.
Step 1:
Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Find for /* Variable definitions - Paste the following directly below the lines (See image below)
Click on Save Template when you're done. Should you receive a bx error, delete Line 1 and Line 5 from the code above and try again.
Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Find for /* Variable definitions - Paste the following directly below the lines (See image below)
<Group description="Comment Font" selector=".comments .comments-content .comment-content, .ss">
<Variable name="sscommentfont" description="Comment Font" type="font"
default="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif"/>
<Variable name="sscommentcolor" description="Comment Color" type="color" default="#000000" value="#000000"/>
</Group>
Click on Save Template when you're done. Should you receive a bx error, delete Line 1 and Line 5 from the code above and try again.
Step 2:
Still under Edit HTML, find for /* Comments ----------------------------------------------- */ - Paste the following under the dashed line
Click on Save Template when you're done.
Still under Edit HTML, find for /* Comments ----------------------------------------------- */ - Paste the following under the dashed line
.comments .comments-content .comment-content, .ss{
font: $sscommentfont;
color: $sscommentcolor;
}
Click on Save Template when you're done.
Go to Dashboard ('House' symbol) - Template - Customize - Advanced.
You should now see a new entry -- Comment Font. Click on it, and the rest is self-explanatory. Another thing. Since you cant view comments on the front page, you won't be able to preview the change using Template Designer. But clicking on 'Apply' will apply the changes. All the best!
a million thanks. Very helpful tutorial. It worked perfectly fine for me. Thanks again!
ReplyDeleteFirst, yay! Since there wasn't any comment since I published this post, I was wondering if something was wrong with it. Thanks for your feedback :)
DeleteYou are a genius, Mr/Ms Yogaratnam!
DeleteGod bless you! I am a person who loves to share as well. Actually I looked this up in the internet just to help a friend with her blog. It's always so wonderful to find people who love to share. Have a wonderful day!
DeletePS the only confusing for someone not that much experienced may be this part "Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed" but don't worry, I am no IT wizz - If I could follow the steps then most blogers can :)
Thanks for the feedback. I'll think of a way to make that statement less confusing in the future :) Happy Sunday!
DeleteThanks!!
ReplyDeleteYou're most welcome!!
DeleteThanks for this. My comments font and colour had inexplicably changed (all by themselves ... hmmmm) and I had no way of changing them back.
ReplyDeleteYou're welcome. It was because Blogger started to roll-out their new comment system. All blogs were changed to the default color, font and size that came with the update.
DeleteThat's a relief, I thought it was something I'd done ... it usually is, I tend to tweak things and haven't a clue what I'm doing half the time. So thanks again for the info.
ReplyDeleteIf that is so the case, allow me to remind you to backup your template now - it might be useful some time in the future :)
DeleteCheers.
I tried it and it worked great for font style (thanks!), but I don't have the option to change font color. Is that because I had to delete line 1 and 5 to avoid the errror?
ReplyDeleteActually yes, but you still have that option available. Just click on the second tab that says Comment Color. See the image below for ref:
Deletehttp://i.imgur.com/cLjJI.png
All the best :)
I don't have that option. It goes from Comment Font to Main Background Color. There is no option for Comment Color :>(
DeleteAllow me to have a look at your template. Copy your whole template - go to www.pastebin.com - paste it there and get back to me with its link. I'll see what I can do.
DeleteIn step 2, I can't find /* Comments anywhere in my HTML. Any suggestions about where I should paste the code? I am using the Simple template. Thank you.
ReplyDeleteOn your browser, press CTRL + F to activate the search function, and just search for "Comments" (without the quotes). If you really cant find it, you can paste your code directly above ]]></b:skin>, as shown below:
Deletehttp://i.imgur.com/f9BeL.png
Yobo, firstly thank you so much for all your helpful tips and pointers, I would have been lost without it.
ReplyDeleteI have two questions - 1. When I click through from the main page to either the 'About me' or 'Contact' section, the background image/page alignment has changed position ever so slightly. Could you please tell me how to fix this.
My second question is in regards to the way the page movement occurs when you change a page, is there a way of not having it swop from bottom to top.
http://neda-shadanlou.blogspot.com/
Many thanks,
Neda
Hi Neda. I'm sorry I haven't got any solutions for your problems. But I've got explanations. The Dynamic View is very delicate. It is made of layers being rendered on top of each other. The reason your image shifts is because of the scrollbar. Unfortunately, we can't shift the scrollbar inward without tearing your template apart. As for the page transition, it is defined a .js file. Can't change its content for now.
DeleteHey ! Hope you are well.
ReplyDeleteThe threaded comments have not been activated for me on my blog - Could you please help me out !
Blog address : http://mytradinghandbook.blogspot.com/
You could try restoring your template widgets to default. First, backup your template as it could erase your previous mods. Then go to Dashboard - Template - Edit HTML - Proceed - Revert widget templates to default.
DeleteAll the best :)
Thanks for your reply. I did that and it didn't work. I updated my blog to dynamic views and it still isnt working !
DeleteAny idea why ?
I am not exactly sure why. You should probably start a question thread in the help forum:
DeleteBlogger Help
All the best!
I found the answer - Its called 'I am really dumb'.
DeleteWould not like to embarrass myself by explaining what I was doing.
Thank you. You are a life saver !
Glad to know you fixed it by yourself :) Kudos!
DeleteTHIS is awesome! Thank you. My OCD was in overdrive. This post was very helpful and *gasp* it worked!
ReplyDeleteTwo thumbs up!
OCD eh? Now, that's something I can relate to. Happy to help, as always :)
DeleteThank you for your help! :)
ReplyDeleteNo problem at all :)
DeleteThank you so much, I tested this and it works perfectly. I would like to ask you if you know of a way for the author's comments to have a different colored background with this new blogger system. I had it before and now it disappeared!
ReplyDeleteThank you!!
What a coincidence! I just spent the last 4 hours finding out a way to isolate author's comments in this new system. I used to have a way in the old system, but it got obsolete. Check out my bordered comment, eh? I'll write clear instructions in a post later at night or sometime tomorrow, stay tuned!
DeleteThank you! Looking forward to it!
DeleteThank you for your reply, it's a great thing you do helping people. This may have been asked many times before but I can't seem to find the answer anywhere.
ReplyDeleteHow do you create a 'recent comments' feed? which was one of the widgets I had on in the old template version of my site.
Many thanks
Forget about comment feeds, you can't even add a followers or archive gadget in Dynamic View. We've been told that the ability to add gadgets will soon be added to Dynamic View - and we're still waiting :)
DeleteThanks! This worked wonders!
ReplyDeleteacreativecookie.blogspot.com
Glad you liked it! :)
DeleteThank you so much for this - it worked a treat! I noticed that below my replies I am getting a thick line which you don't seem to have here. I was wondering if there is any way I can remove it?
ReplyDeleteIt comes with your template, and yes you can remove it. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Delete.comments .continue{
border: 0px !important;
}
Cheers :)
It worked! Thank you so much for your help :)
DeleteThat's great! :)
DeleteThis works perfect. Thank you so much.
ReplyDeleteThanks for the feedback :)
DeleteHi. I've done as you suggest. Using the Simple template, so had to put the second piece of code before ]]>. I get the Comment Font entry under Advanced, but none of the changes happen when I click Apply to Blog. Any ideas?
ReplyDeleteFor best results, place the second code under /* Comments ----------------------------------------------- */
DeleteHave you checked in your actual page if there is any changes? Because you can't preview the changes in Template Designer. Can I have a look at your blog?
Many thanks for the reply. Yes, I am checking on the page itself. I've even tried changing the comment font to red, to make sure I wasn't missing it! My blog is here.
DeleteSorry, missed the first part of your comment. There is no /* Comments ----------------------------------------------- */ in my html.
DeleteI get what you mean, and I can see the problem. If you're interested, here's why: the CSS that you're adding in Step 2 consists variables. Usually, the variables won't be correctly represented if it is placed at the end of the CSS codes, unless if all the other CSS codes also have variables in them. See the problem?
DeleteIf you can't find Comments subheader, place the code from Step 2 under /* Posts
----------------------------------------------- */
If it still doesnt work, leave the code as it is and drop me a comment. I'll inspect the state of your codes at that moment.
Not sure I follow your point about variables, but that did the trick. Many thanks again.
DeleteNow all we need to make threaded comments look right is for Blogger to give those without a Google account a false 'avatar' - looks a bit odd with comments 'hanging' with no image.
That is an interesting point. I'll see if I can work something on it, after getting my assignments done :) Thanks for the idea.
DeleteErm... the 'false avatar' has now appeared on my blog!
DeleteI've just published a new post before Blogger rolled out this update. Anyways, you can still use the code in that post if you wanna change this default avatar to a personalised imaged of your own.
DeleteI thought this would change the font, size, and color of the actual "comments" link. How do I do that?
ReplyDeleteFor the actual link, use this. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
Delete.comment-link, .comment-link a{
font-size: 20px !important;
color: pink !important;
font-family:"Times New Roman" !important;
}
You wanna play with '20', 'pink' and 'Times New Roman'.
AWESOME!!! You are fantastic!! Thanks for the help!!!
DeleteDon't mention it :)
DeleteThanks again, works like a magic!
ReplyDeletehttp://www.socialcrunching.in/2012/02/twitter-new-brand-pages.html
You're most welcome :)
DeleteMany thanks! I've finally changed the comments font!
ReplyDeleteIs there any way to change the font for comment author too? I've tried adding a similar code for .comment-author with no success. But I'm not really good in this, maybe I did something wrong.
I can think of a way. Here's a hint:
DeleteHighlight Author Comments in Blogger's New Threaded Comment System
If you can tell me the exact font that you're going after, perhaps I can be a better help. Do get back at me :)
Thanks so much for all the help, I recently started my own blog and had no clue, but you're tutorials are so easy to follow! thanks again :)
ReplyDeleteYou're most welcome :) Feel free to drop a comment if you have a particular question to shoot.
DeleteCheers.
This is amazing. It worked like a charm. Thank you so much for posting the information needed to change the comments font.
ReplyDeleteAppreciate you dropping some words :)
Deletevery nice play of colors, I like
ReplyDelete:)
DeleteHi,
ReplyDeleteI couldn't find /* Variable definitions or /* Comments but I am using a free custom blogger template so that could be the reason. Is there another way for me to apply the code in the template? Thanks!
Let's have a look at your blog and see if we can place it somewhere else. I see you've got 3 blogs. Which blog are you working this on?
DeleteHi,
ReplyDeletedid you ever get around to give instructions on how to change the comment background color? Need to change that as well...
Thanks
Hi Thomas,
DeleteTry this:
.comment{
background: black;
padding: 5px !important;
}
Cheers!
thanks!
DeleteMost welcome :)
DeleteI couldn't find the Variable definitions on my blog :( Please do help.
ReplyDeletehttp://makeupandbeautytips-home.blogspot.com/
Hi Lancy,
DeleteYou're using a custom third-party template. Most tweaks won't work with third party templates. You can, however, manually add the code to style your comments.
Go to Template Designer - Advanced - Add CSS - Scroll till the bottom - paste the following code - Apply to Blog.
.comments .comments-content .comment-content, .ss{
font-family: 'Walter Turncoat', cursive !important;
color: red;
font-size: 16px;
}
This is just an example. Change the values above accordingly.
I have a problem. My blooger does not show the new comment system and my comment on my blog are just way to large and I want to reduce them but dont know how
ReplyDeleteHi Dezi,
DeleteYour rusted-beauty blog does use the new comment system. Follow the tutorial in this page and you should see the option to change your comment font-size.
I tried this, and it worked really well. I wanted to change the comment font size 'cause it was way to small before. Now it's fine, but you know, the part which shows 'someone posted a comment on this date and time' for each comment still remains extremely small...how do I change that font size?
ReplyDeleteHere's the link to my blog if you want to see what actually is happening: http://words-that-matter.blogspot.in/
Thanks a lot:)
Hi CJ,
DeleteWe can change it manually. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.comments .comments-content .datetime {
font-size: 15px !important;
}
Cheers :)
Thank you. Tried it. The date stamp font changed. How about comment author font? It remained the same...
ReplyDeleteDo I add .comment-author too to the above code and to the ones you've given in the group description? I tried that but it didn't work...
Oh right.. Forget about the code that I gave earlier. Use this one instead:
Delete.comment-header{
font-size: 20px;
}
Cheers!
hi there! first of all - thank you so much for all of this, i've found your site immensely helpful! second - i'm wondering if there's a CSS code to make all of my posts body texts "large" rather than "normal" (or a custom size) without having to go through each post individually. thanks for your anticipated assistance!
ReplyDeleteHi Stella. I might be able to come up with something, but it largely depends on the template that you're using. What's your blog's address?
DeleteGood day sir yoga...
ReplyDeleteSir i just want to ask. How can change the word "Add a Comment"
i wish you will help me sir,i have many post in here but i got no reply from you, maybe you are so busy because of many question of other blogger, because you are so popular ehehehe. I hope you will reply my comment...Thank you sir YOGA god bless....
Here is my blog: www.moviedeck.blogspot.com
Hi Reyes,
DeleteI have replied all your replies in the past, 4-5 of them total. Perhaps you forgot to check back the posts in which you left your comments on?
Anyways, to change the 'Add a comment' phrase, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.comments-header h3{
font-size: 0px;
}
.comments-header h3:before{
content: "Other than add a comment";
color: white;
font-size: 14px;
}
Cheers! :)
It works!!!!!
DeletePerfect..
Thank you sir YOGA...YOU ARE THE BEST!!!
Blogging is became more easier because of you...
CHEERS!
Cheers :)
DeleteBro, nice tutorial,.
ReplyDeleteBut I have a problem, in my blog I don't have this code:
/* Comments ------------- */
What should I do then??
I'm using artisteer to build my blog,..
I have not artisteer before. But worry not. Just place the CSS code among other CSS codes. That should work well.
DeleteCheers!