|
|
| (29 revisions intermèdies per 7 usuaris que no es mostren) |
| Línia 1: |
Línia 1: |
| {{Moodle 1.6}} | | {{Moved_to_dev_docs}} |
| '''Chameleon''' is an interactive Moodle theme. You are welcome to try it at the [http://chameleon-theme.unodo.de/ Chameleon theme test site] - please login with username and password "chameleon".
| |
| | |
| ==How does Chameleon change its colours?==
| |
| | |
| * Shift-click anywhere on the page to open a floating window showing all elements under the mouse
| |
| * Click on elements in the list to create a CSS selector - one or as many as you need
| |
| * Click on the "Set Styles" button and set the styles of your choice
| |
| * View the changes immediately
| |
| | |
| Chameleon allows almost complete control over styling elements in Moodle. It makes working with themes easier for theme designers and opens up a wide range of experimental uses for interface designers. Just change and work with the changed page and go on optimizing your theme whilst you work with Moodle.
| |
| | |
| Chameleon makes use of [http://en.wikipedia.org/wiki/Ajax_%28programming%29 Ajax technologies].
| |
| | |
| ==Saving your changes==
| |
| | |
| As you work, you have the option to save changes in a temporary file, or save them to the theme CSS file on the server. All temporarily saved changes may be reverted.
| |
| | |
| ==Alternative uses==
| |
| | |
| In addition to creating a complete theme, Chameleon may also be used to help make changes to your existing theme. Simply experiment with Chameleon until you have achieved the change you desire, then copy the css in the "Free Edit" tab to a style sheet in your theme folder.
| |
| | |
| == Adding the Chameleon "engine" to your theme ==
| |
| | |
| You can add the Chameleon engine to any existing theme.
| |
| | |
| * copy the "ui" folder from the Chameleon theme folder to your theme folder
| |
| | |
| * copy the two files "temp_user_styles.css" and "user_styles.css" from your Chameleon folder to your theme folder. Set write permissions for these two files that PHP can write the changed CSS properties to the files. Delete all CSS properties in these files if you want to start from scratch.
| |
| | |
| * add the include line in "header.html" (line 9)
| |
| | |
| <pre>
| |
| 7 <link rel="shortcut icon" href="<?php echo
| |
| $CFG->wwwroot.'/theme/'.current_theme() ?>/favicon.ico" />
| |
| 8
| |
| 9 <?php include('ui/chameleon.php'); ?>
| |
| 10 <?php include("$CFG->javascript"); ?>
| |
| 11 </head>
| |
| 12
| |
| </pre>
| |
| | |
| * add the Chameleon vars in "config.php" and set them (line 99 to 109)
| |
| | |
| <pre>
| |
| 89
| |
| 90 $THEME->makenavmenulist = false;
| |
| 91
| |
| 92 /// By setting this to true, then you will have access to a
| |
| 93 /// new variable in your header.html and footer.html called
| |
| 94 /// $navmenulist ... this contains a simple XHTML menu of
| |
| 95 /// all activities in the current course, mostly useful for
| |
| 96 /// creating popup navigation menus and so on.
| |
| 97
| |
| 98
| |
| 99 $THEME->chameleonenabled = true;
| |
| 100
| |
| 101 /// By setting this to false it disables editing of the stylsheets
| |
| 102 /// this saves the overhead of loading chameleon on each page
| |
| 103 /// viewed by a user who can edit pages. it is recommended to
| |
| 104 /// set this to false once you're satisfied with your theme.
| |
| 105
| |
| 106 $THEME->chameleonteachereditenabled = false;
| |
| 107
| |
| 108 /// If you use chameleon as a course theme setting this to true
| |
| 109 /// will allow teachers on that course to edit the theme.
| |
| 110
| |
| </pre>
| |
| | |
| Then you can start working on your CSS for any Moodle page from your browser.
| |
| | |
| You can see and add CSS properties of the two files "temp_user_styles.css" and "user_styles.css". You can not see or change the CSS properties in your other CSS files in your theme folder.
| |
| | |
| ==See also==
| |
| | |
| *[http://moodle.org/mod/forum/discuss.php?d=37674 Chameleon - an interactive Moodle theme] forum discussion
| |
| *[http://moodle.org/mod/forum/discuss.php?d=37680 Link font size bigger] forum discussion illustrating an alternative use
| |
| | |
| [[Category:Administrator]]
| |
| [[Category:Developer]]
| |
| [[Category:Themes]]
| |
