Custom Theme Module

Overview of the Custom Theme Module

If a Sahana user is unsatisfied with one of the inbuilt Sahana themes, he should be able to select the theme and change its colors, site-logo and other site elements to his liking using a web-based GUI (palates, images, upload-boxes etc) w/o having to delve into CSS.

Moreover, the site admin can customize the theme to his liking and specify if non-admin users be able to do so or not. If allowed, each user may customize the look and feel and view the Sahana page page as they customize it.

Customizable Features of Custom Theme Module

Modify Site Elements

It currently allows for customization of various site elements :-

  1. Central Box Border Color
  2. Central Box Background Color
  3. Text Color
  4. Header Background Color
  5. Footer Background Color
  6. Upper Menu Background Color
  7. Lower Menu Background Color
  8. Upper Menu Text Color
  9. Lower Menu Text Color

Description of various elements is provided in the screenshot below.

The colors for these elements can be chosen using palettes in the “Modify Theme” section as visible in screenshots.

Parent Theme Feature

The user has the power to choose from any of the existing themes as the parent theme. This means he can choose an existing theme and make modifications on the site elements in that theme rather than starting from scratch.

If one wants use some theme (like clean) which has a different layout than default (regarding position of navigation boxes), but only wants to change the bg-color from white to light-blue, he can choose to inherit the custom_theme from “clean” and then specify various parameters (bg color etc).

The parent theme can also be specified in the “Modify Theme” section of the module.

Specify if you want to use the default logo or use the logo uploaded by you. This is a checkbox in the “Modify Theme” section of the module.

Use the “Upload Custom Logo” section of the module to upload your own logo for the site.

Hierarchical Features of the Custom Theme Module

Initially only the site administrator can use the customizable features of the module (including using custom logo) to customize the Sahana site. These changes will be visible to all users across the site.

Using the Custom Theme Admin Page

Using the Admin section of the Custom Theme module, the site administrator can specify if he wants to give access permissions to other site roles (like registered user, anonymous user etc).

This section has a list of roles available and a checkbox against each of them. The administrator can check whatever roles to which he wants to give access permission for the custom theme module. Whichever roles will be given access permission will be able to use the customizable features of the custom theme module.

Hierarchy of Customizations

Initially all users will be only able to view the site as-per site administrator's customizations since only site administrator has the access permissions to the module. Now if the administrator gives access permissions to registered users as well, then every user will be able to use the customizable features of the custom theme module.

Any changes made by any non-admin user (as mentioned above) will be visible only to that user. Other users will still be viewing the site as the admin customized it, until they customize the site on their own (in which case also, their customizations will be limited to them only).

The following image will make this more clear.

Hierarchically speaking, if a user is given access permissions to the theme module, then the following hierarchy is observed.

  • The user's customizations are at the top.
  • Then the administrator's customizations.
  • Finally, the default values for site elements.

To make it more clear, consider the three scenarios from a user's point of view :-

  • If the user customizes the site, he will be viewing the site as he customizes it and not how administrator customized it (assuming the administrator has given access permissions to the module).
  • If user doesn't customize the site, he will be viewing the site as the administrator customized it (doesn't matter if he has the access permission or not).
  • If neither the user, not the administrator make use of the customizable features, the user will be viewing the site as if default theme was applied.

Hence using this well defined hierarchy and the permissions & roles structure, we have achieved following goals.

  • It is possible to control who will be able to customize the Sahana site and who will not be (using the permissions & roles section from the admin page of the module).
  • It is possible to make sure that all users view the Sahana site in the same way as the site administrator wants them to.
  • It is possible to make sure that some users can view and customize the site as they want to, but the rest will still view the site the way administrator customized it.
  • It is possible that every user views the site the way they want to customize it.

Structure of the Theme

The code is split into two components :-

  1. “theme” module - This is available as mod/theme folder. It interacts with the user for getting custom values, the database for storing custom values, and with lib_xhtml for generating relevant custom stylesheets.
  2. “custom_theme” theme - This is available as www/theme/custom_theme folder. It has two components :-
    • Palettes - The code for palettes is in the www/theme/custom_theme/colorpicker folder.
    • Custom Logos - The custom logos are stored in www/theme/custom_theme/logos folder. Note that this folder may require write permission while installation (because uploaded logos are stored here).

Testing Various Features of the Module

The screenshots of the testing procedure are provided along with a description of how the testing is done.

  • The original Sahana page as viewed by the site administrator.

  • The custom_theme module home page.

  • Choosing colors for various site elements using palette (no logo used in this case).

  • The new look of the site with all site elements changed (default logo used as the administrator had unchecked the “Use Custom Logo” checkbox)

  • Upload new logo for the site.

  • Change header color and check “Use Custom Logo” and save settings.

  • The Sahana site now has changed header color and new logo flashing on the header.

  • Theme module's administrator page. The administrator has allowed registered users and some other roles, access to custom_theme module.

  • The Sahana site as it looks to a registered user (username: user) who has not customized it to his liking. Hence administrator's customizations are loaded.

  • The registered user (user) now customizes the page elements to his liking and chooses to use the default Sahana logo for the site.

  • The new site appearance as it appears to the registered user (user) with the default Sahana logo. These customizations override those by the administrator (but only for this user as we will see in next screenshot).

  • The Sahana page as it looks to another registered user (username: user1) who has not customized it to his liking. Note that all customizations done by registered user (user) were local to him only and another user (user1) still sees the site as the administrator customized it.

  • Administrator takes away theme module access permissions from registered users.

  • Now, user1 cant modify the page to his liking and administrator's customizations cant by overridden by any registered user.

QR Code
QR Code dev:theme (generated for current page)