Not a developer? Go to MovableType.com

Plugin and Theme Directory

Custom CSS v1.1.2

By Byrne Reese
Posted June 3, 2009, in Developer.

Details

This plugin was born out of the need and 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 default "Edit Template" screen.

  • Insulate a theme from a user inadvertantly 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.

Installation

To install this plugin follow the instructions found here:

http://tinyurl.com/easy-plugin-install

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

Requirements

Config Assistant

Compatibility

Movable Type versions: 4.35.05.15.2

License

GPL


Back

5 Comments

Sooran on July 23, 2009, 6:10 a.m. Reply

This plugin really good If a button, especially my editor added كنه t that I click on the desired class mode button on our part I know run editor

Hallie Silva

Hallie Silva on May 26, 2017, 2:28 p.m. Reply

This plugin is fantastic. Just what I needed to modify some of the CSS in my theme. Still, I agree with Sooran that it would be nice to have a button to choose the class that you want to fix and edit directly. That would make things so much easier. I usually have to make a change and then go and refresh the page to see if it worked. You can see I used it extensively on the wedding post, but others have also been tedious to get looking the way I want.

Ashwaq Baysan

Ashwaq Baysan on August 18, 2017, 6:00 p.m. Reply

This plugin was really good and fantastic for all the users it will help a lot and I always make some changes and after that I go to page and refresh it but now it was really simple throughout this plugin and it will help all the Website Development Company and other users.

Hina Eni

Hina Eni on October 31, 2017, 10:22 a.m. Reply

I will use this plugin in my all websites to make it look eye-catching and attractive.I am a web designer and also provide website design services Dubai so I will tell my all designers to use this customise CSS plugins in websites.

AprilRussell

AprilRussell on November 9, 2017, 11:32 a.m. Reply

This is really nice blog here is very interesting things for us it’s amazing thanks for sharing. juegos friv gratis online

Leave a Comment

Byrne Reese

Byrne Reese was previously the Product Manager of Movable Type at Six Apart, where he had also held positions as the Manager of Platform Technology and Product Manager for TypePad. Byrne is a huge supporter of the Movable Type user and developer community. He dedicates much of his time to promoting and educating people about Movable Type as well as building the tools and plugins for Movable Type that are showcased on Majordojo. He contributes regularly to open source; and he is an advocate for open protocols and standards like Atom and OpenID.

Website: http://profile.typekey.com/byrnereese