Theme Designer

The Theme Designer page allows you to edit the metadata of the theme. You need to have the following privileges:

  • mod-themes
  • mod-themes-edit

The features in the Theme Designer includes:

  • Reset All
  • Upload File
  • Refresh
  • Edit File
  • Download File
  • Replace File
  • Reset File
  • Delete File
  • Search

Reset All

This feature allows you to clear any uploaded or edited files that are stored in MongoDB and resets the theme back to the Ambience default settings.

To reset the theme, click on the “Reset All” button at the upper right corner of the page.

A dialog box will appear with a warning message that the reset cannot be revoked.

Click on the “OK” button to confirm or click on the “Cancel” button to abort the action.

Upload File

This feature allows you to upload a file into the theme.

To upload a file, click on the “Upload” button at the upper right corner of the page.

The “Upload” dialog box will appear.

Browse to the location of the file to be uploaded. By default, the file name is used in the “Name” field. If it is not the desired name, key in a unique name in the field. In the “Path” field, key in the desired path for the uploaded file is to be placed.

If the file already exist in the selected path, a dialog box will appear to request for your confirmation to upload and overwrite the existing file. Click on the “OK” button to confirm or click on the “Cancel” button to abort the action.

Upon successful uploading, a message will appear.

Refresh

After performing actions on the browser/tab, the list is reloaded to display the files. The manual “Refresh” button is available and is particularly useful if you have opened multiple pages and making changes.

The “Refresh” button is found on the upper right corner of the page. Clicking on it reloads the list of files.

Edit File

This feature allows you to edit the files in the selected theme. Do note that not all files can be edited. Files that can be edited will have the “Edit” icon under the “Actions” column.

To edit a file in the theme, click on the name of the file under the “Name” column.

The “Edit” page will appear. Make the necessary changes and click on the “Save” button to save the changes. Clicking on the “Close” aborts the action and return to the Theme Editor page. To save and exit, click on the “Save & Close” button.

Download File

To download a file in the theme, click on the “Download” icon under the “Actions” column corresponding to the desired file.

Replace File

To replace a file in the theme, click on the “Replace File” icon under the “Actions” column corresponding the desired file.

The “Edit” panel will appear below the page.

Browse to the location of the file. The “Name” and “Path” fields cannot be edited. Click on the “Save” button to replace the file. Click on the “Cancel” button to abort the action.

Reset File

This feature allows you to clear the edited file that is stored in MongoDB and resets the file back to the Ambience default settings. Do note that only edited files will have the “Reset” icon under the “Actions” column.

To reset the file, click on the “Reset” icon under the “Actions” column corresponding the desired file.

Upon successful reset, a message will appear. You can undo the reset by clicking on the “Undo” button in the message.

Delete File

To delete an uploaded file in the theme, click on the “Delete” icon under the “Actions” columns corresponding the desired file.

Upon successful deletion, a message will appear. You can undo the delete by clicking on the “Undo” button in the message.

Do note that only uploaded files will have the “Delete” icon.

More Actions

This feature allows user to perform actions on multiple files at the same time.

When the “More Actions” button located at the upper right corner of the page is clicked, a list of available actions are displayed.

If no file is selected prior clicking the button, there will be fewer actions available. To select a file, select the checkbox next to the name of the file.

Option Description
Select All Selects all files in the list.
Select None Unselects all files.
Invert Selection Inverts the current selection.
That is, any files selected will be unselected and vice versa.
Reset Resets selected files.
Download Downloads multiple files as a zip file.
If only one file is selected, the selected file will be downloaded as a JSON file.

Reset

To reset the selected files, click on the “More Actions” button and select the “Reset” option.

A confirm dialog ox will appear.

Click on the “OK” button to confirm the reset.

Download

To download the selected files, click on the “More Actions” button and select the “Download” option.

The downloaded file(s) has a filename of <filename>.theme.files.zip.

Show Updated

This feature allows you to search for files that has been edited. Their update date/time is displayed under the “Updated” column.

Search

There is a cross-field search function for the list of files. It is located at the upper left corner of the page.

This provides an easy way to search through the files. It is case-insensitive and display files that have the entered search value in any of the values of the fields below:

  • File
  • Ext
  • Updated

Alternatively, you can click on the any items under the “Root” or “Ext” columns to aid the search for the templates in the page.

In the example above, theme file that is in the root folder “wrapper” is shown.

These two search methods can be combined together, with each criteria separated by a comma.

Internationalisation

The Internationalisation (I18N) module supports the Theme module. The language that is used for the Theme module is based on language code.

Items, such as image, CSS, javascript or HTML can be used on a per language code basis.

To provide an internationalised version of the desired language, label the internationalised file that includes a suffix of the language code, _<CountryCode>.

For example, style/images/Ambience 2020 Logo-DarkBG.png is the origin image. The internationalised file for the French language should be style/images/Ambience 2020 Logo-DarkBG_fr.png.

Change the browser language to “French” and the French version will appear. Clear the browser cache if the image does not appear.

In the simple example below, the style/ambience_fr.css are internationalised to French language. The file has the country code _fr added to the end of its filename.

The new CSS file changes the colour of the header panel from grey-blue to brick-red.

Other Method

Another method to localise is by using the files in the Ambience web folder.

For example. the web/server-chooser/_index.html is the basis for the index.html shown by the Service Chooser module.

Take the server-chooser/_index.html and copy it to _index_de.html. Edit the copy as follows:

<title>DE Service Chooser</title>

Save the file and change the language of the browser to German. Refresh the screen and the tab has now changed, showing the alternate file (de = German) has been used.

This method applies not only to HTML files but images, CSS, etc. Any file loaded from the web folder can have custom I18N versions by appending _XX or _XX_YY depending on the language or variant that needs to be supported.