Everything Typepad

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.

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:

• Creating an Advanced Template Set
  Information on how to convert your Basic template to Advanced.

• Advanced Template Sets and Template Tags
  A basic overview of how Advanced Templates work.  There are also links to more information about tag syntax and an index for each element of a blog.

• Advanced Templates: Creating and Customizing Template Modules
  We consider this article to be an essential primer on how to work with and customize the modules that you'll see in your Advanced Templates. Includes a video tutorial.

• 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:

• http://watergarden.net/

• http://www.myamericanartist.com/ 

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!

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:

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.

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:

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

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:

• View the top-requested CSS tips in the TypePad Knowledge Base: adding background images, changing column widths, and creating a banner.
• To get familiar with the structure of the pages TypePad outputs, reference the TypePad Weblog Page Structure documentation and graphic.

For more tutorials on learning CSS:

• The W3 Schools CSS site
• HTML Dog's CSS Beginner Tutorial
• West Civ's Complete CSS Guide

Changing Your Page Banner with Custom CSS

Update 2020: The instructions provided below are for our older  themes. We recommend you check out our Design Lab themes. The Design Lab provides you with a graphical interface to make changes to dozens of design elements without the need to know any code! You can easily upload a banner image to customize your blog. 

The last few weeks we’ve been focusing on great design in Typepad. Today we will explain a bit about custom CSS. This post will give you some helpful insight and tips. Here is the first post in the 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.

Custom CSS is available to Typepad Pro, Premium and Business Class customers. To access Custom CSS, log into Typepad and click on the Blogs tab, then the name of your blog. Click on the Design tab, then 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: Updating the BBQ Theme

One theme you can use the Custom CSS is the BBQ theme. This theme is a fun picnic and BBQ theme design to showcase cooking blogs. Here is a screenshot of the original BBQ theme applied to a blog.  

A custom banner will help your blog stand out from other bloggers and instantly let readers know they are at a trusted source. 

First, you need to upload your custom banner to your Typepad Library. Click on the Library tab, then File Manager. On the right, upload your banner image. You will see your image file name in a list of files. Click on the chain link to view the download code. You only need to copy the URL and store it where you can get to it again. Once you have the image URL, you can add it to the CSS below. 

To find your Custom CSS, click on the Blog tab, then the name of the blog. Click on the Design tab, then Custom CSS. Here you will paste in the code below. (look)

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

 

#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 #banner tells the browser to use 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. The CSS #banner-inner tells the browser to hide the Title and Description text so the banner shows through.

You do need to update this code with the height of the image and the image URL you saved from the File Library.

To update the image height, change the XX's to the height of the image. 

height: XXXXpx;

To update the image url, remove the url in the parathese and replace it with the URL from your File Library. 

url(http://link-to-your-graphic-goes-here.com/filename.gif)

Click on Save Changes, then view your blog to see your custom banner on 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:

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

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:

• Anna Farmery - The Engaging Brand
• Beth Blecherman - Techmamas
• Elana Centor - Funny Business
• Ellen Siminoff - Efficient Frontier
• Jory Des Jardins - BlogHer Co-Founder
• Lisa Stone - BlogHer Co-Founder
• Maria Bailey - BlueSuitMom
• Maria Niles - Consumer Pop
• Mary Hunt - In Women We Trust
• Stefania Pomponi Butler - CityMama
• Susan Getgood - Marketing Roadmaps
• Tara Anderson - Lijit
• Toby Bloomberg - Diva Marketing
• Yvonne Divita - Lipsticking

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.

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.

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!

With 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.

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!

As 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!