June 18, 2014

Signature Module

The Signature module allows you to designate content to display at the end of every post. You can use the module to place a unique signature, social media links, images, advertisements, and more!

To enable the Signature module, go to Design > Content and click the pencil icon next to the module. After adding the custom text or code, click OK, check the box to include the module, and click Save Changes.

Add Signature

Other Details of Note:

  • The Signature module is a static item and can not be dragged to another position like sidebar modules. The module is inserted into the bottom of a post before the post footer.

  • The module accepts HTML, scripts, and plain text.
  • There is a 1000 character limit for content included in the module. You will be alerted by a pop-up if it the limit is reached.
  • No default styles are set for the module to fit with all themes. You can use Custom CSS to change the formatting, set the alignment, add padding, or make other design changes. See the section below on styling the module for tips.
  • Images or embedded content will scale up or down in responsive themes only.
  • For Advanced Template Sets, the templates can be updated to include any content before the closing </MTEntries> tag or see the article on adding content between posts for additional tips.
  • Google AdSense does not allow for more than 3 ads per page. If you include the Google AdSense code in the Signature module, the ads will only display within the first 3 posts on the pages, or fewer if you also have ads placed elsewhere on the page. Other services may also have limits on the number of instances and the Signature module may not be the ideal location.

Hide Signature on Front Pages

With Custom CSS, you can add a line of code to hide the signature module on the front page. For instance, you may want to only display the signature on the individual post pages if you are using excerpts.

At Design > Custom CSS, enter the below CSS in the text field and click Save Changes.

.index #signature { display: none; }

If you have other CSS added already, the new code can be added below the other code. Please note Custom CSS is available with the Unlimited and higher plans, and you can upgrade any time to take advantage of this feature.

Add an Image

The Signature module allows you to include text and images in addition to any code. To include an image follow these steps:

  1. Upload the image you wish to use to your Typepad account at Library > File Manager.
  2. Copy the URL for the uploaded image which will be similar to: http://example.typepad.com/image.jpg
  3. The code to embed the image is: <img src="http://example.typepad.com/image.jpg" title="Signature" alt="Signature" /> Replace the URL in the code with your image URL. You can also change the Title and Alt tags to your preferred label.
  4. At Design > Content > Signature, enter the image tag in the module box, add any other content you want to include in the signature, and click OK.
  5. Check the box next to the Signature module to include it.
  6. Click Save Changes.

Style the Signature Module

If you would like to style the module with CSS, the module is structured with two div containers that wrap around your signature content:

<div id="signature">
    <div id="signature-inner">
        your signature content here
    </div>
</div>

At Design > Custom CSS, use the IDs as #signature and #signature-inner to make changes. Please note Custom CSS is a feature available with Unlimited and higher plans. If you do not see the Custom CSS option, you can upgrade anytime. A few CSS examples are included below to help you get started!

Alignment

#signature { text-align: right; }

The alignment is set to left by default, but it can be set to left, right, or center.

Format Signature Font

#signature-inner {
font-size: 10px;
font-family: Courier New, monospace;
color: #0431B4;
}

Indent Module

#signature-inner {
padding: 0px 20px 0px 20px;
}

The above example indents the module content 20px on the left and right. You can adjust the padding on any side of the module by changing the pixels in the order of top, right, bottom, left. Similarly, the margins around the module can be adjusted.

Add Border

#signature {
border: 2px solid #01A9DB;
}

For additional border options, see the w3schools CSS Border article.

Updated 23 June 2015

Not quite what you are looking for? Check out these other articles:

  • Looking to create a new design? See the article on how to choose a new theme.
  • For details on designs which are ideal for viewing on mobile devices, check out the responsive themes, Snap and Sol.
  • If you are looking to create a photo album, see the Photo Albums article.
Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services