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.
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.
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.
This plugin is installed just like any other Movable Type Plugin.
You will also need to install the Config Assistant plugin.
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:
- From your blog's dashboard, click "Plugins" from the "Tools" menu.
- Find "Custom CSS" in the list of plugins and click its name.
- Click "Settings."
- 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:
This tag will return whatever raw text has been entered into the large "Edit Custom CSS" text area. It does not process template tags.
In an index template in the
<style type="text/css"> <$mt:CustomCSS$> </style>
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:
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.