The Movable Type Knowledge Base

Applying a New Style From the Style Library

Question

How do I apply a new style from the Style Library?

Answer

Note: Styles from the Style Library are only compatible with the new 3.2 Default Templates.

Applying the Style Manually

  • Download the zip file for the style of your choice from the Style Library and unzip it to your local computer. All of the files should be organized into a single folder named after the style and prefixed with theme-. For example, after unzipping the file for the Beckett style, the folder would be named theme-beckett.

  • Open your FTP program and navigate to your mt-static directory. If you plan to try out several styles, you may want to create a subdirectory specifically for them; for example, you might create a folder named themes within mt-static.

  • Upload1 the entire theme folder to the desired location; i.e., either mt-static/ or mt-static/themes/.

  • Log into Movable Type, navigate to Templates : Indexes, and select the Stylesheet template for editing.

  • Select all of the code in the Template Body window and and press your Delete key to remove it. Replace it with the following code:
    @import url(/mt-static/themes/theme-stylename/theme-stylename.css);

    where stylename is replaced with the appropriate value. Using Beckett again as an example, the result would look like this:

    @import url(/mt-static/themes/theme-beckett/theme-beckett.css);

    Note that the path is absolute from the root folder. If your mt-static directory is located in a subdirectory of the root, such as mt, then the path might look like this:

    @import url(/mt/mt-static/themes/theme-beckett/theme-beckett.css);

  • Click Save and Rebuild to update the styles-site.css file.

  • View your site to see the new styles applied (you may need to refresh the page or clear your browser cache to see the changes).

Applying the Style with StyleCatcher

If you've installed the StyleCatcher plugin2, you can use it to simplify the process of applying a new style.

  • Navigate to System Overview > Plugins, locate StyleCatcher in the list, and click its name (or its Settings link).

  • Make sure the Theme or Repository URL is set to http://www.sixapart.com/movabletype/styles/library.

  • Click Find Style.

  • Available styles will be retrieved from the Library, and thumbnails for each will appear in the right window.

  • Browse through the thumbnails to find your desired style; you can click the Show Details link for a larger view of the style.

  • When you've found a style you want to apply, select the weblog you want to apply it to from the Select Weblog... dropdown menu; then click Choose this Design.

  • StyleCatcher will apply the design and rebuild your Stylesheet template. You will see an alert once this process is completed.

  • View your site to see the new styles applied (you may need to refresh the page or clear your browser cache to see the changes).

1 Remember that images must be uploaded in BINARY mode; all other files should be uploaded in ASCII. If your FTP program is not configured to automatically detect the correct upload mode based on file type, you will need to manually transfer each file in the correct mode.

2 Please note that the StyleCatcher plugin is a free Power Tool offered by the Six Apart Professional Network, and any related information included in our Knowledge Base is for reference only. Questions or problems regarding the use of StyleCatcher should be directed to the ProNet Mailing List or the Community Forum, not to Movable Type Technical Support.

Submit Feedback on This Article

Your comments on how we can improve this article are appreciated; but please do not use the feedback form to submit support requests or questions. We will not respond to or publish such queries submitted through this form. If you have a technical question or problem, visit Movable Type Support.

Yahoo! Small Business web hosting services

Six Apart
Makers of weblog software and services for individuals, organizations and businesses.
This website is powered by Movable Type.