Monday, May 14, 2007

Changing the sidebar font

Got a question from a blog reader on how to change the sidebar font. So I did a little testing. See the screenshot of original font in the sidebar of this blog (click on screenshot to enlarge it):

testing changing font of blogger sidebar 1

I believe the original font is Arial. Now see the screenshot after editing the template (as above, click on screenshot to enlarge it):

testing changing sidebar font 2

Note that the font has been changed to Times (you got to see the enlarged screenshot to see the difference, or surf over to Taman Sentosa to see the actual site.

This is the way to do it. This involves opening the template editor and as always, backup the template before you make any changes. If you are not familiar with that, see the instructions at Backing up and changing New Blogger template.

After you have opened the template editor, in the template editor window, look for this block of codes in the CSS:

.sidebar {
color: $textColor;
line-height:1.3em;
}

Add in a line for the new font, for example, if you want Times, add the line

font-family: times;

so that it becomes

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
}

Preview, and if satisfied, click "Save template".

Update: I was asked about changing the font size too. If you want to do that, just add the line

font-size: 150%;

or any other percentage as you wish. You may also specify in pixels (px), eg. 12px

.sidebar {
color: $textColor;
line-height:1.3em;
font-family: times;
font-size: 150%;
}

Of course, if you want other font, just use a different font. BTW, I have changed the font size of the sidebar of the blog Taman Sentosa


Books for Google Blogger

39 comments:

  1. That's a really nice trick.
    Thank you so much.
    I didn't think I was going to like having my blog in two different fonts (is there no way to change the font size but keep it in the same style?)
    But when I did it, I quite liked it.
    Thank you again. I really appreciate it.

    ReplyDelete
  2. Thank a ton, Peter

    ReplyDelete
  3. Hi British Gal,

    I have updated the post for changing font size. It is in red.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  4. Thank you - that works perfectly for me

    ReplyDelete
  5. Thanks, Chen!
    I did not even know I wanted to do it until I came across with this amazingly simple and nice tip. It works fine with me.
    Regards,
    Márcia

    ReplyDelete
  6. Oh thank you so much!! I have been to numerous sites and FINALLY someone has a straight forward answer.

    ReplyDelete
  7. Hi Melanie,

    Glad you got the thing worked out. BTW how did you find this post? It would be most helpful if you can let me know.

    Peter (Blog*Star)
    Generating Revenue from your Website

    ReplyDelete
  8. Hi again Peter. To be honest I can't remember exactly where I found your blog. But I know that when I did see it I bookmarked it because it looked like a very useful site. I think I might have seen a link for it when I first signed up for my blog. Sorry.

    ReplyDelete
  9. Thanks, it works.

    Though it's a little bit tricky as I'm using slightly difrferent kind of template. But I finally managed to figure it out.

    ReplyDelete
  10. how to change sidebar title font?

    ReplyDelete
  11. Thank you for your posts. Your site is most informative.
    Genma

    ReplyDelete
  12. Peter!

    Thanks so much - this issue was really bugging me, so glad I came here, you've been a lifesaver over these few months. Have been passing on your site details to other bloggers too.

    Karenne

    ReplyDelete
  13. I'd like to change my Sidebar title font cause it's too big. This sounds great but I can't find the codes you mentioned. I found:

    main p, .sidebar p, .post-body {
    line-height: 140%;
    margin-top: 5px;
    margin-bottom: 1em;

    Is this the one? Pls take a look at my blog http://luxuryhaven.blogspot.com.
    Gosh, I'm so lost! Any help will be great....

    Thks so much!

    ReplyDelete
  14. Thank you so much. My blog looks so much better now! :D

    ReplyDelete
  15. Thank you for the help!!! I got just the font and size I wanted.

    ReplyDelete
  16. can i change the font style in ONE element of my sidebar, and not the whole thing? (ie, my blog list)

    ReplyDelete
  17. I experimented at Testing Blogger Beta and the blog list is currently at the top of the right sidebar (may change later), and when I tried to change the font, obtained this error message: "The widget with id BlogList1 is not within a section (actual parent element is: div.) Every widget should be in a section."

    Will have to do more research and testing.

    ReplyDelete
  18. I have tried several times to get this to work and it isn't changing. I don't understand what I am doing wrong :(

    ReplyDelete
  19. Is the font you want to use already in your computer? Are they web safe font or core fonts?

    ReplyDelete
  20. I figured out how to change the sidebar font and size.

    Though, now my problem is that in order to be able to read the sidebar the Title text is huge. How can I change the size of the text in the sidebar without increasing the size of the text in the titles?

    Thanks.

    ReplyDelete
  21. Sign into Dashboard, click LAYOUT > FONTS AND COLORS and look for "sidebar title font" and click "bigger" or "smaller"

    ReplyDelete
  22. Oh, my gosh! I can't believe how easy this was! I've been struggling through various tutorials and downloading fonts, blah blah blah, and then I found your post—SO SIMPLE! Thank you : )

    ReplyDelete
  23. Peter ... added a third column and it looks good but the font for the widget titles is Black or grey not white. Can you point me to the spot in the code to adjust it?

    ReplyDelete
  24. Perhaps you can look for the following:

    .sidebar .widget, .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

    and perhaps add a line
    font-color:red;

    and preview to see if anything happens.

    Feedback success or failure appreciated.

    ReplyDelete
  25. Peter ... since I posted that question I may have solved that single problem, but the issue is bigger.

    My template is Rounders 3. I want to be able to move widgets from sidebar to the other (there are two on each side, stacked) so that when I move them the formatting matches the other widgets within that section.

    I think there is big block of copy that controls this for the original two blocks in the original right hadn side bar. And I'd need to replicate this for the new lefthand sidebar. The addition of the newsidebar was done buy a guy who knew what he was doing but he didn't really "finish" the job IMO.

    New custom domain is www.nyskiblog.com.

    Thank you.

    Harv

    ReplyDelete
  26. Rounders template is a little problematic because of the rounded corners but do not know if that extend to your problem. In any case why don't you get the person who converted the template for you or perhaps use Amanda's Rounders 3 3 column template.

    ReplyDelete
  27. Thank you Thank you Thank you! I did crazy amounts of searching and no other sites worked or made sense, but yours did!

    ReplyDelete
  28. Thanks, Sabrina, for your feedback. BTW I am in the process of preparing a free Passwords Tips and Tricks eBook which explain various systems I have used to create easily remembered strong/long password. Would you be interested? If interested, contact me at Email me

    Peter (Blog*Star)
    Blogger Tips and Tricks

    ReplyDelete
  29. YOU are a genius. Unfortunately, in matters pertaining to web design, I am NOT. I followed your directions for increasing the font size of the items on my sidebar but there is no code like the one you listed. Could you look at my page and tell me what I am doing wrong or if it is maybe not even called a sidebar on my page? I am trying to increse the font on the side - transparent column of the page that lists links and and articles posted on this blog.

    Thank you so much.

    http://leahmariebrownhistoricals.blogspot.com/

    ReplyDelete
  30. Perhaps you can try testing if adding the CSS to one of these, preview and see any change:

    .main-inner {
    padding: 15px 20px 20px;
    }
    .main-inner .column-center-inner {
    padding: 0 0;
    }
    .main-inner .column-left-inner {
    padding-left: 0;
    }
    .main-inner .column-right-inner {
    padding-right: 0;
    }

    ReplyDelete
  31. You've helped me out for the billionth time! Thanks, Peter!

    I found this post by Googling "blogger change text size sidebar."

    Thanks again!

    ReplyDelete
  32. hi.. got this link thro google.. need some help in reducing font size in my blog..

    you can access my site here, www.reviewmitr.com

    I want to reduce the font size for the RECENT POSTS Side bar to 12. But somehow I am not able find how to do it.. Can you please help.. I have tried my level best.. I m able to adjust for other parts of the blow expect the RECENT POSTS FONT SIZE..

    thanks for ur help.

    ReplyDelete
  33. Can you add a new line to make the font italic or bold or normal as you wish because my font has appeared in Italic form and i don't know why so how can I change that to Normal ? and thank you.

    ReplyDelete
  34. Are the fonts you want italic or bold in the sidebar, in a widget or in the text of a post?

    ReplyDelete
  35. Hi Peter, thanks, this has been very useful. I found your article by googling "change font size on about me blogger". I was able to use your tips on this article, but could you possibly share how to reduce the font size on my about me? Hope to hear from you.

    ReplyDelete
  36. I remembered the About (profile) accepts HTML so try this CSS by surrounding those text you want the font to be smaller with <div style="text-align:center;"> and </div>

    ReplyDelete
  37. I used this and it worked great but now I have an error message when I go to customize my design template (bX-7ctbb4).

    ReplyDelete
  38. This is an old post and the example/test blog was using older template versions, but I am not sure what caused your problem.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics