|
|
| Línia 1: |
Línia 1: |
| '''Under construction'''
| | {{Moved_to_dev_docs}} |
| 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.
| |
| | |
| ==Screenshots==
| |
| | |
| These screenshots are to give you an immediate idea about what this block is and what it does.
| |
| | |
| [[Image:Cssthemetool.screenshot.01.png|300px|thumb|left|The CSS theme tool block]]
| |
| [[Image:Cssthemetool.screenshot.02.png|300px|thumb|left|Point and click to add some styles]]
| |
| [[Image:Cssthemetool.screenshot.03.png|300px|thumb|left|The rule creation interface]]
| |
| [[Image:Cssthemetool.screenshot.04.png|300px|thumb|left|Picking a colour to use]]
| |
| [[Image:Cssthemetool.screenshot.05.png|300px|thumb|left|Highlighting the affected cells]]
| |
| [[Image:Cssthemetool.screenshot.06.png|300px|thumb|left|Previewing my new style]]
| |
| [[Image:Cssthemetool.screenshot.07.png|300px|thumb|left|Viewing my style]]
| |
| [[Image:Cssthemetool.screenshot.08.png|300px|thumb|left|Viewing the rules I have created]]
| |
| [[Image:Cssthemetool.screenshot.09.png|300px|thumb|left|Viewing the blocks settings]]
| |
| <br style="clear:both" />
| |
| ==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.
| |
| # 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.
| |
| # This block was designed for use in Firefox primarily, it uses standards compliant methods and should hopefully work in any standards strict browsers.
| |
| # 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.
| |
| # 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.
| |
| | |
| ==Features==
| |
| * 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
| |
| | |
| ==Installation==
| |
| [[Image:Css_theme_tool_directory_structure.png|thumb|165px|CSS theme tool directory structure]]
| |
| Installation is simple, and no different from the installation of any other block.
| |
| | |
| # Download the CSS theme tool ([http://download.moodle.org/download.php/plugins/blocks/css_theme_tool.zip css_theme_tool.zip]) from the Module and Plugins database
| |
| # Unzip '''css_theme_tool.zip''' into your Moodle installations blocks directory.. moodle/blocks/
| |
| # Check that you now have '''moodle/blocks/css_theme_tool'''
| |
| # Open you browser and enter the URL to your site and login in an Administrator
| |
| # If you are not immediately shown the upgrade screen change the URL to your sites URL followed by '''/admin/''' e.g. <nowiki>http://sam.moodle.local/admin/</nowiki>
| |
| # Proceed through the upgrade as you would any normal upgrade.
| |
| | |
| [[Image:Css_theme_tool_configuration.png|thumb|350px|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.
| |
| # Log into your account as an Admin user is you havn't already.
| |
| # Browse to your sites home page '''/''' not ''/my/''.
| |
| # Turn on editing. It should be in the settings block.
| |
| # Add an instance of the CSS theme tool block
| |
| # 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).
| |
| # Click on the configuration icon for the block (A hand holding a pencil)
| |
| # Change '''Page contexts''' to '''Display throughout entire site'''
| |
| # 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==
| |
| [[Image:Css_theme_tool_settings.png|thumb|350px|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.
| |
| <pre style="height:300px;overflow:auto;background-color:#f6f6f6;border:1px solid #bbb;">
| |
| 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
| |
| </pre>
| |
| | |
| ==More information==
| |
| * CONTRIB-1984 This is the main tracker issue for this block.
| |
| * [http://moodle.org/mod/data/view.php?d=13&rid=3932 Module & plugins database entry]
| |
| * [http://moodle.org/mod/forum/discuss.php?d=153353 Forum announcement]
| |
| | |
| {{CategoryDeveloper}} | |
