Movable Type Documentation > Professional Pack

Universal Template Set

The Universal Template Set (UTS) is a complete web site design using Movable Type's template set and theming infrastructure. The concepts behind the templates are:

  • to make it easy for users to create not just a blog, but an entire web site -- complete with an About and Contact page, and more.
  • to produce a professional and clean, well designed web site
  • to build a set of templates that is more intuitive and easy to customize, with simpler HTML and CSS than the default templates.
  • to create a set of "smart templates" that allows authors with very few technical skills to modify the behavior of the web site.

The following is a screenshot of a default Universal Template Set, who header has been customized.

Universal Template Set Screenshot

Features

The Universal Template Set will:

  • produce a professional designed, well structured and easily adaptable web site
  • automatically install place holder pages for your web site so that right out the box you can see what your future web site will look like
  • make it easy to customize default pages and other content on your web site by providing an "Edit this Page" link right there on the published web site
  • allow authors to easily customize the pages that appear in both the footer and top navigation

Instructions

Installing the UTS

The Universal Template Set can be installed on any Movable Type powered blog. To create a new UTS web site, click on blog selector pull down menu and click "Create Blog." On the subsequent screen you will be prompted for the name of your blog and the template set you wish to use. Select "Universal Website" and click Continue.

To install the UTS web site over an existing blog, navigate to the Templates section listed under the Design menu. Select "Refresh templates" under the Actions section of the page. A dialog will appear, select "Apply new template set" and then select "Universal Web Site" from the menu. Press the continue button.

Once the templates have been installed click the publish button and in a few moments Movable Type will have published our new web site and you can view it.

Selecting one of the bundled UTS style

The Movable Type Professional Pack comes bundled with four different styles that can be applied to a UTS powered web site. To change your style, navigate to Style Catcher under the Design Menu.

If you do not see the Style Catcher menu item listed under Design, then it is probable that the Style Catcher plugin has been disabled. Navigate to Plugins under the System Overview menu, and enable the Style Catcher plugin.

From there select "UTS Library" and select one of the four designed presented.

Customizing the CSS

The best way to customize the UTS is by customizing its stylesheet. CSS is the preferred method of customization because it allows you to more easily keep your base CSS and HTML up to date with the latest versions of the Universal Template Set as they are released.

To edit your CSS, visit the Templates area listed under the Design menu. Edit the index template named "Stylesheet". Its contents are simple and should contain two CSS @import statements. Add any customizations after those two important statements. Do not edit the base stylesheet or the theme stylesheet directly, as it will make it more difficult to upgrade those templates in the future.

» CSS Quick Reference

Customizing the header image

To customize the header image, create or select an image that is 905x197 and upload it to your server. Then add this CSS to your stylesheet:

#homepage-image { background-image: url(http://path/to/your/image.jpg) !important; }

Adding new items found in the top horizontal nav

Any Movable Type Page that contains the tag "@topnav" will automatically appear in your site's top horizontal navigation bar. To remove an item from the top nav bar, remove the tag "@topnav" from the page.

Adding new items found in the footer

Any Movable Type Page that contains the tag "@footer" will automatically appear in your site's footer at the bottom of the page. To remove an item from the footer, remove the tag "@footer" from the page..

Flagging the About page

If you already have an existing about page on your web site, and you would like the About link in the nav header to link to that page, edit your About page and add the tag "@about". That page will now be linked to in your nav.

Flagging the Contact page

If you already have an existing contact page on your web site, and you would like the Contact link in the nav header to link to that page, edit your Contact page and add the tag "@contact". That page will now be linked to in your nav.

Additional Styles Available for UTS

uts-black.gif uts-blue.gif uts-green.gif uts-pink.gif

Resources

CSS Recipes

If you have customized the Universal Template Set in some way and would like to share your CSS recipe, please the form below.

This page was last updated on 2008-01-23, 00:56.  

4 User Contributed Notes

Duncan Author Profile Page said:

"Customizing the header image

To customize the header image, create or select an image that is 905x197 and upload it to your server. Then add this CSS to your stylesheet: "

Should read 905x170 for image size.

Shanx Author Profile Page said:

Um, why should a "theme" (the universal blogging nomenclature) be called a "template set" and charged for?

This section of the "Instructions"

Installing the UTS

provides no instructions on Installing the UTS. This page was my first google result for "installing a movable type template set"

I'm still at a loss...

Byrne Reese Author Profile Page said:

@penguinstorm - I am sorry you are having difficulty. The UTS comes bundled with the Professional Pack. It is available by no other means at this point. Are you trying to install a copy of the UTS, or another template set?

Submit a User Contributed Note

User contributed notes are a great way to share the knowledge you have gained in using Movable Type.

If you have a technical question or problem, please visit Movable Type Support.

(If you haven't left a note here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)