August 10, 2011

Theme Builder

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.

Theme BuilderTo get started creating a custom theme, go to the Design tab, click Choose a theme, select the Customizable option Theme Builder, and click Choose.

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.
  • 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 Color Picker 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.

Banner Format

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.

Upload BannerAfter 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.


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.

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.

Main Content Column Widths

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.

Link Colors

Types of 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 Images

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

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services