|
|
| (12 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| <p class="note">'''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 [[Talk:Student projects/Customisable theme|page comments]].''</p>
| | {{Moved_to_dev_docs}} |
| | |
| | |
| ==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 or both.
| |
| | |
| 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 ==
| |
| Given below is a brief description of various phases in the project.
| |
| | |
| *'''''PHASE 1'''''
| |
| :Go through the Moodle Code. Identifying the 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.
| |
| | |
| :Customization of following CSS elements has been implemented:-
| |
| ::* Background-Color
| |
| ::* Sideblock-Color
| |
| ::* Heading 1 Color
| |
| ::* Heading 2 Color
| |
| ::* Heading 3 Color
| |
| ::* Link Color
| |
| ::* Link Hover Color
| |
| ::* Link Visited Color
| |
| | |
| | |
| *'''''PHASE 2'''''
| |
| :To develop a block with the following features (custom_theme 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 corresponding id of the user who customized it. The table also has some other fields for more features.
| |
| ::* 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.
| |
| | |
| : The block has been implemented:
| |
| | |
| | |
| | |
| : The database tables are set up. The tables have a field for all the customizable elements that the user can customize and also the id of the user who entered the values (along with some other fields). The database was created using the XMLDB editor. Information about database is stored in upgrade.php and install.xml.
| |
| | |
| | |
| : The customtheme: Display capability controls who can see the block (and hence modify the theme). Using the has_capability() function, we can control the access to the block.
| |
| | |
| | |
| | |
| *'''''PHASE 3'''''
| |
| :Build a basic prototype that gives 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.
| |
| | |
| :The basic prototype of the theme has been implemented. It provides with an interface to enter CSS values for the customizable elements. They are stored in the database (created by the block). Also note that an actual CSS file is never created due to security concerns involved with writing on the system. The values are taken from the database and used directly without actually creating a CSS file (i.e. no extra entry is made in the $THEME->sheets in the config.php of the custom theme. All the values from database are directly dumped into the styles.php of the custom theme).
| |
| | |
| | |
| *'''''PHASE 4'''''
| |
| :Update the basic prototype to allow user with the following features:-
| |
| ::* Option of user to provide parent theme.
| |
| ::* Option of user to provide his/her own CSS file.
| |
| ::* Option of user to choose his own favicon.
| |
| | |
| :The form where the user enters values of CSS elements (settings.php) was recreated using formslib.php. It include the above mentioned features as seen in the screenshot:
| |
| | |
| :The way the final page looks after applying the custom_theme is decided by the following hierarchy:
| |
| | |
| ::1) Standard Theme.
| |
| ::2) Parent theme selected by the user (if any).
| |
| ::3) CSS file uploaded by the user (if any).
| |
| ::4) Favicon upload supersedes that of parent theme (if any).
| |
| ::5) CSS element values entered by the user (if the user selects to use them).
| |
| | |
| *'''''PHASE 5'''''
| |
| :Provide a palette to use and review the color easily. Instead of using the palette used in HTML editors, which creates a popup (that might get blocked) and is also slow, I have implemented palette using Iframe (that gives the effect of instantly loading them).
| |
| | |
| : This screenshot shows the palette in use:
| |
| | |
| == Progress ==
| |
| | |
| This project has been completed.
| |
| | |
| ==Moodle Tracker==
| |
| | |
| Use the Moodle Tracker to track the progress of the project.
| |
| [http://tracker.moodle.org/browse/CONTRIB-516 CONTRIB-516]
| |
| | |
| ==See also==
| |
| | |
| *[[GSOC/2008]]
| |
| | |
| [[Category:Project]]
| |
| [[Category:Themes]]
| |
