Tuesday 7 August 2012

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.



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. A new window will open. You'd have to click the Proceed button to start editing.
  6. Blogger Proceed Button
  7. 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: You can press 'Ctrl + f' keys or simply scroll down the HTML a bit to find the code.

  8. 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>
  9. Now find this code:
    h3.post-title {
      margin: 0;
      font: $(post.title.font);
    }
  10. 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);
    }
  11. Click Save template and then Close button.
  12. Blogger Save Template Close Buttons
  13. Now go to Template Designer then Advanced and edit the Post Title option.


  14. You can simply edit the post color and post hover color from here.
  15. Enjoy!

1 comment:

  1. Sehr schöne Anleitung! Aber wie kann ich das CSS im Sourcecode ändern? Es geht um den grauen Bereich

    http://mein-waldgarten.blogspot.de/

    Viele Grüße
    Sara aus Germany

    ReplyDelete