As you probably already know, Movable Type 3.2 was released and boasts a stunning featureset. I personally have plenty of plugins, tools and other announcements to make which are all related to this release. The first of which you've probably guessed by the title. I present the Movable Type Style Generator. Quite simply, click on any element on the page and a box will appear allowing you to change any of the element's properties from background color to font faces and styles. After you're done, hit the Download button to get the stylesheet, 3.2 compatible! The beauty of this style generator is since it creates 3.2 compatible stylesheets, you can use them across any of Six Apart's...

continue reading ...

Question

In Movable Type, entries or comments or other objects are often shown in lists. For example, the main index shows the most recent entries, a category archive also shows entries, or an individual entry archive shows comments. I preferred if not all items in such lists were styled the same. For example, there should be an alternating white / gray background. How can this be done?

Answer

Fortunately, the answer can be given in a generic way. The technique that I am going to show can be used with all types of objects (entries, comments, categories, etc.) and any number of different styles.

For showing the basic idea I will create a list of entries using 3 different styles....

continue reading ...

When I first launched the Style Generator, the biggest request I got was to have some sort of colour scheme chooser or a random style generator. After a few attempts (and a lot of help from Brad Choate), I've finally managed to create the Random Styler. This random styler is capable of generating thousands of different Vicksburg variations with the click of a button (and some AJAX magic!). Some advanced features include: • Being able to change the number of columns (e.g. from a 2 column layout to a 3 column layout and so on) • The ability to edit the stylesheet generated - clicking the edit button will take you to the Style Generator where the stylesheet will be preloaded and you can tweak it...

continue reading ...

At long last I've made some updates to the Style Generator to better fit with Six Apart's standard. This means that you can finally apply the tips discussed in this tutorial to stylesheets created using the style gen. Most of the other changes are mostly on the backend code so that it's easier for me to build on it in the future. The only real change on the frontend is the addition of a splash page that allows you to select the number of columns - as cool as the on-the-fly capability was it was a major pain to support. A big thank you to Six Apart for letting me use their images, I'm a terrible graphics designer!

The biggest feature I am working on right now is the ability to load...

continue reading ...

Question

I installed Movable Type and did some tests. Anything works fine. Now, what should I do for styling the generated pages according my need?

Answer

Movable Type uses templates and contents for generating the HTML pages. The templates are made up of HTML and markup. The HTML is left untouched by the generation process. However, the markup is processed. It defines the structure of the final pages. It allows flow control - such as "loop over all entries" - and it is used for accessing the database (such as "insert the entry's title here").

So for styling the website, the templates have to be modified.

mgs

Feedback is welcome!

...

continue reading ...

Arvind of Movalog has just released a useful new tool for MT3.2 - the Movable Type Style Generator. Just click on any element - background color, banner, font - to change the element's properties. When you are all done, you can click on the Download button and voil, you have the stylesheet, all ready to work with the new MT 3.2 templates. Works with Typepad and LiveJournal too. For all of us who hate messing around with CSS, thanks Arvind! Have you found the tutorials at Learning Movable Type helpful? Please consider linking to LMT at http://www.learningmovabletype.com/ . Thanks!

Posted by elise on August 27, 2005 to Announcements | Email to a friend | Comments(0) | Printer-friendly version...

continue reading ...

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

continue reading ...

When coding larger sites, the CSS cascade is both friend and foe. The choice is yours: redundancy, or dependency?

CSS forces you to make a choice in your coding techniques, a choice that becomes more obvious the larger a site grows. As the amount of variance between different templates increases, you can go in one of two directions: you can either code for redundancy, or code for dependency.

I'll give you some examples to illustrate what I'm talking about. First, redundancy. You've just created a series of forms across three pages. Each form has a couple of fields in common with the other forms, that you'd like to present in a similar way. The redundant...

continue reading ...

If you don't know what style sheets will do for you and your audience, you can review the spec online; or see Dr Web {Dr Web is now off-line - Ed.} for a quick tutorial. We'll be here when you return.

Cascading Style Sheets (CSS) save bandwidth, vastly reducing the size of your files when compared to old-style <FONT FACE> markup. With styles, your sites load faster. You work faster, too. Styles shave grueling hours of grunt-work off your design workload: one brief CSS document can style an entire domain; and when it's time to redesign, you can execute site-wide changes in minutes instead of days.

Style sheets bring genuine leading and sophisticated...

continue reading ...

After you have started to modify the Movable Type templates according to your own style, you will probably find out, that this "programming by tags" is a little bit restricted. Often you want to use a condition for creating the HTML output in one or the other way. But Movable Type isn't able to support this very well.

And again, a plugin will do the work.

What do you need Comparisons for?

In this weblog an entry's title area consists of two parts. On the left side there is the title describing the subject. On the right side there is the date of creation.

With some entries I do not want the date to be visible. For example the entry »help« should be...

continue reading ...

Page: 1 2 2 Pages.

Newsgator Toolkit

Although not directly related to Movable Type, many bloggers I know have been asking for such a tool. The Newsgator Toolkit is an extension for Mozilla Firefox that will eventually provide you with a series of complex and powerful tools...

Continue reading "Newsgator Toolkit"

Posted on 10/13/2005 | Permalink | Comments (0)

Updates to the Style Generator

At long last I've made some updates to the Style Generator to better fit with Six Apart's standard. This means that you can finally apply the tips discussed in this tutorial to stylesheets created using the style gen. Most of...

Continue reading "Updates to the Style Generator"...

continue reading ...

(Note: this tutorial is intended for MT versions 2.661 and earlier.) If you are new to Movable Type, and are using the default style sheets you may have encountered a surprise when viewing your weblog in various browsers. The reasons for this are many. First, different browsers (Internet Explorer, AOL, Netscape, Safari) on different platforms (Windows XP, Windows 2000, MacOSX) render CSS (Cascading Style Sheets) in different ways. What looks one way on a Mac running Safari can look way different from a PC running AOL. Second, our dedicated team at Six Apart - Ben and Mena Trott - are Mac-ophiles, assuring that most of their default styles render well on a Mac, but not necessarily so...

continue reading ...

With 3.2 came the very nice StyleCatcher plugin that allowed you to easily manage and apply themes or styles to your blogs. This tutorial will show you how to make your repository work Style Catcher. Note, this tutorial won't show you how to create the library javascript that allows you to browse themes, it simply shows you how to make your themes discoverable by StyleCatcher. In this tutorial, I shall use the example of Vicksburg, the default theme with 3.2.

Every style or theme should be in its own folder (with no subfolders) which should contain: • The css stylesheet. • Two thumbnails named thumbnail.gif and thumbnail-large.gif. These two files are used in StyleCatcher as previews of...

continue reading ...

Since it was first released in 2001, Paul Sowden's Style Sheet Switcher has been downloaded and used by thousands of designers and developers and has spawned many client-side and server-side adaptations.

Having used Paul's script on numerous projects, I began to wonder how style-sheet switching could be extended to give users even more choices or accessibility enhancements, so I turned to my good friend Brothercake to make my ideas a reality and Invasion of the Body Switchers was born.

Looking back at the original Style Sheet Switcher

Fantastically simple in its implementation, Paul's original script was not without its woes.

Anchors which trigger the switching functions are...

continue reading ...

Movable Type uses a template system to generate the pages of your weblog. To change which content elements and how they are displayed on the pages of your blog, you need to make changes to the appropriate templates.

Selecting "Manage Templates" from the sidebar navigation in your weblog edit screen will show you the list of templates, but what do they all do? And, if you are trying to conserve storage space on your server, are there any you can delete?

Index Templates

Index templates have individual output files, specific to the template. Let's go down the list.

Click on image to enlarge

• Atom Index - The Atom Index produces an Atom syndication feed, atom.xml for those...

continue reading ...

Google Suggest offers suggestions while you're typing in a search term. If you don't know exactly what you're looking for or how to spell it, the Suggest feature can make finding what you want easier. I've added the same functionality to danandsherree.com. Try it - start typing something in the search box at the right and watch the suggestions appear! It was a pretty easy feature to institute.

In an amazing piece of coincidence, Arvind at Movalog has just announced Suggest Search. For better or worse, his approach works a bit differently than mine.

If you want to use my incarnation of Suggest Search you'll first need a list of suggested...

continue reading ...

Question

When using Movable Type, the images don't appear, no styles are being applied, and the Help links don't work.

Answer

If you installed Movable Type into a cgi-bin, certain files (referred to as "static" files), must be situated outside of the cgi-bin in order to be readable by your browser. The rest of this article explains how to make sure Movable Type can find these files.

Which Files Are Static Files?

Version 3.2 and higher

In version 3.2 of Movable Type, all of the required static files are stored by default in a folder...

continue reading ...

Working with Movable Type or TypePad templates? Have we got the goods for you. Two good reference sites if you're looking for designs are the new Blog Fashions site and the classic Movable Style site. As always, the good news with these templates is that the default stylesheets for TypePad and Movable Type are compatible, as are almost all of the template tags that both systems use.

Not sure what each template in your Movable Type blog does? Elise has a tutorial appropriately entitled " What Do All These Templates Do?" that you'll want to check out.

If you just need to get a copy of the default templates to figure out where to start from, we've (finally!) updated the default template page to include all the files that are generated in a stock Movable Type 3.1 install....

continue reading ...

Learning Movable Type has a tutorial on how to apply MT 3 styles to a 2.x blog but what about the other way around ?

I scanned two similar stylesheets to see what changed, basically the only thing you need to change is the definitions names mostly, the actually style definitions can stay the same. I am assuming you are using the default MT 3 templates Here is what has changed with the CSS from MT 2.x to MT 3 styles - it may not be perfect but it'll be darn close. I have listed the MT 2.x definitions and then the MT 3 definition it needs to be changed to: • .description becomes #banner h2 • #content and .blogbody becomes .content • #links becomes #right • .title becomes .content h3 • .date becomes...

continue reading ...

The default Movable Type MT3.2 templates come with one sidebar on the right side of the Main Index page. With a little template manipulation you can have an additional sidebar on the left - a 3-column layout.

The MT3.2 stylesheets and templates are designed to have the columns laid out in order, starting with the column named "alpha". The columns, in order are alpha, beta, gamma (for a 3-column layout), and delta (a hypothetical fourth column that one could create). In the default MT3.2 Main Index template, the sidebar is on the right and is in a column named "beta.

To add a third column, you will make a copy of the default "beta" column code and put it before the "alpha"...

continue reading ...