Creating and using themes for MLE-Moodle mobile browser access
Themes are a new feature since 0.8.0.1.
They only work for the mobile browser access view (not with the mobile phone client MLE)!
With a theme you can change the style-sheets, the default icons and more.
Install a theme in MLE-Moodle:
If you already have a theme-package for MLE-Moodle go to the Administration page - Moduls - MLE - MLE Info
Upload and Install the theme package.
Info: The images and style-sheets are cached for 15 minutes, so after installing a new theme you should clear your browser cache to see the chnages imedeatly.
Creating your own theme package for MLE-Moodle:
A valid theme packages must be a ZIP file and must contain at least a text-file called "config.ini".
The "config.ini" file contains the configuration of your theme, here is an example:
; should we display the icons of the links on the start-page? images_on_start_page=false ; should we display the icons of the links in the top navigation? images_in_nav=true ; that is the Browser-Window-Title page_title=My MLE ; a custom image that should be displayed left of the title on the start page start_logo=logo.jpg ; the title on the start-page start_title=My Start Titel
Currently there a 4 style-sheets (maybe there will be more in the future):
- styles_big.css (for devices with a big screen resolution)
- styles_touchscreen.css (for devices with a pointer device or a touchscreen)
- styles_iphone.css (special for iPhone and iPod-browser)
Just use these style-sheets from MLE-Moodle add your changes and add theme (with the exact same name) to your ZIP package. If a style-sheet file is not found in your theme-packages the MLE-Moodle default style-sheet will be used.
If you want to use custom images in your style-sheet, use the following image URL: "browser/img.php?img=IMGNAME" (where IMGNAME is the name of your image)
Custom images and icons:
To use your own images or to overwrite the default images of MLE-Moodle. Just copy them to your ZIP-package (you can place them to a sub-folder called "img/" or directly to the root folder).
To replace the standard icons of MLE-Moodle (moodle/blocks/mle/images/) put the images you want to replace with the exact same name to the sub-folder called "img/" in your ZIP-file.
To replace the standard client icons of MLE-Moodle (moodle/blocks/mle/images/client/) put the images you want to replace with the exact same name to the sub-folder called "img/client/" in your ZIP-file.
For devices with a big screen you can use bigger icons instead of the default icons. Just crate a sub-folder called "img/big/" and "img/client/big/" in your ZIP-file and place the bigger icons there.
To test your various style-sheets you can simulate the access of a phone browser. Just add to the MLE-Moodle mobile browser URL the following parameter "&browser=0".
"browser=0" --> uses the standard style-sheet
"browser=iphone" --> simulates the iPhone
"browser=XY" --> the device name you want to test
Removing a theme:
Just delete the mle/theme folder in your moodle-data directory