Friday, June 18, 2010

How to change post title background color with template designer


"And how can I give my post title a colour background?"

The first thing I thought of trying is to go to LAYOUT > FONTS AND COLORS as described in my previous post Changing fonts and colors for New Blogger (xml).

However, Blogger for better or for worse is constantly evolving and the LAYOUT tab is no more, replaced by a DESIGN tab and apparently have moved the template designer from Blogger in Draft to standard Blogger.

I believe that it is still possible to edit the template direct to add CSS (Cascading Style Sheet to control the post title background but found that Blogger Template Designer has provided a "Advanced" option to do that via the template designer with INSTANT PREVIEW. And apparently some of the functions of the new Blogger Template Designer can be used even if the template you are using for your blog has not been designed with Blogger Template Designer

So to change/control post title background color:
1. Sign into Dashboard
2. Click DESIGN tab to get to LAYOUT
3. Click TEMPLATE DESIGNER sub-tab
4, Click ADVANCED at the top-left corner
5. Scroll down to bottom of sub-menu and click ADD CSS (see screen shot below):

Blogger template designer Advanced Option Add CSS

and there I add this line of CSS:

.post-title {background-color:green;}

and immediately below the change is previewed (see screen shot below and noticed background color has been changed to green. For more color options, refer to HTML color codes:

Blogger template designer Advanced option Add CSS

6. If you are happy with the changes, click APPLY TO BLOG to save the changes to your template:

69 comments:

  1. hello Peter
    same question as my previous one: i put in the CSS command but nothing happens.
    http://raymondvanhouten.blogspot.com/

    In you post you write: "see screen shot below and noticed background color has been changed to green", but I don't see any green there background.
    regards
    Raymond

    ReplyDelete
  2. Sorry wrong screenshot. It has been corrected. No other error except for that screenshot.

    ReplyDelete
  3. Remains the question why it doesn't work in my blog. Nothing turns green there after putting in your CSS command.
    regards

    ReplyDelete
  4. Could be your template and the way post title are defined in the CSS.

    ReplyDelete
  5. I have the same problem! :/

    ReplyDelete
  6. Hi, I am the owner of the blog of photography http://photographymc.blogspot.com/

    I have added in the favorite, I would like an exchange links with you.

    ReplyDelete
  7. look you so bussy my Bos...hihihihi :D
    how are you?

    ReplyDelete
  8. same problem like rayplay here.

    ReplyDelete
  9. Then perhaps we will have to get into EDIT HTML and do the editing there.

    ReplyDelete
  10. Lifted Loud and RayPlay,

    I did some testing. Now I want to ask the 2 of you this question. Did the line of CSS looked like below when you tried it (space before background- and after green;)

    .post-title { background-color:#green; }

    If so, get rid of the space, especially the one before background so that it become like this:

    .post-title {background-color:#green;}

    Try it again and tell me the results.

    ReplyDelete
  11. thank you for your quick reply.
    unfortunately nothing happens when i delete those spaces.

    ReplyDelete
  12. I checked RayPlay's blog and saw that his post title background color is green. Perhaps you can check with him if he has solved the problem and if so, how.

    ReplyDelete
  13. i don't see a green post title background on his site!?

    http://raymondvanhouten.blogspot.com/

    ReplyDelete
  14. Look at Plaatje en praatje. Unfortunately Blogger have not enabled images for screen shots in comments.

    ReplyDelete
  15. The correct CSS code is this:

    .post-title {background-color:green;}

    without the pound (#) symbol. Add pound symbol prefix only when using Hex color code, for example #00ff00 (green).

    ReplyDelete
  16. Hi Green Lava,

    Thanks for the heads up. I must have missed as I didn't save and preview somehow yielded the background color so thought everything OK.

    ReplyDelete
  17. i visited that site but still didn't see any green background color, only green text color!?

    i also pasted this new code but still nothing happens.

    ReplyDelete
  18. I made a mistake earlier adding a supperfluous # which is only use when we use numbers to denote HTML code like #5588AA. That has been corrected in this post and the correct
    post-title {color:green;}
    has been posted.

    Did you follow that? Also what browser are you using?

    ReplyDelete
  19. yes i did that but nothing happened. i am using the current firefox browser.
    plus i would like to have gray color instead of green if possible (#696969).

    ReplyDelete
  20. Hi Peter,

    Wondering if you could tell me the css code for changing the post title font using the template designer in Blogger? (Is that possible?)

    Thanks,
    Carol

    ReplyDelete
  21. For Lifted Loud: What template are you using?

    For Carol: Same steps as in this post but instead of
    .post-title {background-color:green;}

    try
    .post-title {font-family:arial;}
    or instead of arial, you can use other font like Times of Courier etc.

    If you have other aspects of a font like its size or style, add them within the curly bracket, example

    .post-title {font-family:courier; font-size:140%; font-style:italic}

    ReplyDelete
  22. this is quute helpful thanx
    http://carztrucks.blogspot.com/

    ReplyDelete
  23. @ peter

    Theme Name: Obscure
    Theme URI: http://wpcrunchy.com
    Description: Premium dark magazine wordpress theme
    Author: akosipau
    Author URI: http://akosipau.com/
    converted: Blogger Template Place
    converted URI: http://www.bloggertemplateplace.com/

    ReplyDelete
  24. Hi Peter

    I have migrated to the new templates and lost the title centering to my posts.

    Could you advise how to centre both the titles of my posts and right hand columns.

    regards

    desmond

    http://omega-constellation-collectors.blogspot.com/

    ReplyDelete
  25. Looks like you solved your problem? Viewed with Google Chrome, your post titles are all centered.

    ReplyDelete
  26. Yes kind of :)

    BUt it the process of adding some html to the body, I also centred not only the headings but also the content of the RH column.

    Cheers

    Desmond

    ReplyDelete
  27. so i take it you can't help me out here!? thanks tho.

    ReplyDelete
  28. that's great! thanks

    ReplyDelete
  29. Thank you, this is very helpful; I have been able to change my post background to white. Now I would like to do the same for my comment field, but I couldn't figure it out. I tried this: comment {
    background-color:white;} however it didn't have any impact on the comment background.

    You can see what I am talking about here: http://bit.ly/cwTl6e I would like to change the comment background to white or any other color to make it a bit more visible.

    Thanks for any help!

    ReplyDelete
  30. I'm new member of Blogger. thanks for this tips

    ReplyDelete
  31. Dear Peter,

    Thank you for your advise...

    I managed to change the post-title-background-color with no problems at all... Great tip !

    Amazingly... I can not change the post-title-font-color itself...
    The new template-designer allows to choose a font type , size and bold / italics but IT DOES NOT allow to pick a color .........

    I've tried the "ADD C.S.S", using commands like:
    .post-title{font-color:#FFFF00;}
    OR
    .post-title{color:#FFFF00;} but nothing happenned...

    Can you please tell me what is wrong..........

    Cheers

    ReplyDelete
    Replies
    1. When you write this line, click below the line and wait until a second.
      .post-title {background-color:#A52A2A;}

      Delete
  32. Hey , thanks for this Tutorial. I have a slightly different query, I had inserted a dotted separating line under all my H1 tags thru css (basically my purpose was for the Post titles) but as the Blog title also falls under the H1 title the line is showing there as well in header... could you suggest a solution, thanks a lot in advance.
    Vandana
    http://www.socionerd.com

    ReplyDelete
  33. scoionerd, look for .post for example, look at HOw to center post title but adapt to what you want to do.

    ReplyDelete
  34. thanx for sharing this..

    but instead of color..how about to add image for background?

    ReplyDelete
  35. Hi Pink Diva, see Test background image for post title. Test successful so if you still understand how it was done, ask again.

    ReplyDelete
  36. Hi Pink Diva, see Test background image for post title. Test successful so if you still understand how it was done, ask again.

    ReplyDelete
  37. Hello, I was wondering what the code is to make a sidebar title background? Like I want there to be an image behind the sidebar titles. I know how to do it for the Old Blogger but not for Blogger In Draft. Please help!

    ReplyDelete
  38. Hi Peter, how can I find the whole class sheet of Blogger's CSS. I was wondering, I know it's easy to figure out that the class for Post Title is 'post-title' and other developer somehow used the naming convention postTitle. Did you just figure it out by instinct or you know the whole class sheet? Can you teach me to find it please.

    ReplyDelete
  39. sir where is the design tab ??

    ReplyDelete
  40. Yohanezh, you are not the first asking this question - where is the DESIGN tab? I will like to get to the bottom of this, why some bloggers cannot see the Design tab so as to better able to help others who in the future faces the same problem. So hope you will answer the following:

    1. Are you still using the old classic or the New Layout xml template (previously I refer to that as the New Blogger template). See old classic template or New Blogger xml template

    2. When you sign into Blogger.com, do you see a series of tabs for each of your blogs? In mine, there are 6 tabs -
    New Post|Edit Post|Comments|Settings|Design|Monetize|Stats|

    How many tabs do you see and what are they?

    ReplyDelete
  41. I have the same problem as Asia-Pacific Guides:
    cannot change the font COLOR of the post title. I have been searching everywhere for an answer.

    Please help!

    http://inthespaceofcreation.blogspot.com/

    ReplyDelete
  42. Thanks a bunch! This really helped me. Although,shortly after,I realized that my ''Followers'' title turned the ugly default colour. Any ideas how to turn that back to black?

    ReplyDelete
  43. I am having the same problem as Asia-Pacific Guides and LifeinCreation.... how do you change the post title color, not just the background color??

    ReplyDelete
  44. Asia-Pacific Guides, LifeinCreation and Fancy Frills Style Studio, what templates are you using. Also, go to the template editor, press ctrl+F and search for post.title and let me know if you can find it.

    ReplyDelete
  45. Hello. I have asked this twice and got no response both times so I will ask yet again. How do you do this for the sidebar titles! In Template Designer!

    ReplyDelete
  46. hi to all
    i am new comer

    ReplyDelete
  47. My Advanced tool doesn't worked .
    how can I change my background ?

    ReplyDelete
  48. You want to change sidebar title color with Template Designer, go to
    Template Designer > Advanced > Gadgets
    and select your font type and color there.

    ReplyDelete
  49. Sahid, welcome. Hope you find the info and tips here useful.

    ReplyDelete
  50. Farah, Advanced link don't work? Have you converted to the template designer? Perhaps you can try changing the template

    ReplyDelete
  51. Hi, thanks for posting this. It works for me! But, I wanted to put borders on my post title too for my "my journey to being a mom" blog, how to do that? Thank you in advance.

    ReplyDelete
  52. thanks, this is what i exactly needed

    ReplyDelete
  53. Thanks for this nice information. However instead, I wanted to change the Blog title's background colour, therefore I put following code:

    .blog-title{background-color:green;}

    However nothing happened. Can you help me on what will be the right code?

    Thanks,

    ReplyDelete
  54. If you are using Template Designer, there is no need to tangle with CSS. Just sign into Dashboard > Design > Template Designer > Advanced > Background > Blog Title background

    ReplyDelete
  55. Thanks Peter for your reply. However I could not see anything like 'Blog Title background'. Under the Background section, there are 3 options:
    1. Outer Background
    2. Main Background
    3. Border Color

    Am I missing something?

    Thanks,

    ReplyDelete
  56. Here is how I changed the blog header background of this blog which is not using template designer:

    #header-wrapper {
    width:100%;
    margin:0 auto 10px;
    border:1px solid #cccccc;
    background-color:#4D7C9B;
    }

    ReplyDelete
  57. Wow, after reading all this, I am really confused. I am using the "simple" template and under advanced settings for post title, I can change font and size but there are no color options. Can you tell me how to do this?

    Thanks,
    Dave

    ReplyDelete
  58. Blogger did not give a direct method for doing this. You will have to add a line to the template CSS by going to ADVANCED > Add CSS

    ReplyDelete
  59. I'm trying to change the Post title colour. I'm using "Simple" template too. Also using "Template Design". There is no colour picker in Advanced. So, I tried adding CSS code from a link to blogger, doesn't work. Any suggestions please?
    Thanks
    Ellen

    ReplyDelete
  60. This is not working with my templates..Is there any other way ....

    Darjeeling

    ReplyDelete
  61. great, thank you! :D

    http://maria-originals.blogspot.com/

    ReplyDelete
  62. Because your post title is a hyperlink, the only way to change the color of the font after adding the css for the background color is by changing your Link colors through Template Designer/Links.

    Thought this might help!
    Heather

    http://www.farmgirlgourmet.com

    ReplyDelete
  63. Can you turn this into a Image? and can you change the height and width

    ReplyDelete
  64. Sure you can. See, I did a test post at Testing image post title successfully to confirm.

    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