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:
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!)