Weblogs

Design

What are TypePad Template Sets?

Template sets determine the layout, content and style of your weblog.  When you publish a new weblog post, your post will take on the style and formatting indicated by a particular template.  Template sets are the collection of a variety of templates serving unique purposes (i.e. archives and index pages).

The Template Builder gives you control over the layout of your weblog, the content that appears on your weblog (your lists, photo albums, and other pieces of content), and the design and style of your weblog.

You can create template sets that match the topic and subject of your weblog.  For example, if you have a Reading Journal that discusses the books that you’re reading, you can create a template set that includes your Reading TypeList in your sidebar in order to highlight your reading material.

Types of Template Sets

There are two types of template sets, basic and advanced:

Basic Template Sets

Basic Template Sets are modified using the TypePad Template Builder.

Also see: Creating a New Basic Template Set

Advanced Template Sets

Advanced Template Sets allow you to directly edit the code that produces your weblog pages.

Also see: What are Advanced Template Sets?

[top]

Selecting a Template Set for Your Weblog

Click the Design tab for your weblog if you are not already on it, or use the Edit DesignEdit Design shortcut link for the weblog on your Weblogs tab.

On the Design tab for the weblog, you can set the template set to use on that weblog:

1 Select the template set

Use the Select a different template set for your weblog pull-down menu that contains all of the weblog template sets that are associated with your account.

To preview a design, simply select the design from the menu and press “Preview”.

The content area in a “fluid” layout changes size when the browser window is resized.  The area where your weblog posts are displayed expands or contracts to work with the size of the browser window.

Otherwise the content area is a fixed width (such as 400 pixels), which means that the width of the content stays the same no matter what size the browser window is.

2 Press “Use this Template Set”

Once you have decided on a template set to use, press “Use this Template Set”.  The template set has now been assigned to your weblog.

3 Publish your weblog

After assigning the template, your Design page in TypePad will update to reflect the currently selected template set.  Under the template name and description, you’ll see two buttons:  Preview and Publish.  You can preview the template, and then publish your weblog to make the changes public.

After publishing, click the View Weblog link to open your weblog in a new window and view your new template, refreshing the page in your browser if necessary.

Shared Template Sets

We have included a number of default templates to get you started building your weblog.  You can switch to one of these at any time, and these default templates are marked as “Shared” in the template menu.

[top]

Creating a New Basic Template Set

Click the Design tab for your weblog if you are not already on it, or use the Edit DesignEdit Design shortcut link for the weblog on your Weblogs tab.

On the Design tab, use the Create a new Template Set area to add a new template set.  You have the choice of creating a new design from scratch using the “New Design” option, or create a new template set based on an existing template using the “Based on” option.  Use the drop-down menu to select the template to base your new template on if you are using this option.

TypePad Template Builder

The TypePad Template Builder is divided into five sections:

Layout sets the column layout for the template set.

Content sets which items to display on the template set.

Order is where the sidebar items for the template set are arranged.

Style sets the styles (such as colors, fonts, borders and widths) for the template set.

Basics is where the template set is named.

See the individual sections below for details on each.

[top]

Setting Your Template Layout

The Layout of the template determines how many columns are used for the display of the weblog.

Your layout can have one, two, or three columns:

1 Column
A single column design puts your posts front and center.  The clean, uncluttered layout will make people focus on the text or photos that you’ve posted, without any other elements to distract from your ideas.  Your links and other information appear below the main weblog.
2 Columns Left
A two column design is a simple but flexible choice that tucks your links and TypeLists neatly to the side.  Your posts have plenty of space, but there’s room for a good amount of additional information.
2 Columns Right
This two column design is simple and flexible, placing your links and TypeLists on the right side of the page.  Posts have plenty of space, and additional information is easy to get to.
3 Columns
A three column layout is your best choice if you have a lot of supplementary information that you’d like to present along with your main weblog posts.  This gives the page more of a formal structure and offers the most space for photos, links, and TypeLists.

You can also select a Mixed Media Layout.

After selecting the layout, press the button to save.

[top]

Setting Your Template Content

The Content of your template consists of the items that you select for display in your weblog posts and sidebar:

Your Weblog Posts

Weblog Date Header
The date header groups your posts by date written.  The date is displayed on your weblog at each change of date.  Use this setting to enable or disable the display of the date header.
Weblog Post Title
This is the title of the weblog post.  You need to enter a title when creating or editing a post for the title to display with this option enabled.  Use this setting to enable or disable the display of the post title.
Weblog Post Footer
The post footer contains information about the post including the name of the author of the post, the post date, category, permalink, and links to Comments and TrackBack.
Use the checkbox to enable or disable the display of the post footer.  If the footer is enabled for display, select the post footer style with the drop-down menu.
Everything TypePad: Customizing your Weblog Post Footer

The Permalink is the permanent location for the post.  When you click the Permalink it takes you to the archive page for that post, which is used to link directly to that specific post.

When a post is no longer displayed on the Main Index, it is still always accessible at the Permalink location.  By default, the post footer will always have a permalink.

Your Sidebar Content

Your Photo
This is the photo from your author profile, which is uploaded by Editing Your Author Profile.
Side Calendar
The calendar displays the current month with links to the archives for this month.  This option is not available with Mixed Media Templates.
Recent Posts
Displays links to your 10 most recent posts.
Recent Comments
Displays links to your 10 most recent comments.
Amazon Wish List
Displays items from your Amazon Wish List. For more information about configuring your Amazon Wish List, see Displaying Your Amazon Wish List. This option is not available with Mixed Media Templates.
Archive Links
Displays a list of links to your 10 most recent archives.  List your most recent archives in the weblog sidebar for access to posts once they are not displayed on the Main Index.
Categories
This is a list of the categories used for the weblog (the categories that have posts assigned to them).
If category archiving is enabled for the weblog, the category names will also be links to each category’s archive page.  You can enable category archives by Configuring Your Weblog Archives.
About Page Link
Displays a link to your About Page.  Your About Page is set up by Customizing Your About Page.
Email Link
Displays a link to your email address.
Your address will be automatically encoded for protection against most spam harvesters.  However, if you are concerned about privacy, keep in mind that the most surefire way to protect against spam harvesters is to never display your email address at all.
Set your email address by Editing Your Author Profile.
Syndicate Link
Displays a link to the RSS version of your site that reads “Syndicate this site (XML)”
Subscribe Link
Displays a link allowing your readers to add you to their People TypeList that reads “Add me to your TypePad People list”
Your Photo Albums
Displays an alphabetical list of your photo albums, with thumbnail images.  This option is not available with Mixed Media Templates.
TypePad Recently Updated List
Displays the list of recently updated weblogs from typepad.com.  This option is not available with Mixed Media Templates.
Powered by TypePad Link
Displays a link to TypePad that reads “Powered by TypePad”
Member since... date
Displays the date that you joined TypePad.
Your TypeLists

The TypeLists you have in the system are listed to select as content and you can check the box for the list(s) you would like to display.  If you select an empty list, the list will appear empty on your weblog.  Add new TypeLists for display by Creating a New TypeList.

After selecting the content, press the button to save.

[top]

Setting Your Template Order

On the Order page, you can arrange the items that you selected while Setting Your Template Content.  Click and drag each item into the appropriate position to order the items on your weblog.

After making changes to the order, press the button to save.

Note: This feature is not available with Mixed Media Templates.

[top]

Setting Your Template Style

The Style controls the colors, fonts, borders, widths and other formatting on your weblog.

Basic Level Templates

The styles with Basic membership are pre-designed.  Select the style you would like to use with the drop-down menu and Save to apply it to your weblog.

Mixed Media Templates

The Mixed Media Templates offer pre-designed styles.  Select the style you would like to use then Save to apply it to your weblog.

Plus/Pro Level Templates

The styles with Plus and Pro membership have customizable elements where you can set the separate colors, fonts, borders, and column widths, or upload a banner image.

After you change an element, the preview text on the Weblog Styles page will update to reflect the choices you’ve made.  Press the Preview button to see what your page would look like with the current settings.

After making the changes to the various elements, save the template set on the Weblog Styles page to update the style on your weblog.


Customizable elements:

General Page Settings

This element sets the background color of the page, the width and background color of the main content column, and the width and the background color of the sidebar(s).   You can also add borders for these items, and set the main link style for the weblog.

This element sets a text banner or an image banner.  Using a text banner, you can set the text color and background color.  You can also specify the text font, size, style, alignment, and a border for the banner.  Using an image banner, browse for the image on your computer and upload it to your weblog.

Weblog Posts

This element sets the style for the Date Header, Post Title, Post Body and Post Footer.  Set the text font, size, color, alignment, style, and set a border.  You can also set the line spacing for the post body.

Sidebar Items

This element sets the style for the Sidebar Items.  Set the text font, size, color, alignment, style, and set a border.  You can also set the line spacing for the sidebar items and the border for sidebar images.

Choose to specify a different link style to use for the sidebar, or use the same as the General Page Settings.

After making changes to the style, press the button to save.

[top]

Setting Your Template Basics

On the Basics page, you can change the name of the template set, and enter a description.

Give your template set a name
Enter the name for your template set.
Renaming Template Sets

When you make changes and updates to your template sets (as well as create new sets based on existing ones), you’ll want to give your template sets unique names that reflect the design or purpose.

Renaming a template set is a way to help keep things more organized and easier to understand as you create more sets.

Give your template set a description
Enter the description for your template set, as a reminder about what this template set is for.

After making changes to the basics, press the button to save.

[top]

Editing a Basic Template Set

Changes made to a template set will apply in all places the template is used.

Your TypePad Template Sets

Click the Design tab for your weblog if you are not already on it, or use the Edit DesignEdit Design shortcut link for the weblog on your Weblogs tab.

There, you can click the Edit Template Sets link to view the list of Your TypePad Template Sets.

The template sets that you have created or edited through the TypePad template builder are listed.  Click on the template set name to open a preview of a template in a new browser window. Click on the section name (such as Layout, Content, Order, Style, Basics) to edit a particular section of a template.

If you have any advanced templates, these are listed at the bottom.  Click the name of the template set or the “Edit” link to open the advanced template for editing.

Deleting Template Sets

Remove a template set by checking the box for that set under the “Remove” heading.  Press the “Remove” button and the set will be permanently removed from your account.  If the template set is currently assigned to a weblog, you will receive a message that the set is in use and cannot be deleted until it is unassigned from the weblog.

[top]

What are Advanced Template Sets?

(Advanced templates are available with Pro membership.)

Advanced Template Sets are templates that can be customized through direct editing of HTML, CSS and TypePad template tags.  Advanced Template Sets are created when existing template sets built by the TypePad template builder are converted.

Why would I want to convert a template set?

If you know HTML or feel comfortable adding or removing TypePad template tags, you may want more control over your design and format of your weblog.  You may want to customize your weblog in ways that are not possible with the template builder.

Also, you may have an existing weblog design built for another weblogging system that you will want to import into TypePad.  Converting template sets is for those users who feel comfortable getting their hands dirty with the technologies behind template sets.

What does converting a template set do?

When you convert a template set, the system is first cloning an existing TypePad template set that you have built with the template builder.  Then, the template set is converted into a format that you can directly edit as an Advanced Template Set.

Even after the conversion, your original template set still exists in a format that can be edited through the template builder.

Why can’t I just create an Advanced Template Set from scratch?

Cloning and converting an existing template set is a way for the system to guarantee that all of the elements of an advanced template set are in place when you begin editing the individual template pages.

Once you have your advanced template set, you can edit it to change your templates to use an existing layout you have, such as a template from Movable Type or another weblogging system.

Why don’t I see an option to convert my template set?

If you are using a Mixed Media Template, you will not see the conversion option. Mixed media layouts are not available for conversion to advanced template sets at this time.

[top]

Creating an Advanced Template Set

(Advanced templates are available with Pro membership.)

If you are not already on the Design tab for your weblog, click the Design tab or the Edit DesignEdit Design shortcut link for the weblog on your Weblogs tab.

There, you can click the Edit Template Sets link to view the list of Your TypePad Template Sets:

1 Select the template set to convert

Click the checkbox next to the template set that you would like to create an advanced template from.

When you convert a template set, the existing template set will not be changed.  Instead, a new advanced template set will be created based on the existing template set.

2 Press “Convert”

Press the Convert button and you will be prompted by a pop-up window asking whether you wish to proceed with the conversion.  Click “Yes, Convert.”

After clicking the confirmation, you’ll see your new advanced template set listed in Your Advanced Template Sets, and it can be edited by clicking on the set’s name or on the Edit link.

3 Assign the advanced template set to your weblog

Click the Design tab and use the Select a different template set for your weblog drop-down menu to assign the advanced template to your weblog.  The weblog stays assigned with the basic template until you change it.

[top]



Copyright © 2003-2004 Six Apart