Weblogs

Design

What are TypePad Designs?

Designs determine the layout, content and visual theme of your weblog. When you publish a new weblog post, your post will take on the style and formatting indicated by a particular design.

The Design tab 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 visual theme of your weblog.

You can create designs 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 design that highlights your reading material by including your Reading TypeList in your sidebar.

Types of Designs

There are two types of designs:

Basic Designs

Basic Designs use TypePad's built-in design editing functions and professionally-designed themes and layouts.

Also see: Creating a New Basic Design

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 Design for Your Weblog

Click the Design sub-tab under the Weblogs tab, or click the Edit Design shortcut link from Your Weblogs page. On the Design sub-tab, the Edit Current page appears by default, with sections featuring your Design Name, Your Theme & Layout, and Your Content:

Changing Your Design Name and Description

Renaming a design is a way to help keep things more organized and easier to understand as you create more designs. Click the Change Name and Description link. The Edit Weblog Templates: Name and Description page appears. Follow the instructions on Setting Your Design Name and Description.

Changing Your Theme

Your Theme sets a pre-defined or custom theme (such as colors, fonts, borders and widths). Your selected theme and layout descriptions appear in the Your Theme & Layout section. To change your theme, click the Change Theme link. The Edit Weblog Templates: Theme page appears. Follow the instructions on Setting Your Theme.

Changing Your Layout

Your Layout sets the column layout for the design. Your selected theme and layout descriptions appear in the Your Theme & Layout section. To change your layout, click the Change Layout link. The Edit Weblog Templates: Layout page appears. Follow the instructions on Setting Your Layout.

Editing Custom CSS (available to Pro Users only)

If you want to use your own Cascading Style Sheet (CSS), you can insert it into your design by clicking the Edit Custom CSS link from the Your Theme & Layout section. The Edit Weblog Templates: Custom CSS page appears. You can then paste the contents of your CSS code into the text box. Click Preview to see how your weblog will appear with your CSS code, or click Save Changes when you are finished.

Changing Your Content

You can change what type of content appears in your weblog, as well as the order in which it appears. To change your content selections, click the Change Content Selections link. Follow the instructions on Setting Your Content Selections. To change the order of your content, click the Change Ordering link under Your Content. Follow the instructions on Setting Your Content Ordering.

[top]

Creating a New Basic Design

Click the Design sub-tab under the Weblogs tab, or click the Edit Design shortcut link from Your Weblogs page. On the Design sub-tab, click the Create New link.

TypePad Design Creation Wizard

The TypePad Design Creation Wizard is divided into five sections:

Layout sets the column layout for the design.

Content Selections sets which items to display on your weblog.

Content Ordering sets how sidebar items for your weblog are arranged.

Theme sets a pre-defined or custom theme (such as colors, fonts, borders and widths).

Save Template Set sets the name and description for your design and prompts you to save it.

After you have made your selections for each section, you can click Preview to see what you've done so far or click the next step button to take you to the next section. See the individual sections below for details on each.

[top]

Setting Your Layout

Tip: To select and immediately apply a layout, double-click it. 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.; Fluid and Fixed Width Layouts

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.

Mixed Media Layouts

Mixed Media Layouts are perfect for displaying a mix of text, photos, video, audio and other types of media. They are ideal when posting remotely using a mobile device such as a mobile phone with camera.

In this example, a Mixed Media Layout is being used for a mobile phone photo weblog.

When Using Mixed Media Layouts Keep in Mind:

Photos posted to Your Photo Album will not appear in a Mixed Media Layout, although you can post photos separately to a Mixed Media Layout.
You cannot use the Side Calendar or the TypePad Recently Updated List in a Mixed Media Layout.
You can choose which of your TypeLists to display in the Layout.
You can't convert Mixed Media Layouts to Advanced Template Sets.
Mixed Media Layouts do not use TypePad's drag and drop content layout editor.
Any new images that you post with the Insert Image button on the New Post page or send via mobile posting will appear as mixed media images.

[top]

Setting Your Content Selections

Your Content Selections are the items 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.

Permalink

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

Text Ads: Displays customizable text ads that earn advertising revenue. See Configuring Text Ads for more information. This option is not available with Mixed Media Templates.
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.
Add Tip Jar: Displays a customizable Tip Jar that allows you to earn tips on your weblog or gather donations for your favorite causees. See Configuring Your Tip Jar for more information.
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.
Recent Posts: Displays links to your 10 most recent posts.
Recent Comments: Displays links to your 10 most recent comments.
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.
About Page Link: Displays a link to your About Page. Your About Page is set up by Customizing Your About Page.
Your Photo: This is the photo from your author profile, which is uploaded by Editing Your Author Profile.
Online Status: Displays your current status in real time for each registered instant messaging address in your profile. From your weblog a user can then click on the corresponding screen name to initiate an instant messaging session with you.
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.
Subscribe Link: Displays a link allowing your readers to add you to their People TypeList that reads Add me to your TypePad People list.
Syndicate Link: Displays a link to the RSS version of your site that reads "Syndicate this site (XML)."
Podcast Link: Displays a link to the RSS version of your site that contains the necessary elements for users to subscribe to any media files you post or reference. The link reads "Subscribe to my postcast."
Recent Updates: 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 and the date 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.

[top]

Your Feeds on the Content Selections screen.

Your Feeds

A list of feeds you are currently subscribed to are listed select as content for your weblog. Check the box next to the feeds you wish to appear in your weblog's sidebar. Each feed you subscribe to can be configured display a custom name for the feed. In addition, you can choose to display either the first 5 or 10 entries listed in the feed. To add a new feed click the "Add a new feed" link. To delete an existing feed, click the trashcan () icon. And to configure an existing feed, click the "Configure" link next to the feed. What is a feed?

Configure a Feed.

[top]

Your Photo Albums

The Photo Albums you have in the system, both public and private, are listed to select as content for your weblog. You can check the box for the album(s) you would like to display in your sidebar. You can add new Photo Albums for display by Creating a New Photo Album.

Your Photo Albums on the Content Selections screen.

[top]

Setting Your Content Ordering

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

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

[top]

Setting Your Theme

Select the radio button to either choose from a variety of Pre-defined Themes, or create a Custom Theme.

Pre-defined Themes

When this option is selected, you can browse a number of pre-defined themes organized by categories. Click Preview to see how your weblog will appear with the theme you selected, or click Save Changes to use the theme. To change the theme category, select a new option from the Show drop-down menu (Tip: To select and immediately apply a theme, double-click it). In this example, the Folio theme is selected from the Bold Palettes category:

Custom Theme

When this option is selected, you can customize any of the following elements by clicking Edit This Element. Click Preview to see how your weblog will appear with the theme you selected, or click Save Changes to use the theme:

General Page Settings - The Design Creation Wizard: Style: Page Settings page appears as a pop-up. Use the various drop-down menus and color palettes to make changes to the screen elements sections listed. When you finish making changes, click Save Changes. To change a color, you can click a pre-defined color from the color bar or enter a color value in the text box next to the color bar as shown:
Page Banner - The Design Creation Wizard: Style: Page Banner page appears as a pop-up. Use the various drop-down menus and color palettes to make changes to the screen elements sections listed. You can also attach your own banner image by clicking Choose File and navigating to the image on your hard drive. When you finish making changes, click Save Changes.
Weblog Posts - The Design Creation Wizard: Style: Weblog Posts page appears as a pop-up. Use the various drop-down menus and color palettes to make changes to the screen elements sections listed. When you finish making changes, click Save Changes.
Sidebar Items - The Design Creation Wizard: Style: Sidebar Items page appears as a pop-up. Use the various drop-down menus and color palettes to make changes to the screen elements sections listed. When you finish making changes, click Save Changes.

[top]

Setting Your Design Name and Description

On the Name and Description page, you can change the name of your Basic Design, and enter a description.

Give your Basic Design a Name: Type the name for your Basic Design.

Renaming Designs

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

Renaming a design is a way to help keep things more organized and easier to understand as you create more designs.

Give your Basic Design a Description: Enter the description for your Basic Design, as a reminder about what this design is for.

After making changes to the basics, click Save this Design to save the Basic Design or Save and Apply this Design to save the Basic Design and apply it to your published weblog.

[top]

Managing Your Designs

Click the Design sub-tab under the Weblogs tab, or click the Edit Design shortcut link from Your Weblogs page. On the Design sub-tab, click the Manage Your Designs link. The Manage Your Designs page appears.

Your saved designs appear in list under the following headers:

Design Name - When you click one of your designs, a drop-down menu appears with shortcuts to editing functions. From here you can go directly to pages for editing Name and Description, Theme, Layout, Content, Order, and CSS.

Options - To preview a Basic Design in the list, click Preview. To apply that Basic Design to your weblog, click Apply Design.

Deleting Designs

To select designs for deletion, click the checkbox(es) next to each design list item and click Delete. To delete all designs in bulk, click the checkbox to the left of the Design Name list header and all checkboxes will automatically be selected. Then click Delete.

Duplicating Designs

To duplicate designs, click the checkbox(es) next to each design list item you want to duplicate and click Duplicate. To duplicate all designs in bulk, click the checkbox to the left of the Design Name list header and all checkboxes will automatically be selected. Then click Duplicate.

[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 Basic Designs built by the TypePad template builder are converted.

Why would I want to convert a Basic Design?

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 Basic Designs is for those users who feel comfortable getting their hands dirty with the technologies behind template sets.

What does converting a Basic Design do?

When you convert a Basic Design, 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 from the Edit Current or Manage Your Designs pages.

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

Cloning and converting an existing Basic Design 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.

Which should I use, Advanced Template Sets or Custom CSS?

It depends on how complicated your needs are. Custom CSS will control basic formatting styles, but Advanced Template Sets allow customizing of all frames, styles, and elements within your weblog. If you're just looking for basic formatting look and feel, use Custom CSS.

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

1 Select the Basic Design to convert

Select the checkbox next to the Basic Design that you would like to convert to an Advanced Template.

When you convert a Basic Design, the existing Basic Design will not be changed. Instead, a new Advanced Template Set will be created based on the existing Basic Design.

2 Click "Convert to Advanced"

Click Convert to Advanced. A pop-up window appears to confirm your choice. Click Yes, Convert.

After clicking the confirmation, you’ll see your new Advanced Template Set listed in Your Saved Designs, and it can be edited by clicking the set’s name and selecting Edit Templates from the resulting drop-down menu.

3 Apply the Advanced Template Set to your weblog

Click Apply Design under the Options header from the list of Your Saved Designs.

[top]

Editing Advanced Template Sets

(Advanced templates are available with Pro membership.)

To edit an Advanced Template Set, click the set's name from the list of Your Saved Designs on the Manage Your Designs page. Select Edit Templates from the resulting drop-down menu. The Edit Design page appears.

Select a template you want to edit from the list of Index Templates by clicking the template name or click the Create new index template link to create a new template. An Edit (or Create New) Template screen will appear with a large text box containing the HTML code for the template. Make your changes to the code within the text box and click Save when you are finished. When you are finished making your desired changes click Publish Weblog on the Edit Design page.

Deleting Templates

To select templates for deletion, click the checkbox(es) next to each template list item and click Delete Checked. To delete all templates in bulk, click the checkbox to the left of the Index Templates list header and all checkboxes will automatically be selected. Then click Delete Checked.

[top]