« Running Publish Queue under daemontools | Main | Template Macros: The coolest template trick you don't know about »

How to Customize Default Styles in MT4

Okay, so you've created a new blog in MT4. You've followed the system prompts and have picked a style from the available defaults. Now you want to customize the style you've chosen, perhaps use a different font, or a different color for an element. You go to look at the stylesheet template in Design > Templates > Stylesheet, and instead of seeing CSS code to edit, you see this:

lmt-edit-stylesheet.jpg

Now what?

MT4 uses a modular template structure, pulling in files from other places to construct a template. The most kosher way to easily make adjustments to a default style is to create a separate index file with the CSS code in it that you want to change from the default. Then import that file into your stylesheet template. Stylesheet code "cascades", so that whatever code comes last in the file takes precedence over what came before it. Here are the basic steps to customizing your default stylesheet.

1. Create a new index template. Go to Design > Templates > +Create Index Template. You can keep the template itself blank for now, but give it a title like "Style Customizations". Set an output file with the ending .css, for example custom.css. Save and publish the template.

2. Include your new template into the stylesheet template. Go to Design > Templates > Stylesheet. Add the following code to a new line in the stylesheet:

@import url(<$MTLink template="Style Customizations"$>);

Save and publish the stylesheet template. Now when you make changes to your customization template, they will be published to the overall stylesheet.

3. Decide what customizations you want to make. It helps to know what CSS classes and IDs you are working with to begin with. Take a look at the existing CSS file. You can find the URL by doing a view source of your published blog, or by looking at the partial URL in the stylesheet template. The main CSS for the minimalist red them is http://www.your-blog-domain.com/mt-static/themes/minimalist-red/screen.css.

A great way to test out your CSS changes in real time is to use the MT Design Assistant. The Design Assistant has the default MT designs, and you can get an idea of what the various elements of the stylesheet do by making customizations and seeing them reflected on the test page in front of you. Go to http://www.movabletype.org/design/assistant/. Click "Get Started". Select "Choose a Style" to select a starting style. Select "Select a Layout" to pick your layout. Then select "Customize CSS". In the window on the right side of the screen, you can type in the CSS you want to see applied to your style. For example, type:

#header-name { font-size: 40px; }

and select "Apply CSS" to see the blog title increase in size.

4. Customize your "Style Customizations" template. When you are ready, put the style customizations - the new CSS code - into your new Style Customizations index template. Save and republish. View your site.

That's it! Customizing styles in MT requires a knowledge of Cascading Style Sheets or CSS. If you need help with this, there are several good CSS books on the market. Here's a CSS Tutorial and a CSS Cheat Sheet.

Many thanks to Mark Carey of MT Hacks, Jesse Gardner, and Beau Smith of Six Apart for walking me through these steps.

Comments (13)

MT 4.1 gives an error

"You must set the template output file"

I suspect the output file should be the css file??

Hi Markus,

Yes, index templates need output files. Save it as a css file. I've clarified that step in the instructions so thank you for bringing it to my attention.

Karin Wiedemann:

I'm at a loss with these instructions along with the ones on the Design Assistant as I can't find where Design>Styles or Design>Templates is...

Hi Karen,

Are you using MT4 or an earlier version? Take a look at this image and see if that helps.

Beth:

Elise, I looked at the image on your page but I don't see a corresponding image on my page. I'm using MT 4.0. Under the design tab it only has an option for templates. If you are describing a method for a future version of Movable type could you give me a few pointers for the 4.0 version?
Thanks!

Very helpful post. I'm new to MT and just set it up on my site so I don't know much about it just yet but I'm learning thanks to very cool posts like this!

Many Thanks,
James

Hi Beth and Karin - Make sure you have selected the blog you want to work on under "System Overview". Scroll the arrow down to your blog.

If that isn't the issue, then perhaps somehow you've disabled the StyleCatcher plugin?

Kiki:

Well, let`s say I [almost] found an answer! Hurray! :-)
By Google I explored this site http://www.thestylecontest.com/ with MT templates and downloaded some. There templates with fluid width amongst them and there css files for templates, including base-weblog.css. It`l be easy just to compare base-weblog.css with one included in MT`s core base and to learn how to hack design. I will cetainly wright some help text for people... [there`s so much people confused with MT`s "design issue". It looks like MT developers and community are specially keep MT templating "in secret" - quite a laugh!] "ALLOW"! :-) me tweak MT design ;-)

My stylesheet dosnt look like the above fig. Is this because its a newer version? I dosnt change when i insert the "@import url(<$MTLink template="Style Customizations"$>);"

My stylesheet lokk like this:

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://www.matslykke.com/mt-static/themes-base/blog.css);
@import url(http://www.matslykke.com/mt-static/themes/hills-green/screen.css);
/* end StyleCatcher imports */

Mathias

Hi Mathias,

Have you tried emptying your browser cache and refreshing the page? Sometimes the browser caches the old stylesheet file and you cannot see the changes unless you empty the cache or use a different browser.

Mathias:

Hi Elise
Yes, I did that. It looks like this:

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://www.matslykke.com/mt-static/themes-base/blog.css);
@import url(http://www.matslykke.com/mt-static/themes/hills-green/screen.css);
@import url(<$MTLink template="Style Customizations"$>);
/* end StyleCatcher imports */

I copy pasted the html from the original stylesheet and made the changes I wanted - but nothing happens. I must have missed something:-).
Mathias

Try this. Make sure you have set an output css file for your your new css file. For example, calling it newcss.css. Then just pull in the URL, like so:

/* This is the StyleCatcher theme addition. Do not remove this block. */
@import url(http://www.matslykke.com/mt-static/themes-base/blog.css);
@import url(http://www.matslykke.com/mt-static/themes/hills-green/screen.css);
/* end StyleCatcher imports */
@import url(http://www.matslykke.com/newcss.css);

Then rebuild everything.

Mathias:

Well, thank you for your fast reply! It worked!
Mathias

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)