CSS theme tool block

Under construction This page is currently under construction. It will shortly contain information about the CSS theme tool block created by Sam Hemelryk for Moodle 2.0.

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.

Features

Under construction

What is it and why was it written

Under construction

Installation

CSS theme tool directory structure

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

1. Download the CSS theme tool (css_theme_tool.zip) from the Module and Plugins database
2. Unzip css_theme_tool.zip 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.

Configuration

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

• CONTRIB-1984 This is the main tracker issue for this block.
• Module & plugins database entry