|
|
| Line 1: |
Line 1: |
| This page shows you how to create a custom bootstrap theme in Moodle. This is just one possibility and perhaps there are other, more efficient ways to do that.
| |
| This tutorial assumes the following setup:
| |
|
| |
|
| *Eclipse IDE
| |
| *Linux OS
| |
|
| |
| = Copy and rename Simple theme =
| |
|
| |
| You will choose a name for the new theme. For this tutorial let us assume it is: mytheme
| |
| Either in eclipse or in the file manager right click on folder "simple" in /theme/simple, then select copy, then paste.
| |
| *Rename the copied folder to "mytheme".
| |
| *Rename mytheme/lang/en/theme_simple.php to mytheme/lang/en/theme_mytheme.php
| |
| *In eclipse in the "PHP Explorer" select the folder "mytheme"
| |
| *In eclipse in the top menu select "Search->Search..." -> the search window opens
| |
| *In the search field type: simple (case sensitive)
| |
| *Select "Selected Ressources" in the select options
| |
| *Click on "Replace..." at the bottom of the search window
| |
| *Click on "Preview" to verify your search/replace query and then replace
| |
| *There is a last string in en/lang/theme_mytheme.php with $string['configtitle'] = 'Simple'; change it to $string['configtitle'] = 'Mytheme';
| |
|
| |
| You should now have a new theme, that should work correctly. Test it in your browser
| |
|
| |
| = Integrate parent theme bootsrap =
| |
|
| |
| We have to create some temporary stuff, so that we can work with LESS instead of CSS. This simplifies developing the code and has some other advantages. LESS is quite easy to learn and similar to CSS. Nevertheless, in order to test all the code, we have to render the LESS code, so that we do output CSS to the browser. For more information on LESS refer to:
| |
|
| |
| [Using the LESS CSS Preprocessor http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/]
| |
|
| |
| For testing we generate the CSS on the fly. Only when you have finished designing your theme, you can outcomment or delete the temporary stuff and generate a final CSS. You also can stay with the temporary setup, but that will have quite an impact on the performance.
| |
|
| |
| = Work with LESS =
| |
