All About Blog Design

Customizing Chroma: Hiding sidebar modules

You can hide any of the sidebar modules in the Chroma theme with just a couple of lines of CSS. Each module has a unique class that allows you to control the styling of that specific module, including whether or not is displayed. I must say, however, that I think the Follow module is really useful, so I wouldn't recommend hiding that if at all possible.

To hide the profile/following module, simply add the following to Custom CSS:

.module-profilefollowing { display: none; }

To hide the elsewhere accounts module, add the following to Custom CSS:

.module-elsewhere { display: none; }

To hide the recent comments module, add the following to Custom CSS:

.module-recent-comments-mb { display: none; }

That's it! Hope that helps.

Customizing Chroma: Putting an ad above the fold

Even though Chroma doesn't give you full control over your sidebar you can still put a 300x250 ad above the profile module using Custom Sidebar and Custom CSS.

The idea is to add padding to top of the sidebar column and then absolutely position the ad above the other modules.

First, add the following to Custom Sidebar:

<div class="custom-ad-module">
insert your ad code goes here
</div>


Then add this to Custom CSS:

#beta-inner {
    padding-top: 270px;
}
.custom-ad-module {
    width: 300px;
    height: 250px;
    position: absolute;
    top: 0;
    left: 0;
}

That's it! This trick will work for anything that has a fixed height. Simply add 20px to the the height of the element that you want to insert in that position so the modules have some space in between them.

Customizing Chroma: Removing the blog name and description

Even though the Chroma theme for TypePad is designed to be simple and look great right of the of the box, there are still some cool things that Pro users can do to customize it using Custom CSS and other little tricks. Over the next few days I'm going to post some tutorials on how to make it your own.

Removing the blog name and description

If you have a banner image that includes your logo or blog name you can hide the blog name and description that appear on a dark grey, semi-transparent background over the banner image.

In the design tab, go to Custom CSS and simply add the following:

#banner-inner { visibility: hidden }

That's it! You can see how it looks on my blog Starter Kit.

If you're a TypePad Micro user you can upgrade to Pro!

Everything TypePad: CSS Hacking: 1 Column, Sidebars Underneath

If there's one thing I love, it's a good puzzle. I am completely enamored with the trend of a 1-column blog design and Jim's Journal theme for TypePad is always a favorite. Minimal and spare. Here's a test blog setup with the 3 Columns, Right layout:Now let's put the same blog in TypePad's 1-Column Layout: (Design > Layout)The default 1-column layout keeps the overall width of a theme, and then tucks the all the sidebar and module widgets underneath with the same width as the content. I want something narrower - and I'd rather have the 2 sidebars underneath the blog content, side-by-side. Let's see how far I can get:

via everything.typepad.com

My colleague Andy Wibbels has a really great post on Everything TypePad today about modifying the layout of your TypePad theme using CSS.

New theme: Pico

I'm happy to announce the newest TypePad theme, Pico. I was inspired by my colleague Michael Sippey's blog to create something extremely simple that would be perfect for posting photos, videos and other random things.

Pico comes in four colors: dark grey, dark blue, tan and white but only one layout -- 1 column. To use Pico make sure you select the 1-column layout in the design tab first.

Customizing the colors via CSS is extremely easy. I'll do a post about that soon.

Great use of a background image with Journal

Today I just happened upon Randy Thomas' blog Everyday Thoughts Collected (note: this site seems to no longer use the Journal theme) and noticed a nice little customization he's made to the Journal theme.

He's simply added the following to Custom CSS in TypePad:

body { background-image: url("[image url here]"); background-repeat: repeat; }

The result is a subtle background for the entire page which adds a really nice feel to the blog.

(Obviously, if anyone else would like to do the same thing, you should find or create your own background image and not use Randy's without permission.)

Seemed like a good idea at the time

When I originally created the Journal theme, I decided to add an indent to paragraphs within the body of each post. A few people have asked me how to undo this and I've actually started to think that I like it better without it. I've mentioned it in comments, but here's how to get rid of the indent.

Just add the following to Custom CSS:

.entry-content p { text-indent: 0; }

If you have questions, don't hesitate to comment on this post.

Have a question about designing blogs on TypePad?

Go ahead and ask in the comments of this post!

Don't hide the good stuff

I was looking at Yahoo this morning and I noticed a story about the NFL draft in the featured area at the top of the homepage. The headline was "NFL draft grades: One NFC team gets an 'A'."

When I clicked on it and went to the article page I felt like I'd landed on the wrong story. It was just a dense paragraph about each team that listed all the picks with a bit of commentary. Also, it was grouped by division rather than being listed from best to worst. I scrolled to the bottom of the page looking for a chart or list or something. And then I noticed the grade after the words "Bottom line:" and I realized that was what I was supposed to be looking for. The homepage promised me grades but instead of featuring the grades it hid them from me.

They should have made the grades bigger and more noticeable and perhaps ordered the teams by grade so that users can scan from top to bottom and know immediately who did well and who did poorly without having to mentally pick through the player names, team logos, etc. Make the fun stuff stand out!

Adding a footer to your TypePad blog

Warning: This is for advanced users only.

We released a new "Embed your own HTML" sidebar module recently and you can actually use that to create a footer on your TypePad blog if you're using the new "Journal" theme.

Go to the "Content" section of the Design tab in TypePad and find the "Embed your own HTML" module in the Widgets category. Add that to your blog and move it to the lower right position in the far-right column. Add the following HTML into that widget:

</div></div>
</div></div>
<div style="clear: both; border-top: 1px solid #eee; padding-top: 15px; font-family: arial; color: #777;" >
<div>&copy; 2009 Your Name. <a href="http://www.typepad.com/" title="Blog">Blog</a> powered by <a href="http://www.typepad.com/" title="TypePad">TypePad</a>. Check out my <a href="#">TypePad Profile</a>.


Obviously, you'll need to update the text and links. Make sure again that the module is at the bottom of the far-right column.

Remember to save the changes on the Content section and it should work!

This may work for other themes besides Journal, but I haven't checked it on all of them.