MoodleDocs - User contributions [en]

theme/custom theme/settings

2008-08-18T15:58:35Z

Akshit: /* What are these page elements */

The '''Custom Theme Settings''' page allows you to configure the appearance of your site when you are using '''custom_theme''' theme. Note that the changes you make in this page will be visible only when you have selected '''custom_theme''' from Site Administration > Appearance > Themes > Theme Selector.

==Configuring the Custom Theme==

The settings page provides you with the following options to customize your site:-

;Use a parent theme
:'''See note below'''
:Allows to use a parent theme on top of the Standard Moodle Theme.

;Upload your own CSS
:This will allow you to upload and use a CSS of your own choice. This uploaded style sheet will be applied after the Standard Moodle Theme and the parent theme (if selected any).
:If you have uploaded a CSS previously and want to make other changes without having to upload the CSS again, just uncheck the checkbox ''Use my own CSS''.
:If you have uploaded a CSS previously and don't want to use it anymore, check the checkbox ''Use my own CSS'' and leave the ''Upload CSS'' field empty. This will delete your CSS file from the server.

;Upload your own Favicon
:This will allow you to upload and use a Favicon of your own choice. The Favicon is the small icon shown in the browsers in front of the URL. Note that you can upload only a .ico file as favicon.
:If you have uploaded a Favicon previously and want to make other changes without having to upload the favicon again, just uncheck the checkbox ''Use my own favicon''.
:If you have uploaded a Favicon previously and don't want to use it anymore, check the checkbox ''Use my own Favicon'' and leave the ''Upload Favicon'' field empty. This will delete your favicon file from the server.

;Upload your own Moodle logo
:This will allow you to upload and use a Moodle logo of your own choice. Note that you can upload only a .jpg file as logo.
:If you have uploaded a Moodle logo previously and want to make other changes without having to upload the Moodle logo again, just uncheck the checkbox ''Use my own Moodle Logo''.
:If you have uploaded a Moodle logo previously and don't want to use it anymore, check the checkbox ''Use my own Moodle Logo'' and leave the ''Upload Logo'' field empty. This will delete your Moodle logo file from the server.

;Other CSS elements
:You can also supply the values of various page elements that you want your site to use. These values can be added in hexadecimal or selected from the palette next to each element. If you don't want your site to use these values for the page elements, just uncheck the checkbox ''Also use following value''.

'''Note''' - The parent theme feature has been included. It relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==What are these page elements==
The various page elements that you can customize are shown in the image on the side.
[[Image:Elements1.JPG|thumb|Various customizable elements]]

==The Final Appearance of Page==
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) Moodle logo uploaded supersedes that of parent theme (if any).
:6) CSS element values entered by the user (if the user selects to use them).

==See also==

*[[Student_projects/Customisable_theme]]

[[Category:Themes]]

File:Elements1.JPG

2008-08-18T15:58:13Z

Akshit:

theme/custom theme/settings

2008-08-18T15:55:22Z

Akshit: /* The Final Appearance of Page */

The '''Custom Theme Settings''' page allows you to configure the appearance of your site when you are using '''custom_theme''' theme. Note that the changes you make in this page will be visible only when you have selected '''custom_theme''' from Site Administration > Appearance > Themes > Theme Selector.

==Configuring the Custom Theme==

The settings page provides you with the following options to customize your site:-

;Use a parent theme
:'''See note below'''
:Allows to use a parent theme on top of the Standard Moodle Theme.

;Upload your own CSS
:This will allow you to upload and use a CSS of your own choice. This uploaded style sheet will be applied after the Standard Moodle Theme and the parent theme (if selected any).
:If you have uploaded a CSS previously and want to make other changes without having to upload the CSS again, just uncheck the checkbox ''Use my own CSS''.
:If you have uploaded a CSS previously and don't want to use it anymore, check the checkbox ''Use my own CSS'' and leave the ''Upload CSS'' field empty. This will delete your CSS file from the server.

;Upload your own Favicon
:This will allow you to upload and use a Favicon of your own choice. The Favicon is the small icon shown in the browsers in front of the URL. Note that you can upload only a .ico file as favicon.
:If you have uploaded a Favicon previously and want to make other changes without having to upload the favicon again, just uncheck the checkbox ''Use my own favicon''.
:If you have uploaded a Favicon previously and don't want to use it anymore, check the checkbox ''Use my own Favicon'' and leave the ''Upload Favicon'' field empty. This will delete your favicon file from the server.

;Upload your own Moodle logo
:This will allow you to upload and use a Moodle logo of your own choice. Note that you can upload only a .jpg file as logo.
:If you have uploaded a Moodle logo previously and want to make other changes without having to upload the Moodle logo again, just uncheck the checkbox ''Use my own Moodle Logo''.
:If you have uploaded a Moodle logo previously and don't want to use it anymore, check the checkbox ''Use my own Moodle Logo'' and leave the ''Upload Logo'' field empty. This will delete your Moodle logo file from the server.

;Other CSS elements
:You can also supply the values of various page elements that you want your site to use. These values can be added in hexadecimal or selected from the palette next to each element. If you don't want your site to use these values for the page elements, just uncheck the checkbox ''Also use following value''.

'''Note''' - The parent theme feature has been included. It relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==What are these page elements==
The various page elements that you can customize are shown in the image below.
[[Image:Elements.JPG|thumb|Various customizable elements]]

==The Final Appearance of Page==
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) Moodle logo uploaded supersedes that of parent theme (if any).
:6) CSS element values entered by the user (if the user selects to use them).

==See also==

*[[Student_projects/Customisable_theme]]

[[Category:Themes]]

theme/custom theme/settings

2008-08-18T15:53:16Z

Akshit: /* Configuring the Custom Theme */

The '''Custom Theme Settings''' page allows you to configure the appearance of your site when you are using '''custom_theme''' theme. Note that the changes you make in this page will be visible only when you have selected '''custom_theme''' from Site Administration > Appearance > Themes > Theme Selector.

==Configuring the Custom Theme==

The settings page provides you with the following options to customize your site:-

;Use a parent theme
:'''See note below'''
:Allows to use a parent theme on top of the Standard Moodle Theme.

;Upload your own CSS
:This will allow you to upload and use a CSS of your own choice. This uploaded style sheet will be applied after the Standard Moodle Theme and the parent theme (if selected any).
:If you have uploaded a CSS previously and want to make other changes without having to upload the CSS again, just uncheck the checkbox ''Use my own CSS''.
:If you have uploaded a CSS previously and don't want to use it anymore, check the checkbox ''Use my own CSS'' and leave the ''Upload CSS'' field empty. This will delete your CSS file from the server.

;Upload your own Favicon
:This will allow you to upload and use a Favicon of your own choice. The Favicon is the small icon shown in the browsers in front of the URL. Note that you can upload only a .ico file as favicon.
:If you have uploaded a Favicon previously and want to make other changes without having to upload the favicon again, just uncheck the checkbox ''Use my own favicon''.
:If you have uploaded a Favicon previously and don't want to use it anymore, check the checkbox ''Use my own Favicon'' and leave the ''Upload Favicon'' field empty. This will delete your favicon file from the server.

;Upload your own Moodle logo
:This will allow you to upload and use a Moodle logo of your own choice. Note that you can upload only a .jpg file as logo.
:If you have uploaded a Moodle logo previously and want to make other changes without having to upload the Moodle logo again, just uncheck the checkbox ''Use my own Moodle Logo''.
:If you have uploaded a Moodle logo previously and don't want to use it anymore, check the checkbox ''Use my own Moodle Logo'' and leave the ''Upload Logo'' field empty. This will delete your Moodle logo file from the server.

;Other CSS elements
:You can also supply the values of various page elements that you want your site to use. These values can be added in hexadecimal or selected from the palette next to each element. If you don't want your site to use these values for the page elements, just uncheck the checkbox ''Also use following value''.

'''Note''' - The parent theme feature has been included. It relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==What are these page elements==
The various page elements that you can customize are shown in the image below.
[[Image:Elements.JPG|thumb|Various customizable elements]]

==The Final Appearance of Page==
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).

==See also==

*[[Student_projects/Customisable_theme]]

[[Category:Themes]]

Student projects/Customisable theme

2008-08-18T15:44:09Z

Akshit: /* Progress */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form2.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change2.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== Progress ==

This project has been completed. The deliverables that we initially set out with were bifurcated into creating a block (custom_theme) and creating a theme (custom_theme). The list of deliverables we set out with and their status is reported below.

The details of the deliverables for the custom_theme block are as follows:-

* Create the block as a means of access to the page to customize theme - '''Completed'''.
* Creation of database tables and storing it in \db\update.php & \db\install.xml - '''Completed'''.
* Limit who has the access to the block and who doesn't using capabilities and permissions - '''Completed'''.

The details of the deliverables for the custom_theme theme are as follows:-

* Create a form using formslib.php where user enters all the values and this page is linked from the custom_theme block - '''Completed'''.
* Allow users to provide their parent theme which goes on top of Moodle Standard Stylesheets - '''Dropped''' (see note below)
* Allow users to provide their own CSS file which goes on top of parent theme (if any) - '''Completed'''.
* Allow users to upload their own Favicon which overrides the favicon of the parent theme - '''Completed'''.
* Allow users to upload their own Moodle logo which overrides the logo of the parent theme (goes in the header and footer of the page) - '''Completed'''.
* Allow users to enter values of various CSS fields in the customize page - '''Completed'''.
* Provide a palette to use and review the color easily - '''Completed'''.

'''Note''' - The parent theme feature has been included. However, it relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

Student projects/Customisable theme

2008-08-18T13:14:01Z

Akshit: /* Progress */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form2.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change2.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== Progress ==

This project has been completed. The deliverables were bifurcated into creating a block (custom_theme) and creating a theme (custom_theme).

The details of the deliverables for the custom_theme block are as follows:-

* Create the block as a means of access to the page to customize theme - '''Completed'''.
* Creation of database tables and storing it in \db\update.php & \db\install.xml - '''Completed'''.
* Limit who has the access to the block and who doesn't using capabilities and permissions - '''Completed'''.

The details of the deliverables for the custom_theme theme are as follows:-

* Create a form using formslib.php where user enters all the values and this page is linked from the custom_theme block - '''Completed'''.
* Allow users to provide their parent theme which goes on top of Moodle Standard Stylesheets - '''Dropped''' (see note below)
* Allow users to provide their own CSS file which goes on top of parent theme (if any) - '''Completed'''.
* Allow users to upload their own Favicon which overrides the favicon of the parent theme - '''Completed'''.
* Allow users to upload their own Moodle logo which overrides the logo of the parent theme (goes in the header and footer of the page) - '''Completed'''.
* Allow users to enter values of various CSS fields in the customize page - '''Completed'''.
* Provide a palette to use and review the color easily - '''Completed'''.

'''Note''' - The parent theme feature has been included. However, it relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

Student projects/Customisable theme

2008-08-18T13:13:39Z

Akshit: /* Progress */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form2.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change2.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== Progress ==

This project has been completed. The deliverables were bifurcated into creating a block (custom_theme) and creating a theme (custom_theme).

The details of the deliverables for the custom_theme block are as follows:-

* Create the block as a means of access to the page to customize theme - '''Completed'''.
* Creation of database tables and storing it in \db\update.php & \db\install.xml - '''Completed'''.
* Limit who has the access to the block and who doesn't using capabilities and permissions - '''Completed'''.

The details of the deliverables for the custom_theme theme are as follows:-

* Create a form using formslib.php where user enters all the values and this page is linked from the custom_theme block - '''Completed'''.
* Allow users to provide their parent theme which goes on top of Moodle Standard Stylesheets - '''Dropped''' (see note below)
* Allow users to provide their own CSS file which goes on top of parent theme (if any) - '''Completed'''.
* Allow users to upload their own Favicon which overrides the favicon of the parent theme - '''Completed'''.
* Allow users to upload their own Moodle logo which overrides the logo of the parent theme (goes in the header and footer of the page) - '''Completed'''.
* Allow users to enter values of various CSS fields in the customize page - '''Completed'''.
* Provide a palette to use and review the color easily - ''Completed''.

'''Note''' - The parent theme feature has been included. However, it relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

Student projects/Customisable theme

2008-08-18T13:12:50Z

Akshit: /* Progress */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form2.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change2.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== Progress ==

This project has been completed. The deliverables were bifurcated into creating a block (custom_theme) and creating a theme (custom_theme).

The details of the deliverables for the custom_theme block are as follows:-

* Create the block as a means of access to the page to customize theme - ''Completed''.
* Creation of database tables and storing it in \db\update.php & \db\install.xml - ''Completed''.
* Limit who has the access to the block and who doesn't using capabilities and permissions - ''Completed''.

The details of the deliverables for the custom_theme theme are as follows:-

* Create a form using formslib.php where user enters all the values and this page is linked from the custom_theme block - ''Completed''.
* Allow users to provide their parent theme which goes on top of Moodle Standard Stylesheets - ''Dropped'' (see note below)
* Allow users to provide their own CSS file which goes on top of parent theme (if any) - ''Completed''.
* Allow users to upload their own Favicon which overrides the favicon of the parent theme - ''Completed''.
* Allow users to upload their own Moodle logo which overrides the logo of the parent theme (goes in the header and footer of the page) - ''Completed''.
* Allow users to enter values of various CSS fields in the customize page - ''Completed''.
* Provide a palette to use and review the color easily - ''Completed''.

'''Note''' - The parent theme feature has been included. However, it relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

Student projects/Customisable theme

2008-08-18T13:10:27Z

Akshit: /* Progress */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form2.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change2.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== Progress ==

This project has been completed. The deliverables were bifurcated into creating a block (custom_theme) and creating a theme (custom_theme).

The details of the deliverables for the custom_theme block are as follows:-

* Create the block as a means of access to the page to customize theme - Completed.
* Creation of database tables and storing it in \db\update.php & \db\install.xml - Completed.
* Limit who has the access to the block and who doesn't using capabilities and permissions - Completed

The details of the deliverables for the custom_theme theme are as follows:-

* Create a form using formslib.php where user enters all the values and this page is linked from the custom_theme block - Completed.
* Allow users to provide their parent theme which goes on top of Moodle Standard Stylesheets - Dropped (see note below)
* Allow users to provide their own CSS file which goes on top of parent theme (if any) - Completed
* Allow users to upload their own Favicon which overrides the favicon of the parent theme - Completed.
* Allow users to upload their own Moodle logo which overrides the logo of the parent theme (goes in the header and footer of the page) - Completed.
* Allow users to enter values of various CSS fields in the customize page - Completed.
* Provide a palette to use and review the color easily - Completed.

'''Note''' - The parent theme feature has been included. However, it relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. This is a one-time task and I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

Student projects/Customisable theme

2008-08-18T11:35:23Z

Akshit: /* Progress */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form2.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change2.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== Progress ==

This project has been completed. The deliverables were bifurcated into creating a block (custom_theme) and creating a theme (custom_theme).

The details of the deliverables for the custom_theme block are as follows:-

* Create the block as a means of access to the page to customize theme - Completed.
* Creation of database tables and storing it in \db\update.php & \db\install.xml - Completed.
* Limit who has the access to the block and who doesn't using capabilities and permissions - Completed

The details of the deliverables for the custom_theme theme are as follows:-

* Create a form using formslib.php where user enters all the values and this page is linked from the custom_theme block - Completed.
* Allow users to provide their parent theme which goes on top of Moodle Standard Stylesheets - Dropped (see note below)
* Allow users to provide their own CSS file which goes on top of parent theme (if any) - Completed
* Allow users to upload their own Favicon which overrides the favicon of the parent theme - Completed.
* Allow users to upload their own Moodle logo which overrides the logo of the parent theme (goes in the header and footer of the page) - Completed.
* Allow users to enter values of various CSS fields in the customize page - Completed.
* Provide a palette to use and review the color easily - Completed.

'''Note''' - The parent theme feature has been included. However, it relies on Moodle cookies to work as it needs information about the currently logged user to extract the parent theme specified by him/her from the database. However, currently all Moodle Themes block cookies by setting $nomoodlecookie as true. Therefore, for the parent theme feature to work, the following line in styles.php of the theme that we have selected as parent must be commented out.
<code php> $nomoodlecookie = true; </code>
When this line is commented out in the style.php the parent theme, the feature works. I suggest this line be left out in future theme releases to account for usability of parent theme feature of custom_theme.

==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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

Student projects/Customisable theme

2008-08-18T10:00:33Z

Akshit: /* Milestones in the Project */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form2.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change2.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== 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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

File:Show form2.JPG

2008-08-18T09:59:51Z

Akshit:

File:Show change2.JPG

2008-08-18T09:59:34Z

Akshit:

File:Show form.JPG

2008-08-18T09:53:44Z

Akshit: uploaded a new version of "Image:Show form.JPG"

File:Show change.JPG

2008-08-18T09:50:51Z

Akshit: uploaded a new version of "Image:Show change.JPG"

Student projects/Customisable theme

2008-08-18T09:41:14Z

Akshit: /* Milestones in the Project */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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/her own favicon for the site.
::* Option of user to choose his/her own Moodle Logo for the site.

: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:
[[Image:Show_form.JPG]]

: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 uploaded supersedes that of parent theme (if any).
::5) Moodle logo uploaded supersedes that of parent theme (if any).
::6) CSS element values entered by the user (if the user selects to use them).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== 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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

theme/custom theme/settings

2008-08-13T10:29:03Z

Akshit:

theme/custom theme/settings

2008-08-13T10:26:13Z

Akshit: /* What are these page elements */

theme/custom theme/settings

2008-08-13T10:25:39Z

Akshit: /* The Final Appearance of Page */

theme/custom theme/settings

2008-08-13T10:25:25Z

Akshit: /* What are these page elements */

theme/custom theme/settings

2008-08-13T10:25:05Z

Akshit: /* What are these page elements */

theme/custom theme/settings

2008-08-13T10:24:22Z

Akshit: /* What are these page elements */

Student projects/Customisable theme

2008-08-13T10:23:12Z

Akshit: /* See also */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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:
[[Image:Show_form.JPG]]

: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).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== 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]]
*[[theme/custom theme/settings]]

[[Category:Project]]
[[Category:Themes]]

theme/custom theme/settings

2008-08-13T10:21:11Z

Akshit:

File:Elements.JPG

2008-08-13T10:21:04Z

Akshit:

theme/custom theme/settings

2008-08-13T09:43:12Z

Akshit:

theme/custom theme/settings

2008-08-13T09:18:26Z

Akshit: New page: The '''RSS feeds''' block enables RSS feeds from external websites to be displayed within Moodle. As the information on the other site (for example, news headlines or recently added do...

The '''RSS feeds''' block enables [[RSS]] feeds from external websites to be displayed within Moodle. As the information on the other site (for example, news headlines or recently added documents) is changed the block will update to show the latest information. One or more RSS feeds can be added to a course by selecting them from an existing list. Site and course home pages are common places to place an RSS feed block(s).

==Configuring RSS feeds block==

After adding an RSS feed block, select the edit icon on the Remote News Feed block. The default will open up the '''Configure this block''' tab.

;Display each link's description?
:Choose yes or no from the drop-down menu to determine whether the block will display a description of each article, or just the title of the article. Both the title and description are generated by the external feed.

;Max number of entries to show per block
:Determines how many articles will be displayed. The most recent will be displayed first.

;Choose the feeds to make available
:Check the box next to each feed you would displayed in this block. You can have more than one instance of the RSS feed block if you would like to break them up.

;Title
:Enter a title for the block. If you leave this blank a title will be taken from the RSS feeds, which can be confusing if there are multiple feeds in one block.

;Display a link?
:Each article headline should link to the full article, but you can also display a link to the original site where available.

;Show channel image?
:Some feeds supply an image or logo from the original site which you can choose to display when available.

==Add/Manage all RSS feeds ==
All the Moodle site's RSS feeds can be managed on the ''Manage all my feeds'' tab in the RRS News Feed edit menu. The site administrator may give other roles permission to use this tab. This tab creates a list of RSS feeds that can be selected for display in every course on the Moodle site.

Copy and paste (or type) the URL address of the RSS feed in the space provided. This the generating site's actual RSS page address. For example here is a Moodle RSS feed address : http://moodle.org/rss/file.php/1/1/forum/1/rss.xml

Adding a custom title will take the place of the one supplied by the generating site.There is a validation tool included to confirm the feed URL is accurate.

Click the ''Add'' button to submit the feed.

==See also==

*[http://www.youtube.com/watch?v=wiwSZNgXuzo RSS feeds and how to add them to your course video]

[[Category:RSS]]

[[fr:Bloc Fil RSS]]

Student projects/Customisable theme

2008-08-13T07:03:31Z

Akshit: /* Milestones in the Project */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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:
[[Image:Show_form.JPG]]

: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).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== 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]]

Student projects/Customisable theme

2008-08-13T06:58:43Z

Akshit: /* Milestones in the Project */

'''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]].''

==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:
[[Image:Show_block.JPG]]

: 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.
[[Image:Show_database.JPG ]]

: 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.
[[Image:Show_capabilities.JPG]]

*'''''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:
[[Image:Show_form.JPG]]

: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).

:The final page looks like this when the form shown above is saved:
[[Image:Show_change.JPG]]

*'''''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:
[[Image:Show_palette.JPG]]

== 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]]

File:Show palette.JPG

2008-08-13T06:55:38Z

Akshit:

File:Show form.JPG

2008-08-13T06:55:30Z

Akshit:

File:Show database.JPG

2008-08-13T06:55:22Z

Akshit:

File:Show change.JPG

2008-08-13T06:55:12Z

Akshit:

File:Show capabilities.JPG

2008-08-13T06:54:57Z

Akshit:

File:Show block.JPG

2008-08-13T06:54:47Z

Akshit:

Student projects/Customisable theme

2008-08-13T06:45:00Z

Akshit: /* Milestones in the Project */

'''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]].''

==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).

:The final page looks like this when the form shown above is saved:

*'''''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]]

Student projects/Customisable theme

2008-08-13T06:34:39Z

Akshit: /* Milestones in the Project */

Student projects/Customisable theme

2008-08-13T06:33:03Z

Akshit: /* Milestones in the Project */

Student projects/Customisable theme

2008-08-13T06:31:14Z

Akshit: /* Milestones in the Project */

Student projects/Customisable theme

2008-08-13T06:28:27Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:27:57Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:26:52Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:24:30Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:24:11Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:23:21Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:22:44Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:21:46Z

Akshit: /* Milestones in the Project */

'''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]].''

==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 following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:13:16Z

Akshit: /* Milestones in the Project */

'''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]].''

==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. I have decided to allow customization of following CSS elements :-
** 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 (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 corresponding 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.

The block has been implemented :-
: The following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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. 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).
: This screenshot displays the current interface to enter the CSS elements.
[[Image:Get_values.JPG]]
: This screenshot displays the change in Moodle's look on entering the above values for CSS elements.

*''PHASE 4'' - Recreate the page where the user enters values of CSS elements (/custom_theme/settings.php) with formslib.php. Include further support to allow user to do the following:

** 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 way the final page looks after applying the custom_theme is decided by the following hierarchy:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** CSS element values entered by the user (if the user selects to use them).

*''PHASE 4'' - 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:11:44Z

Akshit: /* Milestones in the Project */

'''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]].''

==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. I have decided to allow customization of following CSS elements :-
** 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 (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 corresponding 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.

The block has been implemented :-
: The following screenshot shows how the block looks. The page to customize the theme is accessible through the block.

: 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. 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).
: This screenshot displays the current interface to enter the CSS elements.
[[Image:Get_values.JPG]]
: This screenshot displays the change in Moodle's look on entering the above values for CSS elements.

*''PHASE 4'' - Recreate the page where the user enters values of CSS elements (/custom_theme/settings.php) with formslib.php. Include further support to allow user to do the following:

** 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 way the final page looks after applying the custom_theme is decided by the following hierarchy:

** Standard Theme.
** Parent theme selected by the user (if any).
** CSS file uploaded by the user (if any).
** Favicon upload supersedes that of parent theme (if any).
** CSS element values entered by the user (if the user selects to use them).

*''PHASE 4'' - 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.

== 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]]

Student projects/Customisable theme

2008-08-13T06:11:27Z

Akshit: /* Progress */