Pages

How To Change Post Title Color in Picture Window Blogspot Template

By default, there is no option to change post title color in Blogger Designer Templates. I've already written a tutorial to do that but users of Picture Window template are having problems. Here is a tutorial to change post title color in Picture Window template.

Note: If you're using other templates then see this tutorial:
Blogspot How To: Change Post Title Color in Blogger-Blogspot Template Designer Templates

Steps to Change Post Title Color in Picture Window Template


  1. Open the Template section.
  2. Blogger Updated Dashboard
  3. Click the Edit HTML button.
  4. Blogger Edit HTML Button
  5. Expand the b:skin tag by clicking the arrow on left side. This will open styling code of your template.
  6. Find the following code:
       <Group description="Post Title" selector="h3.post-title, .comments h4">
         <Variable name="post.title.font" description="Title Font" type="font"
             default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
       </Group>

    Tip: Click anywhere in the coding box and press 'Ctrl + f' keys find this code.

  7. Replace the previous code with the following code:
       <Group description="Post Title" selector="h3.post-title, .comments h4">
         <Variable name="post.title.font" description="Title Font" type="font"
             default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
         <Variable name="post.title.color" description="Color" type="color" default="#FE6602" value="#FE6602"/>
    <Variable name="post.title.hover.color" description="Hover Color" type="color" default="#FFD25F" value="#FFD25F"/>
       </Group>
  8. Now find this code:
    h3.post-title {
      margin: 0;
      font: $(post.title.font);
    }
  9. Replace the above code with this code:
    h3.post-title {
      margin: 0;
      font: $(post.title.font);
      color: $(post.title.color);
    }
    
    h3.post-title a {
      color: $(post.title.color);
    }
    
    h3.post-title a:hover {
      color: $(post.title.hover.color);
    }
  10. Now save your template.
  11. Now go to Template Designer then Advanced and edit the Post Title option.


  12. You can simply edit the post color and post hover color from here. Please note that hover color will appear when cursor is brought upon the post title.
  13. If this post was helpful, kindly link back to this blog and express your love in comments!

25 comments:

  1. I was unable to change the color or post title using the EDIT HTML and suggested changes in coding...following is response I got when I tried to save template...We were unable to save your template
    "Please correct the error below, and submit your template again.
    Invalid variable declaration in page skin: Variable is used but not defined. Input: post.background.color"... pls advise

    ReplyDelete
  2. Genius! Thank you so much, I don't understand HTML, but this was so easy to follow and now I have the title color I want. Thanks again.

    ReplyDelete
  3. Hi~ I have a small but complicated problem. I don't know if my english is good enough or not for you to understand. Anyway, the problem is this. I can change my post text color. But I cannot add color on it. For example, the default is brown. Then I want to make some words in my blog post to red, so when I typed it I make it red. But when it is posted in my blog, is still brown. Any idea how to solve? Big thanks!

    ReplyDelete
  4. thx for the great info...i love this tutorial.i will try it

    ReplyDelete
  5. thanks, this is a good read

    ReplyDelete
  6. That was such a great help, much appreciated!!

    ReplyDelete
  7. Thanks A Lot, It was very helpful and well explained

    ReplyDelete
  8. Brilliant! Thanks so much for your help.

    @crivellistreetchronicle I'm sure you've worked it out by now but if anybody else is having the same problem make sure you change BOTH bits of code as I missed the first one and had the same error message as "crivellistreetchronicle"

    ReplyDelete
  9. Also this fix has sorted out all the other missing elements in the advanced editor, fantastic!

    ReplyDelete
  10. My friend has watermark template and post title color is not even an option. Does she need to change her template to be able to change the color of her post title?
    Thanks for your help.

    http://awakemysoul-bridget.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Homestead Living, your friend just need to follow this tutorial. I think it is applicable on her blog.

      Delete
  11. Thank you for the straight forward and easy to follow instructions! :)

    ReplyDelete
  12. Thank you it worked!!! And I am NOT tech savvy.

    ReplyDelete
  13. Things seem to have changed a bit. I had to click Format Template to access that skin stuff, then click on an obscure black dot in the left margin. I was able to paste in the first section of code above, but the second bit has changed. I did what I could, saved the template, and found the color options in the template designer . BUT ... they don't work. They don't change anything. Aaargh! I have this blue post title that relates to nothing in the chile pepper theme that's full of reds, oranges and greens.

    ReplyDelete
    Replies
    1. Hi Sharon, I've updated this post. Sorry for the inconvenience.

      Cheers,
      Bilal

      Delete
    2. How about just putting the option to do so in the template deasigns instead of messing around with a bunch of html? How hard would that be, instead of having to go through all this? Jeeez.

      Delete
    3. Hi Wedge, after completing this tutorial, post title can be customized from Template Designer without any coding requirement.

      Delete
  14. This tutorial was great! It helped me accomplish exactly what I wanted to do.

    ReplyDelete
  15. This was SUPER helpful! Thank you!

    ReplyDelete
  16. Awesome! Thank you sooooo much! I LOVE having my post titles match my color scheme. You made it so easy. Thanks for sharing your skills!

    ReplyDelete