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

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:

Posted by at
Labels: , ,

65 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

  25. 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

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

    ReplyDelete

  28. 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

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

    ReplyDelete

  30. that's great! thanks

    ReplyDelete

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

    ReplyDelete

  32. 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

  33. 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

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

    ReplyDelete

  35. thanx for sharing this..

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

    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. Hi Pink Diva, see Test background image for post title. Test successful so if you still understand how it was done, ask again.

    ReplyDelete

  38. sir where is the design tab ??

    ReplyDelete

  39. 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

  40. 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

  41. 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

  46. 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

  47. hi to all
    i am new comer

    ReplyDelete

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

    ReplyDelete

  49. 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

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

    ReplyDelete

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

    ReplyDelete

  52. 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

  53. thanks, this is what i exactly needed

    ReplyDelete

  54. 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

  55. 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

  56. 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

  57. 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

  58. 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

  59. 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

  60. 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

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

    Darjeeling

    ReplyDelete

  62. great, thank you! :D

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

    ReplyDelete

  63. 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

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

    ReplyDelete

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

    ReplyDelete

Subscribe to: Post Comments (Atom)