Getting to Know CSS: Typepad-specific CSS

May 07, 2014

Back_to_basics_header_css

Welcome to our special series on getting to know CSS! Every other week, we'll debut a new article full of valuable tips and tricks that will help you to understand how CSS works and how to apply it to your blog. We'll cover everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

We've previously introduced you to the concept of CSS and provided information on how to format general CSS elements for use with your blog. Now, we'd like to provide gudiance for using elements that are specific to your Typepad blog.

It's common for websites to use their own CSS names for features, like the banner or sidebar headers. Let's see how you can figure out those names for Typepad. Whether you're using the theme builder or one of our built-in themes, the names will be the same.

The very easiest method is to view the HTML source of the main page of the blog or a page of the blog that shows the element you'd like to customize. In most browsers, just right click on the page and choose "View page source." You'll then see a bunch of code, like the screenshot below.

Screen Shot 2014-05-06 at 1.34.04 PM

Scroll through until you find the element you want to customize, like the post title or a sidebar header. You don't need to locate each instance, just one will do. You'll then look for the "class" or "ID" name right before that element. The below example shows the post title highlighted.

Highlight

The class name for the post title is entry-header so you can add that to your Custom CSS page as:

.entry-header { }

And then add your CSS, like:

.entry-header { font-size: 200%; }

The view source method is great if you just want to customize a few things. If you want to dig even deeper or make lots of changes, we recommend letting browser add-ons do some of the work for you. One we use a lot when designing blog themes is Firebug.

It has a lot of features but one of the handiest is showing you the classes for every element on the page and allowing you to edit the code right there so you can see how it will look. The screenshot below shows that in action.

Firebug

There are other plug-ins and tools you can use. We recommend:

Every element of a Typepad blog has a corresponding CSS class or ID, making it possible to use Custom CSS to fine-tune everything on your blog. If you have a favorite tool that we haven't mentioned, or a tip for fellow Typepad users, please leave a comment below!

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.