Typepad Master Class: Tips and Tools for Creating Themes

March 13, 2013

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.

We've previously covered steps for getting started with making themes. Now we'd like to give you some tips and tricks we use ourselves when creating themes and remind you how you can submit a theme so it can be used by other Typepad subscribers.

First, some basic tips.

Just do it! Start out small by customizing the colors for the Tonic theme. There are only four lines of CSS!

body { background-color: #;}
#banner, #footer-inner { background-color: #; }
#alpha, #beta, #gamma { background-color: #; }
h2.date-header { color: #; }

Apply the Tonic theme to your blog, copy the CSS above, paste it in Custom CSS, plug in your own colors and you're done.

Or if you're more ambitious, try customizing the colors for the Clean theme. Apply the theme to your blog and check out the CSS for one of the color variations. Copy the code and paste it into Custom CSS and from there, you can edit the colors to your heart's content. It's a fun, easy way to get started.

You don't need to start from scratch, ever. The Heartbeats theme we came out with before Valentine's Day was created with Dapper as a starting point, and Dapper is based on Clean. Why reinvent the wheel? Pick a theme you like the general idea of and go from there.

There is no one right way to go about making a theme. Maybe you like to draw the design first in Photoshop and then code it or maybe you like to just start fiddling with colors and fonts to see what you like. It's up to you.

Tools and Resources

Every designer has their own favorite tools; here are some we like:

Firebug
This is a handy browser extension that allows you to edit code and see the result on the live page, without having to change the actual code so it's published. You can then copy the code, paste it in  Custom CSS in Typepad and save there.

Web Developer Plug-in
This plug-in and the Firebug extension complement each other well. They have similar features but are in different formats so you might like one over the other.

Live CSS Editor
Allows you to open a little text box for any web page so you can type in CSS and immediately see the result.

Design Seeds
Lots and lots and LOTS of color scheme ideas. This site is invaluable if you're stuck and need some inspiration for colors.

Google Web Fonts
This is our preferred service for adding in fancy fonts to our themes. Choose a font, click Quick Use, copy the @import URL for the font and paste it in Custom CSS. Make sure to apply the font to the correct classes in the CSS.

Using Google's Web Fonts
Using Google's Web Fonts

CSS3 Generator
Fun little tool for cranking out CSS in a snap.

Pixabay
Solid resource for public domain images that you'll actually want to use.

Subtle Patterns
Exactly what it sounds like. A bit of visual interest with texture can go a long way.

CSS at Smashing Magazine
If you really want to get into the nerdy stuff, Smashing Magazine has tons of information.

Submit Your Theme!

One of our goals for this year is to get you - the community - more involved with Typepad's feature development. Putting out new themes on a regular basis is part of that and we want to get all of you designers out there on board with stocking the theme gallery with great designs.

The themes that have proven to be the most popular aren't the fanciest or have the most images involved. In fact, the simple, clean themes are the ones that do best. So don't think you have to spend hours and hours toiling away on a design.

To submit a theme, just go here and fill out the form. We'll contact you about the next steps for getting your design featured on Typepad.

If you have questions about creating or submitting a theme, just let us know by opening a help ticket or dropping us an email.

Share Your Ideas

Even if you're not a designer, you can get involved by sharing ideas for color schemes, themes, and designs you'd like to see. Feel free to leave a comment below - we'd love to hear your feedback.

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.