Aquesta pàgina forma part de la documentació de Moodle en català, tot i que no ha estat traduïda encara. Podeu contribuir obertament a les tasques de traducció. Podeu consultar la Guia d'edició de la documentació i també participar ens els debats del fòrum de traductors de la documentació a moodle.org

Chameleon theme: diferència entre les revisions

De MoodleDocs
Salta a:navegació, cerca
(Added a short explanation how to add the Chameleon engine to any Moodle theme)
Línia 70: Línia 70:
Then you can start working on your CSS for any Moodle page from your browser.
Then you can start working on your CSS for any Moodle page from your browser.


You can only add CSS properties to the two  
You can add CSS properties to 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==
==See also==

Revisió del 19:47, 19 abr 2006

Plantilla:Moodle 1.6 Chameleon is an interactive Moodle theme. You are welcome to try it at the 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 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 your web server user. Delete all CSS properties in these files if you want to start from scratch.
  • add the include line in "header.html" (line 9)
      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
  • add the Chameleon vars in "config.php" and set them (line 99 to 109)
     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

Then you can start working on your CSS for any Moodle page from your browser.

You can add CSS properties to 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