Student projects/Customisable theme: Difference between revisions

Revision as of 23:02, 24 June 2008

Note: This page outlines ideas for the Customisable theme project. It's a specification under construction! If you have any comments or suggestions, please add them to the page comments.

Summary of Tasks

The objective of this project is creation of a new customizable theme, which gives the Moodle user various options like selecting a logo from the site files and/or uploads their own favicon, customize various CSS elements, selecting a parent theme etc. The main aim of the theme is to simplify the tasks of users who are still not ready to delve into CSS and HTML editing and yet give them the ability to customize the look and feel of Moodle.

The challenge in the project will be to optimize the balance between the simplicity of the theme interface and the customizability of the theme. Unlike the Chameleon theme, the aim would not be to provide with the opportunity to edit each and every element of the page by editing CSS, but to provide the easy editing of the elements of the page that effect the user the most (like background color, text color and size etc.) through a graphical interface.

Architecture Design

Like most of the existing Moodle themes, our theme shall also be based on at most three stylesheets utilizing the cascading character of CSS. The first level is that of the existing "Standard" Moodle theme which will keep the theme up to date with the Moodle updates. The second level is that of a parent theme which the user might specify. For the third level, the user may provide his own stylesheets or set values for the CSS elements so that a style sheet is automatically generated.

To implement it, we shall select some of the CSS elements that we wish to make customizable by the user. For every user, we will create and store the CSS elements in the database and the theme shall use the values for each user along with the CSS sheets of the parent themes specified (if any).

For backend support we will use a MySQL database.

Milestones in the Project

PHASE 1 - Go through the Moodle Code. Identifying CSS elements in the appearance. Analyze other popular customizable pages like blogger, wordpress and analyze the Moodle themes structure in more detail to select some the the most important CSS elements that will have the most prominent effect in deciding the look of the page. At the end, I shall have clear understanding of the Moodle Code (esp. the theme part).

PHASE 2 - Develop a block with the following features (customtheme block):-
- Provide the only means of access to the page to customize theme. The user is presented with the link to the page that allows to customize the theme.
- Creation of database tables. The database has a field for each of the CSS element that the user wishes to customize and the corresponging id of the user who customized it.
- Support for a capability to show or hide the block. This capability along with the has_capability() is used to limit who has the access to modify the theme and who does not.

PHASE 3 - Build a basic prototype that doesnt support the following features yet :-
- Option of user to provide his/her own CSS file.
- Option of user to provide parent theme.
- Option of user to choose his own favicon.

It does give the user the option to enter values of various CSS elements which are stored in the database (which is created by the custom theme block). The values from the database are then used to style the look of Moodle.

PHASE 4 - Modify the prototype to allow the user to provide his/her own CSS, parent theme and choose a favicon.

PHASE 5 - Provide a GUI (like a pallette) that makes it really easy for the users to choose colors.

PHASE 6 - Documentation of project. Expected duration - 5 days.

Progress

Currently I am going through the Moodle Theme CSS and the configuration scripts before I lay out the final plans for the implementation.

@@ Line 18: / Line 18: @@
 == Milestones in the Project ==
-*''PHASE 1'' - Go through the Moodle Code. Identifying CSS elements in the appearance. Analyze other popular customizable pages like blogger, wordpress and analyze the Moodle themes structure in more detail to select some the the most important CSS elements that will have the most prominent effect in deciding the look of the page. At the end, I shall have clear understanding of the Moodle Code (esp. the theme part). Expected duration - 5 days.
+*''PHASE 1'' - Go through the Moodle Code. Identifying CSS elements in the appearance. Analyze other popular customizable pages like blogger, wordpress and analyze the Moodle themes structure in more detail to select some the the most important CSS elements that will have the most prominent effect in deciding the look of the page. At the end, I shall have clear understanding of the Moodle Code (esp. the theme part).
-* ''PHASE 2'' - Design the theme prototype using only a few of the CSS elements (like only background color, text color and heading size). At this stage we will not provide the ability of the user to provide his own CSS. This task may be classified into the following subtasks:
-:: ''Phase 2a'' - Designing of a script that shall take values for the CSS elements(eg. #FFFFFF, #FFFFFF, 16px) and the parent theme name (eg. "standardwhite"). It creates a CSS the files corresponding to that user form these values and writes this information to the database. At the end, I should have a script that is able to do the mentioned tasks. Expected duration - 25 days.
+* ''PHASE 2'' - Develop a block with the following features (customtheme block):-
+** Provide the only means of access to the page to customize theme. The user is presented with the link to the page that allows to customize the theme.
+** Creation of database tables. The database has a field for each of the CSS element that the user wishes to customize and the corresponging id of the user who customized it.
+** Support for a capability to show or hide the block. This capability along with the has_capability() is used to limit who has the access to modify the theme and who does not.
-:: ''Phase 2b'' - Designing of the config.php for the theme, which will specify how the CSS files work together. It will obtain the parent theme to be used for the user from the database (CSS files for the "standardwhite" theme) and the CSS file that has been created for that user (as mentioned in phase 2a). Expected duration - 15 days.
+* ''PHASE 3'' - Build a basic prototype that doesnt support the following features yet :-
+** Option of user to provide his/her own CSS file.
+** Option of user to provide parent theme.
+** Option of user to choose his own favicon.
-* ''PHASE 3'' - Extend the theme in phase 2 to use all the CSS elements that we wanted to be made customizable (include header text color, font size and other elements identified in phase (1) and also provide the support to select/upload a custom favicon. At this point we will also allow the option of an administrator setting the theme for the site with their particular configuration or allowing users to customize various elements of the theme by manipulating the parameters "allowuserthemes" and "allowcoursethemes". Expected Duration - 10 days.
+It does give the user the option to enter values of various CSS elements which are stored in the database (which is created by the custom theme block). The values from the database are then used to style the look of Moodle.
-<pre>
-Theme type        Overwrites            Display        Setting type
--------------------------------------------------------------------------------
-Site              -                      all pages*    saved in theme profile
-User              Site theme            all pages*     saved in user profile
+* ''PHASE 4'' - Modify the prototype to allow the user to provide his/her own CSS, parent theme and choose a favicon.
-Course            Site and user themes  one course    saved in course profile
+* ''PHASE 5'' - Provide a GUI (like a pallette) that makes it really easy for the users to choose colors.
-</pre>
-* ''PHASE 4'' - We will now allow the user to provide his own CSS files instead of generating a CSS file from values. We might also need to investigate the need for modification of the provided CSS file to suit the standard format that we will use. Expected duration - 20 days
-* ''PHASE 5'' - Design of GUI for a seamless transition into Moodle. The GUI will take the parent theme from the user and the option to provide his own CSS or values for the CSS elements. If user provides his own CSS then the created CSS for that user is overwritten. Expected duration - 10 days
 * ''PHASE 6'' - Documentation of project. Expected duration - 5 days.

Documentation