The Theme Builder makes it easy to create a unique, professional design for your blog through a graphical interface without the need to code HTML or CSS.
The Theme Builder is available with the Plus, Unlimited, and higher plans. You can upgrade to take advantage of this feature anytime. Learn more.
To get started creating a custom theme, go to the Design tab, click Choose a theme, select the Customizable option Theme Builder, and click Choose.
Create as Responsive
This feature is in Beta. Join the Typepad Beta team to check out all the new features at Account > Summary.
When creating a new Theme Builder design, check the box to Create as Responsive to set the blog to adjust for various devices - small, medium, and large. A responsive theme will optimize the design for mobile devices while still making sure the design looks great on large monitors.
Note: The Responsive option will only be available for newly created Theme Builder designs, and the check box will not appear when editing a previously created design.
Now, you can get started editing the following elements of your design by clicking on the section header:
- Banner: Upload a custom banner image or set the style of blog title.
- Navigation Bar: Select the font styles and colors for links in the Navigation Bar.
- General: Choose a background color, set column widths, and add borders.
- Links: Select the color and style for links that appear on the blog.
- Posts: Select the font style, color, alignment, and more for the Date, Title, Body, and Footer.
- Sidebar Modules: Select the font style, color, alignment, and more for the sidebar module headers and content. Add a border to sidebar images.
To change the color of a design element, click on 
to open the color picker or enter a color code.
After selecting the design options for the custom theme, click Preview to view the design applied to your blog. If applicable, check the Apply this design box. Then, click Save Changes to update your published blog with the design changes. If you don't like the changes, click Cancel to revert back to the last saved design.
Banner
Text or Image
Select Text to display the Blog Name and Description at the top of the blog. You can change the Name and Description at Settings > Basics. Learn more.
After selecting the Text option, choose the text color, alignment, style, font, and size for the banner.
Select Image to replace the Blog Name and Description with a custom banner image. The banner image width is determined by the column widths. Learn more.
After selecting the Image option, click the Browse or Choose File button, locate the banner image on your computer, and click Open.
See also: tips for creating a banner and css banner tips.
Background and Border
Select a background color and border style for the banner. The settings apply with both the Text and Image banner options.
Navigation Bar
This feature is in Beta and only available when Responsive is selected. Join the Typepad Beta team to check out all the new features at Account > Summary.
Links and Background
Select a background color for behind the navigation bar.
Select the color and style of links included in the navigation bar. The link styles should contrast from the background color to easily be identified as links. See the Types of Links section for more details on the purpose of each type of link.
Set the size and font type for text in the module.
General
General Settings
Select the background color and border for the container of the blog. The background color appears to the left and right of the columns. If a Fluid width is selected, the color will not display as the columns will fill the entire window.
If Responsive is selected, the option to change column widths will not be available as the columns adjust based on size of device used to view the blog.
Main Content Column
The Main Content Column is the column where the post or page content displays on the blog. The column width can be 300px to 1000px or Fluid. A Fluid width will expand and contract depending on the viewers browser window or device.
The background color and border can also be selected for the Main Content Column.
Sidebar Columns
Select background color, width, and border for each sidebar column. The number of sidebar columns is determined by the applied Layout.
Links
Select the color and style of links included in posts. The link styles should contrast from the post content to easily be identified as links.
- The Normal link style is applied to links which are yet to be visited.
- The Visited link style is applied to links which have already been viewed. By selecting a different color for a visited link, readers of your blog will see the different color as an indication they have previously viewed the linked website.
- The Hover link style is what is seen when you hover your mouse over a link.
- The Active link style is what is seen when you click on a link.
Posts
Select the font style, size, and color, alignment, and border settings for the following elements for Posts and Pages:
Date Header
The Date Header displays above the post at each change of date. At Design > Content, the Date Header can be selected to display.
Learn more. The date format is set at Settings > Posts. Learn more.
Post Title
The Post Title displays above each post. This setting also applies to the Page Title. At Design > Content, the Post Title can be selected to display with or without the Author Photo. Learn more.
Post Body
The Post Body is the main content of posts and pages.
Post Footer
The Post Footer displays below each post. This setting also applies to the Page Footer. At Design > Content, the content included in the Post and Page Footer can be selected. Learn more.
You can change the Date Header, Post Title, Post Footer, and Page Footer settings at Design > Content. Learn more.
Sidebar Modules
Select the font style, size, and color, alignment, and border settings for the following elements included in the sidebars:
Sidebar Title
TypeList Titles and other module headers, including Categories, Archives, and Search, are considered Sidebar Titles.
Sidebar Items
The settings apply to TypeList items, default module content, and custom sidebar module.
Sidebar Images
Set the border and alignment of images included in Books and Albums TypeLists, Photo Albums, and the Sidebar Image Module.
Sidebar Links
Similar to the General Links, the color and style of links can be set for the sidebar modules, including Links TypeLists. The link style should contrast from the background color and other content to be easily identifiable as linked text.
Further Customizations
Unlimited, Premium, Enterprise, and Business Class plans have access to the Custom CSS feature, which will allow you to make even more customizations to the design via CSS. Learn more.
To use a font style not available in the Theme Builder settings, you can use Google Web Fonts or TypeKit to apply a custom font to one or more elements. Learn more.
Not quite what you are looking for? Check out these other articles:
- If you are using a pre-made theme, see the article on adding a custom banner to a pre-made theme.
- For tips on setting additional column widths, check out the customizing column widths article.
- Looking for more advanced design options, find out more about Custom CSS and Advanced Template Sets.