Typepad 101: The Dos and Dont's of Custom CSS

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tips here are suitable for bloggers at varying levels, from basic to intermediate. Need tips on how to make something work for you? Leave a comment! Your Support team and fellow Typepad bloggers are always here to lend a hand.

The Custom CSS feature is a great way to make style changes to your blog without starting from scratch with a design. It allows you to make changes to font styles, design colors, widths, positioning, backgrounds - the options are almost limitless. We know that code like CSS can be a little intimidating but we think it's worth the effort and it can be really fun.

We introduced you to the Custom CSS feature not long ago to get you started. Here are some more basic tips we want to share for using Custom CSS. Add your own in the comments!

Do have a solid place to start
We've created the CSS Cookbook as a resource you can use to find copy and paste code to get you started with using CSS. There are also lots of tips in the Knowledge Base and right here on Everything Typepad.

Do start small
You might be tempted to go whole-hog and drop in a bunch of CSS to see what happens. That can be a fun adventure but you might waste time with unwanted changes. Instead, try adding in one bit of code at a time and using the Preview function to take a look at the results. You can also create a test blog for trying out new design ideas before using them on your live blog.

Don't use the Custom CSS page for code that isn't CSS
We sometimes see JavaScript, HTML, and other content in the Custom CSS area and that will prevent the CSS after it from working properly. Try the Embed your own HTML or Head modules for that type of code instead.

Do keep your code organized
It's helpful to group code in sections by area of the blog, such as putting all of the navigation bar code together, all of the post code together, and so on. This is also helpful for Support if you reach out to us for help with your code - it's easier to see issues if your code is organized well.

Don't be afraid to make mistakes
Sometimes you just can't get something to work the way you want and that's not a big deal. The Custom CSS page makes it easy to drop code in or take it out whenever you want without having to go through a lot of files. It's all on one page.