If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

CSS theme tool block

From MoodleDocs

Introducing the CSS theme tool

The CSS theme tool is a block that is designed to make CSS creation and editing for Moodle both easy and accessible.

It aims to provide a point and click interface with WYSIWYG controls for adding CSS rules and provides a user friendly interface for creating CSS that is suitable for everything from creating simple modifications to creating entire themes.

As well as giving the user an easy means to create CSS it also allows the admin or a Moodle site to make immediate modifications to the installations CSS that will be visible by everyone using the site (not just those who can create CSS) and does this all without the need for editing any files within Moodle or even having to create or modify themes.


These screenshots are to give you an immediate idea about what this block is and what it does.

The CSS theme tool block
Point and click to add some styles
The rule creation interface
Picking a colour to use
Highlighting the affected cells
Previewing my new style
Viewing my style
Viewing the rules I have created
Viewing the blocks settings

Important notes

Before you get you too excited about this block let me first outline some key points you NEED to be aware of before using this block.

  1. This block was developed while Moodle 2.0 was being developed, and as Moodle 2.0 is yet to be released and there are still many changes going on this block is encounter problems. Please if you experience problems while Moodle 2.0 is still in pre-release let me know, chances are something core will have changed and the block will need to be updated.
  2. This block was designed for use in Firefox primarily, it uses standards compliant methods and should hopefully work in any standards strict browsers.
  3. This block does not work with Internet Explorer, and will not in the near future. One day.. maybe. If Microsoft one day fix IE or someone would care to fund it I am not going to commit any time to resolving IE issues.
  4. I want this block to be fun to use and serve small purposes, please forgive me for any usability issues, accessibility issues, and bugs that you may encounter. Let me know about them and if I find some spare time I will look into them.


  • Create CSS on the fly for any page within Moodle.
  • Point and click interface to easily add CSS for any element within the page.
  • Easy to use interface for selecting id's, classes, and CSS3 properties.
  • CSS editor with buttons for common CSS styles to speed up your experience.
  • The ability to type CSS styles for your rule so you can add ANYTHING you want (even mistakes!)
  • Edit and delete the CSS you create.
  • AJAX functionality so that you can create/edit/delete CSS without having to refresh the page.
  • Export the CSS you create so you can add it to any theme.
  • Highlight all the elements on the page your CSS rule will apply to.
  • Preview the CSS rule you are creating to ensure it does what you want.
  • A purge button so that you can start again (after exporting or if it all goes horribly wrong).
  • Access to the block is controlled by a capability that you can give to whoever you want [block/css_theme_tool:modifystyles].
  • Designed specifically for Moodle 2.0
  • Uses all of the new Moodle 2.0 API's.
  • Caches CSS so that it is served reliably and consistently.
  • Uses YUI3 to create the JavaScript interfaces.

What is it and why was it written

Under construction


CSS theme tool directory structure

Installation is simple, and no different from the installation of any other block.

  1. Download the CSS theme tool ( from the Module and Plugins database
  2. Unzip into your Moodle installations blocks directory.. moodle/blocks/
  3. Check that you now have moodle/blocks/css_theme_tool
  4. Open you browser and enter the URL to your site and login in an Administrator
  5. If you are not immediately shown the upgrade screen change the URL to your sites URL followed by /admin/ e.g. http://sam.moodle.local/admin/
  6. Proceed through the upgrade as you would any normal upgrade.
Making the block stick so it shows on all pages

That's the installation done, next you need to add an instance and make it sticky.

  1. Log into your account as an Admin user is you havn't already.
  2. Browse to your sites home page / not /my/.
  3. Turn on editing. It should be in the settings block.
  4. Add an instance of the CSS theme tool block
  5. Move it to the left hand side, this is optional but I highly recommend it otherwise you won't see it on pages where the right hand side isn't shown (like admin).
  6. Click on the configuration icon for the block (A hand holding a pencil)
  7. Change Page contexts to Display throughout entire site
  8. Change Restrict to these page types to * (Any page)

And you're done!!!

You have successfully installed the CSS theme tool and added an instance to you site that will be shown everywhere blocks are shown.

The CSS theme tool adds two new database table to your database block_css_theme_tool and block_css_theme_tool_styles as well as adding one capability block/css_theme_tool:modifystyles.

Remember if you remove this block you can also remove those two database tables.


CSS theme tool configuration

The first bit of configuration you should be aware of is for the capability this block adds block/css_theme_tool:modifystyles. Granting a user this permission means that they will be able to view and interact with the CSS theme tool block, this includes adding a removing styles for the site. By default this is assigned to Admin users only however you can assign it to other users if you wish.

The second bit of configuration you should be aware of is the user preferences this block controls. Once you have installed this block and added a sticky instance of it to your site you will see that it has a settings button. This button will display a box in which you can set the following settings:

Purge rules
This deletes all of the CSS rules that you have created.
Export CSS file
This will convert all of the rules that you have created into a single CSS file that you will be then prompted to download.
Advanced body classes
This will cause all of the body classes to be shown in the editor. By default this is off and you will only see the important body classes.
Auto save
This is the most useful setting there is. When on CSS changes will be automatically saved for you... this way you'll never forget to click save changes.
Own rules only
If on this setting will limit the rules you can view and edit to just those that you have created.

In creating the above settings I have tried to set smart defaults however you may want to check them when you first use this tool to ensure they suit your needs.

Using the CSS theme tool

Under construction

Adding styles

Under construction

Editing and deleting styles

Under construction

Exporting a CSS file

Under construction

Removing all styles

Under construction

How the block works

Under construction... its not a secret I just havn't had time to write this section

Uninstalling the block

Under construction

Requesting new features

Under construction

Reporting bugs

Under construction

Change log

The following is the change log for this block, more up to date information can be found in the readme file in the blocks directory.

 0.2.1                                                            CONTRIB-2179
    - Made the colour picker a dialogue
    - Added support for previously picked colours
    - Fixed bug with the colourpicker image generation

 0.2.0                                                            CONTRIB-1987
    - Added capability to allow access to modify styles
    - Added 'only view my css' setting + functionality
    - Fixed bug with positioning of css builder and viewer
    - Added preview functionality
    - Fixed the highlight buttons bugs

 0.1.2                                                            CONTRIB-1984
    - Fixed bug when editing an existing CSS rule
    - Added support for CSS 2.1 and 3.0 selectors:
        - first-child
        - last-child
        - after
        - before

 0.1.1                                                            CONTRIB-2131
    - Added the auto-save setting

 0.1.0                                                            CONTRIB-1984
    - Introduced the visual version
    - Added a rounded corner button to the css builder
    - Added an opacity button to the css builder

More information