Spotlight: A Fall Feast!
Typepad Responds: Trouble with the Tip Jar

Typepad Master Class: Replace Category Titles with Images

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

PatSloan

It seems to ignore the font color tag. The resulting color is that of the default link color. I can't seem to override it with the CSS.

Bri

Hi Pat! Add " !important" (with the space before the exclamation point) just before semi-colon at the end of the font color line. That will help to override any CSS that isn't sticking.

PatSloan

Perfect!! thank you Brianna!

Lindy Mayberry Sellers

Thank you for this tutorial!

A Twitter User

Unfortunately, can't afford to upgrade now. I just wish most of these cool features are available to all paid users.

Bri

Hi Bree! Check your email. I opened a ticket for you to discuss this further. :)

Bri

You're very welcome, Lindy! :)

Christopher Pearsall

I'm curious. Why does the customization have to be so difficult. In my life I've learned philosophy, psychology, law, HTML4, PERL, PHP, building and repairing computers both macs and pcs and professional photography to name just a few. Yet now I'm getting a bit older and I'm finding it harder to pick up on things and that I have less tolerance for the amount of time it takes me. Is there any particular reason why Typepad's structure seems to make it so difficult to customize its format? Once upon a time you could create a webpage and change the menu graphics with just drag and drops. Sorry for the frustration but I would really like my Typepad Blog to look nice but I can't seem to grasp it. Is there a TypePad manual that could help me with all this stuff and make it just a bit more straight forward? Even this positing presumes I have to know CSS and what .module-categories is. Or even what these brackets are for in this short statement "a[href*="/savory"] {" See my frustration? Is it me? Should this be this confusing?

Joy @ JoyfullyGreen.com

Thanks very much for this class--I've been wondering how to change the font of the categories ever since starting my blog this summer! It worked, but how do you change the font of the word "Categories" so it matches everything else? (I'd also like to change the font of the corresponding headings, such as "Mission Statement", "Welcome" and "Email Me." Also, how do I get rid of those three little dots that appear above each of the category names? Is that just a design aspect of the layout I've selected?

Toori

Wow love it

Anna Farmery

Can you do this for the posts and the month as well?

Bri

Hi Christopher! I'm really sorry you're finding this Master Class topic to be frustrating and hard to understand. The Master Class series isn't covering topics and tips that are necessarily easy for beginners, but I do recommend closely following the steps I outlined in the post and giving it a try.

I didn't discuss what the brackets are, after the "a" attribute, but they contain a bit of code that says to look specifically at the source (href) of the 'a' attribute ('a' being for links), and if a part of that source matches what's between the quotation marks, apply the CSS that follows. So, in my example that you referenced, the CSS is specifically saying, "if a link contains the text '/savory' then apply the Savory background image and hide the default text." As explained in the post, what you're inserting in the quotations for that CSS is the text of the category folder. That portion is what helps to separate the sidebar links from all other sidebar links so that a custom background image can be applied to an individual link rather than all links.

This is advanced CSS, so I completely understand your wanting some clarification. If you want any help applying something like this to your blog, feel free to open a ticket and let us know, okay? I'll most likely be the one to work on the ticket, so we can discuss it together.

Bri

Hi Joy! To change the font of the category header, you would use:

.module-categories .module-header {
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px;
}

And adjust the font name and size as you choose. When it comes to changing the headers of Typelists there isn't a straight forward way to do so individually, so it's easier to apply the same settings to all headers.

The three dots that you see are specific to the Mosaic theme that you've chosen to use. To remove them, add the following to your Custom CSS screen:

.module-content ul li { background: none !important; }

If you have any additional questions about this Master Class post or CSS for your blog and theme, please open a ticket at Help > New Ticket. I'll be more than happy to discuss these with you. :)

Bri

Thanks! Glad you're enjoying the class. :)

Bri

Hi Anna!

Can you clarify what you mean by "for the posts" for me? Which part of the posts? Or do you mean the posts in the Recent Posts sidebar module?

As for the Archive module, which displays the months, you absolutely can! You'll need to use something unique and identifying from the URL of the archives so you can make each month's link separate from the rest in the module. I suggest using the year and month folders from the URL. You'll also need to adjust the class name to match the one that's used for the Archives module.

So, instead of my example of using the category like so:

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

You would use a setup like:

.module-archives li a[href*="/2012/11"]

The above example will apply your CSS to the URL that contains the folders 2012 and 11 in that specific order.

Try it out and let me know how it works out for you! If the comments automatically close before you can reply, feel free to open a GetSat topic at http://getsatisfaction.com/typepad, or reply to my post about the tip there, to discuss how it worked for you. :D

Anna Farmery

Great - I will give it a go and I assume because my blog started in 2006 I put "/2012/11/10/09 etc?

In terms of the posts - yes I mean the recent posts in the side bar and actually the pages in my sidebar...

I have also posted in Facebook about another problem or something that I would like - maybe a future blog post for you! When the number of posts are longer than what is in the sidebar you are left with blank columns in the sidebar.....have you any ideas of how to make those less unappealing(!) - not that that is a word! Look forward to your comments

Bri

Anna, click on the link for the month you want to apply a custom image to, then copy the year and month folder from the URL that shows in the address bar.

For a month in 2006, the bit that you'd want is going to look like /2006/XX, where XX is the two-digit number for the month in question (e.g. /2006/01, /2006/05, /2006/11).

You would need to separate each month into its own CSS code. For example, there would be a set of code for October 2012 (the format in the URL would be /2012/10) and a separate set of code November 2012 (the format in the URL would be /2012/11).

For the other questions you have, or if you want specific code examples for how to apply this tip elsewhere in your blog, please open a ticket at Help > New Ticket, and I (or one of the other excellent support team members) will reply as soon as the ticket is reached in the queue.

Anna Farmery

Thanks Brianna....don't want custom images just previous posts and comments in black boxes....so may wait until a blog post specifically because not sure 100% - love these masterclass posts, please keep them coming!

The comments to this entry are closed.