Previous month:
February 2008
Next month:
April 2008

Posts from March 2008

Learning About Advanced Templates

Now that we've explored Custom CSS, let's discuss a bit about designing with Advanced Templates.  Today's post comes from Colleen from the TypePad Support team:

What are Advanced Templates?
Advanced templates allow you access to the template code for your weblog, including the HTML, CSS and TypePad tags. Changes and edits to the templates must be coded by hand but doing so can provide greater flexibility. An Advanced Template is created when an existing Basic Design, configured with the template builder, is converted via Weblogs > Design > Saved Designs.

At Who can use Advanced Templates?
Advanced Templates are available to Pro, Premium and Business Class members. If you're comfortable with learning new code structure and making edits by hand, then Advanced Templates might be a good option for your blog.

Why would I use Advanced Templates?
Using Advanced Templates allows you to have complete control over the look and feel of your blog. You can add additional stylesheet elements, add functionality that isn't available with a Basic template, or create an entire template from scratch to match an existing website.

How are Advanced Templates different from Custom CSS?
Custom CSS allows you to edit the theme elements of your blog - font colors, column widths, adding background images, etc. Anything that is included in the stylesheet for your blog's theme can be edited and customized with the Custom CSS feature. Advanced Templates give you access to the template code - the structure of posts, the content in the sidebars, adding content between posts, and so on.

In short, Custom CSS allows you to customize the blog's theme and Advanced Templates allows you to customize the content and structure.

Where do I start?
Our Knowledge Base has several articles about Advanced Templates to get you started:

  • TypePad Tips and Tricks
    This article has a list of Advanced Templates Tips with information on how to achieve some commonly used Advanced Templates customizations.

Here are two examples of blogs designed with Advanced Templates:

Pondsupply


Americanartist

Did you use Advanced Templates in the creation of your blog?  If so, link to it in the comments.


Last Chance to Vote for TypePad!

Webwarelargepubpho This is your last chance to vote for TypePad in the 2008 Webware 100 Awards! Voting closes at today at 12 noon PDT.

TypePad is nominated in the "Publishing & Photography" category.  TypePad was selected as a winner last year, so please take a moment to vote to show your love in this year's competition.  Voting is open to everyone!

You can vote three times in each category, so while you're there, consider giving your other two votes to our sister sites, Vox and Movable Type? (Everyone here at Six Apart will be forever grateful!)

Cast your vote for TypePad now


Changing Your Blog’s Background with Custom CSS

This is the second post in a two-part series about Custom CSS by TypePad team member Andy Wibbels:

Stylesafter In our previous lesson, we looked at Colin Beavan’s blog No Impact Man and how he used TypePad’s Custom CSS feature to tweak a pre-defined theme with a spankin’ new page banner. In this quick lesson, we’ll see how he changed the background of his blog to add some visual texture.

Reminder: Custom CSS is available to TypePad Pro, Premium and Business Class customers. To access Custom CSS, login to TypePad and go to Weblogs > (Your Weblog) > Design then scroll down and click on Edit Custom CSS.

Taking a look at Colin’s blog you’ll see that the background is a diagonal cross-hatch pattern.

Crosshatch

As mentioned last time, we recommend you use a pre-defined theme as the foundation for your Custom CSS tweaks. For No Impact Man, Colin chose the Hills Green pre-defined theme. Here is how the blog looks, with Hills Green, before any Custom CSS is applied:

Defaultstyles

Notice the light-blue to white gradient that the whole blog sits on top of:

Bluegrad
Here’s the Custom CSS that Colin used to change from the gradient to the diagonal cross-hatch:

body { background-image: url(http://www.missmaryk.com/nimbg3.gif); background-repeat: repeat; }

This tells the browser, Take the graphic nimbg3.gif and use it for the background, repeat it as much as needed to fill up the background. (You’ll often hear this called ‘tiling’ because it is like using the graphic to ‘tile’ across all the available space.)

Your turn: Upload a graphic for your background and then add to your Custom CSS:

body { background-image: url(http://link-to-your-graphic-goes-here.com/filename.gif); background-repeat: repeat; }

If you have a graphic you don't want to have repeated - or tiled - across the screen, simply tell the browser not to repeat it and it will appear just one time, in the upper left:

body { background-image: url("http://link-to-your-graphic-goes-here.com/filename.gif"); background-repeat: no-repeat; }

Save and reload.

Removing Your Custom CSS Styles

To undo any of these tweaks, simply delete that portion of the Custom CSS code, save and reload your blog.

More About CSS

If you want to delve a bit deeper into CSS and TypePad here are a few resources:

For more tutorials on learning CSS:


Changing Your Page Banner with Custom CSS

The last few weeks we’ve been focusing on great design in TypePad. Today our new TypePad team member Andy Wibbels explains a bit about Custom CSS. Andy’s posts won’t make you a Custom CSS expert, but hopefully they’ll give you some helpful insight or tips. Here is the first post in his two-part series:

A Quick CSS Intro

CSS is short for Cascading Style Sheet and is a feature that allows the customization of the look and feel, layout, and design of your weblog without the need to convert to advanced templates (which we’ll cover in future posts).

A CSS stylesheet is a small file that tells browsers how your blog should appear on the page. It defines the width of the columns, font styles, sizes and colors, margins, background images and other crucial formatting choices. So instead of your blog's code being weighed down with tags that say Make this post title bold and italic and in Arial font... oh and this one too... and this one too... and don't forget this one... all of that style information is centrally located in one file that is loaded once no matter how many pages of a blog a reader views.

TypePad's Custom CSS feature allows bloggers to customize their blog without having to code everything from scratch. You can continue to develop a distinctive blog style that is aligned to your blog's brand and personal taste without the aid of a design team. With Custom CSS, you can turn styles on and off and experiment with various styles and keep or reject changes easily.

EditcustomcssCustom CSS is available to TypePad Pro, Premium and Business Class customers. To access Custom CSS, log in to TypePad and go to Weblogs > (Your Weblog) > Design. Scroll down and click on Edit Custom CSS.  The Custom CSS page loads with a big text box for you to paste in and save your Custom CSS.

Learning by Example: Colin Beavan's No Impact Man

One TypePad blog that takes full advantage of Custom CSS is Colin Beavan’s blog about sustainable living, No Impact Man. (Congratulations, Colin, on having your blog and your cause featured in the April issue of Glamour Magazine!) Here’s a screenshot of Colin’s blog:

Stylesafter_2

Nice clean distinctive design, right?  This stunning design was created by Mary K. Elkins.  There are actually a handful of tweaks Colin uses to make his blog design personalized and memorable. Let's break it apart.

Before applying Custom CSS, it is good to select one of the pre-defined themes as your base theme. For No Impact Man, Colin chose the Hills Green pre-defined theme. Here is how the blog looks, with Hills Green, but before any Custom CSS is applied:

Defaultstyles


The most visible change Colin made was to take the existing page banner and flip in his own custom designed banner. He uploaded the new banner and added Custom CSS so browsers would know to use his banner instead of the wintry hills setting. Here's the Custom CSS:

#banner { height: 338px; background-image: url(http://noimpactman.typepad.com/impactheader.jpg);
background-position: 0px 0px; background-repeat: no-repeat; }

This CSS tells the browser to Use this 338 pixel tall image for the background, put it flush against the left and top sides of the blog and don't repeat it - just show it once.

He also did some fancy code to hide the text of his blog's title so it wouldn't appear over the new banner.

#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }

This CSS tells the browser, Hide the Title and Description text so the banner shows through.

Your turn: Upload your super-fancy custom banner and be sure you know the height of the image as well as what URL it is at. Then add to your Custom CSS:

#banner { height: XXXXpx; background-image: url(http://link-to-your-graphic-goes-here.com/filename.gif); background-position: 0px 0px; background-repeat: no-repeat; }

Save and reload your blog. You'll notice that the text of your blog title and description is still on top of the banner. Let's hide it with that code from above:

#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }

Save and reload and you should now see your custom banner at the top of your blog.

But what if the width of your blog is greater than the width of the banner? You can center it.

Go into Custom CSS and enter:

#banner {background-position: center;}

Save and reload.

Alternately you can align the banner flush right with

#banner {background-position: right;}

To undo any of these tweaks, simply delete that portion of the Custom CSS code, save and reload your blog.

Stay Tuned for More Custom CSS
Tomorrow, we’ll take another look at other tweaks and changes you can make using TypePad’s Custom CSS feature.  In the meantime, you can read the Help article "Adding a Banner to a Pre-Defined Theme" and show off your use of Custom CSS by linking to your blog in the comments.


Two New Themes From HP

We've just added two new themes courtesy of Gwen Stefani and HP which will only be available for a limited time.  You can keep them on your blog as long as you'd like, but you'll have to grab them now before they disappear from our theme gallery.

Check out HP Love and HP Music:
Tphpthemes

If you haven't stopped by the "What Do You Have To Say?" theme design contest page lately, you're missing out on some fantastic submissions!  So far there have been over 80 submissions and hundreds of votes have been collected.

  • Share your inspiration: Designers, don't forget to submit your themes by April 4th.  If you already submitted a design, be sure to get the word out to friends, family and fans to vote for your entry.
  • Have your say: Community voting is open until April 11th.  You can vote once per design, so check back to support all of your favorites!

Visit the "What Do You Have To Say?" theme design contest site for more details, be sure to read all the rules, and cast your vote!


Join Us at BlogHer Business '08

Blogher At Six Apart, the makers of TypePad, Vox and Movable Type, we’ll use any excuse we can to mix business and pleasure. It’s not that hard since we love what we do, but we thought since BlogHer Business ’08 is just around the corner, it would be a perfect excuse to hang out with any TypePad members who might be in attendance. We’d love to take the opportunity to get to know you, buy you a cup of coffee, and talk about what really matters: you & your blog.

BlogHer Business '08 has an awesome lineup of speakers, including several TypePad members.  Whether or not you're able to attend the conference, you can visit their blogs at any time:

If you're planning on attending the BlogHer Business ’08, please let us know in the comments. We’ll get in touch to let you know where we’re going to be and when.

Hope to see you in NYC!


New Themes from Vox & HP

Last month we let you know we'd be bringing some Vox themes to TypePad, and asked you which themes you'd like to see here first.  Hundreds of you voted and chose the Huntington and Cityscape themes as your priority.  We've just added six color variations of the Huntington themes and four of the Cityscape themes. 

We also added three themes from Gwen Stefani and HP, which will only be available for a limited time.  You can keep them on your blog as long as you'd like, but you'll have to grab them now before they disappear from our theme gallery.

Themes1305_2

Left to Right: 
HP Lovers Plug In, HP Lovers Rock, HP Plugin, Cityscape NYC, Cityscape Paris, Cityscape SF, Cityscape Tokyo, Huntington Black, Huntington Blue, Huntington Brown, Huntington Green, Huntington Pink, Huntington Wine 


Announcing the “What Do You Have To Say” Theme Contest

Design has always been a focus at Six Apart, and in recent weeks we’ve incorporated more and more themes here in TypePad.  Many of you have shared your feedback on what types of themes you'd like to see here, and now we have a new opportunity for you to have a say in which themes we add.

Today we're launching the "What Do You Have To Say?" theme design contest.  You can have your say in two ways: 

  • Are you a designer?  Create a theme that inspires you and enter it into the contest.
  • Not a designer? Share your vision by voting on your favorite design.

Hpcontestsite_2

A panel of judges will select three winners who will win some cool prizes.  The community will vote to determine one "Community Prize" winner who will receive all the kudos and glory we can heap upon them.  All of the winning themes will be made available to millions of bloggers on TypePad, Vox and LiveJournal.

Take note of these important dates:

  • Designers: submit your themes between now and April 4th.
  • Community voting is open until April 11th.
  • The winners will be announced at the end of April.

Visit the "What Do You Have To Say?" theme design contest site for more details, be sure to read all the rules, and then submit your theme today! 


Jazz up your blog with a Custom Theme!

Custom ThemeWith all the attention lately on weblog design, we want to share with you about the great tools you already have in TypePad.

TypePad's theme builder gives you the opportunity to create a unique design without the need to know any HTML or CSS. You can use a Custom Theme to select the colors and styles of individual elements of your blog. You can upload a custom banner image with your own logo to grab the attention of your readers. Background colors and text styles can be selected for content displayed in each column.

With a Custom Theme, you can select from any of the available layouts, including one, two, or three columns with additional Mixed Media layouts that highlight photos.

Two examples of TypePad blogs using custom themes are The Zen Birdfeeder and Fathom Harvill.

The Zen BirdfeederFathom Harvill

To see TypePad's design tools in action, we also have a video available on configuring a Custom Theme for your blog.

With all of these tools at your fingertips, it's easy to turn your TypePad blog into a work of art!

- Jen and the Support Team


Apple hits 100,000 iPhone SDK downloads; we're excited!

CommentssAs you can probably imagine, we're very excited about the possibilities that the new iPhone Software Development Kit opens up for mobile application development.  Last week we announced that we'll be developing a native iPhone application, as a complement to our existing TypePad for iPhone web app. (If you're a TypePad user with an iPhone or iPod Touch, visit i.typepad.com to check it out.) Today there's plenty of coverage about Apple's SDK topping 100,000 downloads, and our very own Chris Alden is quoted in Apple's press release announcing that milestone:

"Six Apart pioneered the mobile blogging experience with an iPhone-optimized blog service," said Chris Alden, CEO, Six Apart. "We're taking it to the next level with our native iPhone application for TypePad that's already in development."

What's gratifying for everyone on the TypePad team is that our iPhone web app started as a "hackathon" project for Walt Dickinson, one of our rock star designers and front-end engineers at Six Apart. (Walt's a long time Mac user and Apple fan, so to see his work show up in an Apple press release was pretty cool.)

But what's a "hackathon" you ask? Every Wednesday we clear the calendars and encourage our engineers, designers and even marketers to hack on a project of their choice. And out of those Wednesdays we get great features like the iPhone web app for TypePad, and plugins for TypePad's sister product Movable Type like Mark Paschal's Action Streams Plugin and Ben Trott's new Fire Eagle Plugin (just announced today).

So we're excited about the iPhone, obviously.  But it's only part of the story of what we're doing at Six Apart. If you're interested in helping us invent the future of blogging -- and have the freedom to hack your projects on Wednesdays -- we're hiring, so get in touch!