Custom CSS Plugin for Movable Type

Have you ever wanted a simpler way to update your site's stylesheet? One that did not require you to click through 5 screens just to add a simple rule? Have you ever needed a way to let a client or user customize the CSS of their blog without giving them full access to the template editing interface for fear that they might hurt themselves or their blog?

Enter the Custom CSS plugin for Movable Type.

Custom CSS Plugin

This plugin was born out of the simple desire to:

  • Provide users with the ability to customize the CSS of a blog, without requiring to give them complete access to edit all the templates of a blog.

  • Provide a better interface for editing CSS by devoting a larger portion of the screen's real estate to the editor window, unlike what is found on Movable Type's native "Edit Template" screen.

  • Insulate a theme from a user inadvertently disrupting a site's design by permanently editing or modifying the theme's core CSS definition.

The plugin therefore adds a menu item called "Customize Stylesheet" to the Design menu of Movable Type for those blogs which have opted to utilize the Custom CSS feature provided by this plugin.

Clicking that menu item will take users to a screen devoted to editing a site's stylesheet.

Prerequisites

Prior to installation, the following requirements must be satisfied:

  • User has MovableType 4.2 or later installed
    • it could work on 4.0, but it has not been tested, nor is it supported.
  • Config Assistant has been installed.

Download

Installation

This plugin is installed just like any other Movable Type Plugin.

You will also need to install the Config Assistant plugin.

Usage

By default the "Customize Stylesheet" menu option is not visible unless one of the two conditions have been met:

  • You have enabled "Custom CSS" in your Custom CSS plugin settings for the current blog.
  • The current blog utilizes a template set for which custom css has been enabled.

Enabling the Custom CSS Menu Item

If you are using a theme that does not explicitly support this plugin, but would still like to utilize its functionality, follow these steps:

  1. From your blog's dashboard, click "Plugins" from the "Tools" menu.
  2. Find "Custom CSS" in the list of plugins and click its name.
  3. Click "Settings."
  4. Click the check box labeled, "Enable Custom CSS" and hit Save.

Once the page has reloaded you will see the "Customize Stylesheet" option in the Design menu for that blog.

Embedding Custom CSS in your Stylesheet

This plugin makes available a single template tag:

<$mt:CustomCSS$>

This tag will return whatever raw text has been entered into the large "Edit Custom CSS" text area. It does not process template tags.

Example

In an index template in the <head> element:

<style type="text/css">
  <$mt:CustomCSS$>
</style>

Designer Guide

This plugin allows designers to designate templates within their template sets which utilize or depend upon user-provided CSS. Templates flagged with the custom_css option will be republished automatically whenever a user makes changes to their custom css.

To flag an index template as one that depends upon custom css, consult the example below:

template_sets:
  mytheme:
    label: 'My Template Set'
    templates:
      index:
        main_index:
          label: 'Main Index'
          outfile: index.html
          rebuild_me: 1
        styles:
          label: Stylesheet
          outfile: styles.css
          rebuild_me: 1
          custom_css: 1

The operative element being the last line above:

custom_css: 1

The assumption of course being that the template identified by this flag contains the <$mt:CustomCSS$> tag. Again, adding this flag instructs the Custom CSS plugin to rebuild that template whenever a user makes a change to their custom CSS.

6 Comments

Hi Byrne, I tried to test the plugin and get an error:

bq. Error in configuration template: Publish error in template '': Unknown tag found: PluginConfigForm

It seems to me that there is no template for setup. Is it right?

Thank for helping. :)

Bryne,

I tried to print a copy of this post, and (ironically) the post spills off the bottom of the page.

Would you kindly modify the stylesheet for this post so that it is printer-friendly?

Alternatively, would you please provide instructions for printing out a copy?

I am running Iceweasel (aka Firefox) under Debian.

Hi, trying to install Custom CSS under 4.32 and get the following error: Our sincerest apologies. This plugin uses a Config Assistant syntax which is no longer supported. Please notify the developer of the plugin.

Any chance of redeeming this soom?

Already fixed. Please upgrade to the latest version of CustomCSS available from github.

Hi again, thank's a lot! It's working well, but I would suggest you change the download link above to the new version.

Leave a comment

what will you say?


Monthly Archives

Recent Comments

  • Hi again, thank's a lot! It's working well, but I would suggest you change the download link above to the new version. ...

  • Already fixed. Please upgrade to the latest version of CustomCSS available from github. ...

  • Hi, trying to install Custom CSS under 4.32 and get the following error: Our sincerest apologies. This plugin uses a Config Assistant syntax which is no longer supported. Please notify the developer of the plugin. Any c...

  • Bryne, I tried to print a copy of this post, and (ironically) the post spills off the bottom of the page. Would you kindly modify the stylesheet for this post so that it is printer-friendly? Alternatively, would y...

  • You also need to install the Config Assistant plugin. ...

Close