Weekend Project: Automatically add a custom signature to each post

April 13, 2012

Note: This project uses the Custom CSS feature, which is available to subscribers on the Pro Unlimited plan and above.

Today's project is all about adding a personal touch to each of your posts - without having to do any extra work. We're going to show you how to use the Custom CSS feature to automatically place a custom signature to the end of each post. You can use a scan of your actual signature or an image created with an image editing program.

Here's an example of how your posts will look when we're done.

custom signature
First, you'll need an image. It should be reasonably sized - not too large, since it's just a little personal touch, not a full-on design element. It can just be your name, a small icon or logo, or a little greeting. Either way, it should be personal and unique to your blog.

Save the image as a PNG, GIF or JPG and upload the file in Library > File Manager. Click the name of the file to open it in your browser. Leave that open - we'll need the URL for the image shortly.

The image will basically just be the background for each post, aligned to the bottom. First, we need to create some space for the image. In Blogs > Design > Custom CSS, add the following:

.entry-content {
padding-bottom: 75px;
}

You'll need to adjust the padding to accomodate your image, plus a bit of space for padding. So if your image is 70 pixels tall, you could make the space 90 pixels to accommodate it.

Now, we'll add in the code for the image, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url(http://example.typepad.com/assets/signature.png) bottom left no-repeat;
}

That places the image at the bottom of the post, aligned to the left. You can also align it to the center or to the right.

Finally, you may wish to add some space right below your image and above the post footer, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url(http://example.typepad.com/assets/signature.png) bottom left no-repeat;
margin-bottom: 10px;
}

That's it! When you view your blog, you should see your special image at the end of each post.

Have a great weekend and happy blogging!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.