Typepad Master Class: Replace Category Titles with Images

November 14, 2012

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

This topic has come up a couple of times, and maybe you've wondered it yourself, but just how would you replace the default category links with images? We noodled over it for a while before realizing that we could use the same approach to categories as we did for custom social icons with the Other Accounts module. There's no stopping us; and there should be no stopping you!

Here are two examples of what today's Master Class post will cover:

Categories

For those who want to customize the look of their categories, without much effort, we're offering the blank background of the example on the right, with a tip on how to customize the font of your category title.

For those who want to completely customize each image for their categories, skip to the "read on" link below for a more advanced tip.

To use our custom background image, as seen above on the right, you'll need the following:

  • access to Custom CSS, at Design > Custom CSS
  • the Category List module (not Category Cloud module) in your sidebar, via Design > Content

If you're all set, add the following CSS to your Custom CSS screen:

/* category background - do not change */
.module-categories li {
    background: url(http://themes.typepad.com/assets/cat/cat-blank.png) no-repeat top left;
    margin: 0 auto 4px;
    padding: 0;
    width: 297px;
    height: 44px;
    }

/* category titles - customize the font */
.module-categories li a {
    display: block;
    padding: 13px 30px 0 0;
    text-transform: uppercase;
    text-align: right; /* change alignment; options: left, center, right */
    color: #fff; /* change the color of the text */
    font-size: 18px; /* change the font size */
    font-family: Georgia, 'Times New Roman', serif;
    }

Preview what the changes will look like in your blog. If you need to make tweaks to the font, edit the second group of code before saving your changes.

Want something more advanced? Ready to setup a custom image for each of your fonts? (This tip is particularly great for topical blogs!)

Let's break down how we go from the default category list display on the left to the jazzy category display on the right.

Categories
To complete this effect, you'll need the following:

  • access to Custom CSS, at Design > Custom CSS
  • the Category List module (not Category Cloud module) in your sidebar, via Design > Content
  • creativity (or someone else's creativity) for the images
  • sweet, sweet patience as you work through the CSS to make this all happen

In the theoretical blog, that those images above belong to, there are four categories. (It's theoretical, so we're all pretending the author of this post can cook and likes to blog all the amazing recipes they make.) Since the blog is broken up into four categories--savory, sour, spicy, and sweet--we only need to make four images. If your blog has a dozen or more, more power to you for your perseverence in setting this effect up, but keep in mind file/image size so that your blog's load time doesn't get out of hand.

Upload the Images

After the images are created, they need to be housed in the File Manager, at Library > File Manager. Once they are successfully uploaded, click on each file name and copy its permalink location from the address bar of the browser (or right-click, copy link location). Save the URLs of the images somewhere safe; a plain text file on your desktop will do just fine.

Category Paths

In order for the code below to work you'll need to first know what the path/URL of each category is. Create a new plain text file on your desktop. Into it, paste the URL of each category. Not sure what they are? Click on a category title from the sidebar of your blog, and copy its URL from the address bar (or right-click, copy link location). Paste each URL into the text file and save it so you don't lose them.

The URLs should be formatted like:

  • http://example.typepad.com/blog/category
    where "example" is your custom subdomain, "blog" is the blog's subfolder, and "category" is the name of your category (categories that are more than one word will look like "category-name");
  • http://www.example.com/category
    where "www.example.com" is your mapped domain to a specific blog and "category" is the name of your category; or
  • http://www.example.com/blog/category
    where "www.example.com" is your mapped domain to your entire account, "blog" is the blog's subfolder, and "category" is the name of your category.

The Code

For this code to work, double-check that you've completed all steps above, then go to Design > Custom CSS for the blog you're working on.

The first part of the code is to remove any margins or padding for the items in the Category List. To do that, add the following code to the Custom CSS screen:

.module-categories li {
    margin: 0;
    padding: 0;
    }

Depending on your theme, you may need to add " !important" (make sure to include the space before the exclamation point) to each line, before the semi-colon. The !important declaration helps to force override any default styles in the theme.

Next, you'll need to add some code to the link that resides within each item.

.module-categories li a {
   display: block;
   width: 300px; /* set your image width */
   height: 66px; /* set your image height */
   padding: 0;
   margin: 0 auto 10px; /* 0 space at top, center images, 10px space at bottom */
   }

The above code is used to make certain that the links can hold a specific width and height, as well as remove any additional padding. In our example image above, we include 10px of space via the margin property so that there's a gap between each image. You can increase or decrease it for your needs.

Make certain to replace the 300px and 66px with the width and height of the images you're using. We recommend the same height for all images that you create so that it's uniform (it also means less coding for you).

The final step is the most involved--adding the images for the individual categories! Open your plain text files where you stored the image and category URLs.

For the first category, add the following code:

.module-categories li a[href*="/"] {
    background: url() no-repeat top left;
    text-indent: -1000em;
    }

In the first line, where you see "/" in between brackets, add the category name as it appears in its URL.

In our example, the URL of the Savory category would be: http://example.typepad.com/blog/savory. We'd replace "/" with "/savory" so that the first line becomes:

.module-categories li a[href*="/savory"] {

In the second line, where you see "url()", paste the entire URL of your image file.

In our example, the URL of the image we created for the Savory category would be: http://example.typepad.com/savory.png. We'd replace "url()" with "url(http://example.typepad.com/savory.png)" so that the second line becomes:

background: url(http://example.typepad.com/savory.png) no-repeat top left;

The third line remains the same; it's hiding the default text so that only your image appears.

All together, the CSS for our Savory category's custom image is:

.module-categories li a[href*="/savory"] {
    background: url(http://example.typepad.com/savory.png) no-repeat top left;
    text-indent: -1000em;
    }

Yours should look similar, with the category name and image URL being the only differences.

Repeat for each category.

Here's what the code looks like for our category image example above after all the pieces are put together:

.module-categories li {
   margin: 0
   padding: 0;
   }

.module-categories li a {
   display: block;
   width: 300px;
   height: 66px;
   padding: 0;
   margin: 0 auto 10px;
   }

.module-categories li a[href*="/savory"] {
   background: url(http://example.typepad.com/savory.png) no-repeat top left;
   text-indent: -1000em;
   }

.module-categories li a[href*="/sour"] {
   background: url(http://example.typepad.com/sour.png) no-repeat top left;
   text-indent: -1000em;
   }

.module-categories li a[href*="/spicy"] {
   background: url(http://example.typepad.com/spicy.png) no-repeat top left;
   text-indent: -1000em;
   }

.module-categories li a[href*="/sweet"] {
   background: url(http://example.typepad.com/sweet.png) no-repeat top left;
   text-indent: -1000em; 
   }

We hope this has been an exciting new tip for you. Make sure to share your completed versions with us, and the rest of your Typepad community, in the user forums!

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.