August 2011 ~ bloogger

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

Open the Template section.

Click the Edit HTML button.

Expand the b:skin tag by clicking the arrow on left side. This will open styling code of your template.

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.

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>

Now find this code:

h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

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);
}

Now save your template.

Now go to Template Designer then Advanced and edit the Post Title option.
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.
If this post was helpful, kindly link back to this blog and express your love in comments!