Themes FAQ: Difference between revisions
Mary Evans 2 (talk | contribs) |
m (Added link to spanish translation of page) |
||
(46 intermediate revisions by 8 users not shown) | |||
Line 1: | Line 1: | ||
{{Themes}} | {{Themes}} | ||
==Where can I find more Moodle themes?== | |||
As well as standard themes, which you will find in your Moodle installation, there are many FREE themes available for download from [https://moodle.org/plugins/browse.php?list=category&id=3 Moodle plugins directory - Category:Themes]. Don't forget to choose the correct version of a theme for the version of Moodle you are currently using. | |||
==How do I install a new theme?== | ==How do I install a new theme?== | ||
# Unzip the .zip file to an empty local directory. | # Unzip the .zip file to an empty local directory. | ||
# Upload folder to your web server to the /moodle/theme/[Theme Name]. (Replace [Theme Name] with the name of the theme you have downloaded.) Ensure the new theme folder and its contents are readable by the webserver. Change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme. | # Upload folder to your web server to the /moodle/theme/[Theme Name]. (Replace [Theme Name] with the name of the theme you have downloaded.) Ensure the new theme folder and its contents are readable by the webserver. Change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme. | ||
# Choose your new theme from within Moodle via ''Administration > Appearance > Themes > Theme selector'' | # Choose your new theme from within Moodle via ''Administration > Appearance > Themes > Theme selector''. | ||
=== How do I install a new theme when using cPanel? === | === How do I install a new theme when using cPanel? === | ||
Line 11: | Line 15: | ||
# Then using cPanel install the new theme to your Moodle theme's folder. The new theme will be installed into its own folder at /moodle/theme/[mytheme] (where [mytheme] is the name of your new theme. | # Then using cPanel install the new theme to your Moodle theme's folder. The new theme will be installed into its own folder at /moodle/theme/[mytheme] (where [mytheme] is the name of your new theme. | ||
# Ensure the new theme folder and its contents are readable by the webserver. If necessary change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme. | # Ensure the new theme folder and its contents are readable by the webserver. If necessary change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme. | ||
# Choose your new theme from within Moodle via ''Administration > Appearance > Themes > Theme selector'' | # Choose your new theme from within Moodle via ''Administration > Appearance > Themes > Theme selector'' | ||
=== Why is the new theme I uploaded not showing up in Theme Selector? === | === Why is the new theme I uploaded not showing up in Theme Selector? === | ||
# There could be a number of problems with the theme you uploaded, but one major problem reported in the Themes Forum all point to the way in which the theme is uploaded on certain servers. Using the cPanel method, as described in the | You probably forgot to do something correctly. Here are steps to create a "new" theme from an existing theme called "standard". Bold show places you must change for the theme to appear. | ||
#Copy folder theme/standard and call it theme/new | |||
#In theme/new/lang/en folder, | |||
##'''Renamed theme_standard.php to theme_new.php''' | |||
#Opened theme/new/lang/en/theme_new.php, recommend you change 2 lines to read something like: | |||
##$string['pluginname'] = 'New theme - Martin D'; | |||
##$string['choosereadme'] = 'New theme came from the Standard theme and is being changed by Martin D in 2011'; | |||
##Saved the file | |||
#In theme/new/config.php | |||
##Change '''$THEME->NAME = 'new''''; | |||
#Went to ''Administration > Site Administration > Appearance > Theme settings'' > Theme designer mode (Checked) | |||
#''Settings > Site Administration > Appearance > Theme selector'' | |||
##Clear theme caches | |||
##Select theme | |||
:''Tip:'' There could be a number of problems with the theme you uploaded, but one major problem reported in the Themes Forum all point to the way in which the theme is uploaded on certain servers. Using the cPanel method, as described in the FAQ [[Themes_FAQ#How do I install a new theme when using cPanel?|How do I install a new theme when using cPanel?]] will, in most cases, cure the problem. | |||
== How do I control what themes show up where? == | |||
You can control which themes show up in which contexts by a series of settings in ''Administration>Site Administration>Appearance>Themes>Theme settings'' | |||
===How can I restrict the available themes to users and in courses?=== | |||
In'' Administration>Site Administration>Appearance>Themes>Theme settings'', add the themes you want them to use in the Theme list. These will then restrict the theme choice lists in pull down menus the contexts (Course, Category, User) where you allow them. | |||
===What is the hierarchy of contexts for themes to override each other?=== | |||
There are five contexts in which themes appear and can be set: courses, category, session, user, and site (or Default, i.e. the site wide default theme). That is the level of priority of appearance they have as well. | |||
* You enable/disable these in [https://docs.moodle.org/en/Theme_settings Theme settings.] | |||
* It is possible to change this hierarchy in the config.php file - see [https://docs.moodle.org/en/Theme_settings#Change_default_hierarchy change default hierarchy] for how. | |||
====Hierarchy of themes==== | |||
* Course overrides Category (and below) | |||
* Category overrides Session (and below) | |||
* Session overrides User (and below) | |||
* User overrides Default | |||
* Default (site) | |||
====Note on Session Themes==== | |||
* It is important to note that Session level themes (those set with the URL parameter theme=theme_name), override the Site level theme ONLY for the user's current logged in session. When the user logs out, they will then see the Default site theme, not the Session theme. | |||
* You only have to set the theme once via the URL parameter and it will persist until the user logs out. | |||
==How do I create a custom theme?== | ==How do I create a custom theme?== | ||
See [[ | If you aren't familiar with CSS and theming, first try customising the 'More' theme within Moodle. See [[Standard themes]] | ||
Alternatively,see the developer documentation [[:dev:Theme development|Theme development]]. | |||
==Can I assign a specific theme to a course?== | ==Can I assign a specific theme to a course?== | ||
Yes. In the course settings, use the "Force theme" dropdown box. | Yes. In the course settings, use the "Force theme" dropdown box. | ||
==Is it possible to customise language strings per theme?== | |||
Not by default, as when strings are customised, they are customised for the whole site. However, it is possible to make a new language pack based on your main language and apply that pack to the course which has that theme. See this forum post for more information: https://moodle.org/mod/forum/discuss.php?d=220671 | |||
==How can I get the links in my custom menu to open in new windows?== | |||
It is possible to create your own fly out menu via the custom menu block in Administration>Site administration>Appearance>Themes>Theme settings. Copy the examples given below the box. If you want the links to open in a new window, use the following code: | |||
Moodle|http://www.moodle.org" target="_blank | |||
See also https://tracker.moodle.org/browse/MDL-35420 | |||
== Where shall I put my custom CSS code? == | == Where shall I put my custom CSS code? == | ||
Note that the contributed themes Afterburner, Arialist, Formal White, Fusion, Nonzero, Overlay, Sky High and Splash all offer the possibility to add custom CSS in their page settings via ''Settings>Appearance>Themes>''. | |||
Failing this, instead of modifying the theme's CSS files you better put your own code in a separate CSS file and make your theme aware of that file by modifying its config.php file (be sure add your own CSS file as the last one in the list so that you will override all prior settings). See this posting for [http://moodle.org/mod/forum/discuss.php?d=128599#p564055 detailed instructions]. | |||
See also the instructions on creating your own theme mentioned above. | See also the instructions on creating your own theme mentioned above. | ||
== | ==Will I lose my courses, language files, logo, etc. if I switch my theme?== | ||
Switching themes only changes the appearance of your site, not the content within it. The logo is a part of the theme and will be lost when you switch. | |||
Follow these instructions to [[:dev:Creating_a_custom_theme#Adding_a_Logo|add a logo]] to a theme. | |||
:If you upgrade your Moodle site and tweaked an existing standard theme, you will lose your changes. Thus it is a good idea to create a custom theme which will not be changed when you upgrade. | |||
==I can't access theme files on the server. Can I still add a logo to a theme?== | |||
Yes. You have three choices: | |||
**Use the Clean theme (new in 2.5) or the Afterburner theme, both of which have the File picker available for you to upload your logo. | |||
**Either upload your logo to another place publicly available online and then copy the image's URL to paste into the logo field of the theme page you are editing (such as Afterburner) | |||
**Or add the main menu block to your front page; upload the logo via Main menu>Add a resource. Get its URL and paste it into the logo field of the theme page you are editing. You can safely then hide or delete the main menu block; the logo will still be there. ''NOTE'' - your logo will appear in ''Navigation>Site pages'' as well. To prevent this, go to ''Administration>Site administration>Appearance>Navigation'' and untick the box "Show front page activities in the navigation") | |||
== | ==How can I add custom fonts to a theme?== | ||
See [[How to add custom fonts in a theme]] | |||
== Are there tools which help me creating and editing themes? == | == Are there tools which help me creating and editing themes? == | ||
Line 47: | Line 116: | ||
=== Firebug === | === Firebug === | ||
The single most useful tool is the [[ | The single most useful tool is the [[:dev:Firebug|Firebug]] add-on for the [[:dev:Firefox|Firefox]] web browser. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... And there are additional add-ons for making Firebug an even more powerful tool. | ||
==== Firebug enhancements ==== | ==== Firebug enhancements ==== | ||
You can enhance Firebug even further. See [[Firebug]] for more information. | You can enhance Firebug even further. See [[:dev:Firebug|Firebug]] for more information. | ||
=== Web Developer Toolbar === | === Web Developer Toolbar === | ||
Another great tool for any web developer is the [[Web developer extension]], another Firefox add-on. One very useful feature is the option to '''disable your browser's cache''' while working on your theme. That way you are sure you're always presented with your latest modifications and not with an older, cached version. | Another great tool for any web developer is the [[:dev:Web developer extension|Web developer extension]], another Firefox add-on. One very useful feature is the option to '''disable your browser's cache''' while working on your theme. That way you are sure you're always presented with your latest modifications and not with an older, cached version. | ||
Now also available for Google's Chrome browser: [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"] | Now also available for Google's Chrome browser: [http://www.sitepoint.com/blogs/2010/03/23/chrome-web-developer-toolbar/ "The Web Developer Toolbar Comes to Chrome"] | ||
Line 60: | Line 129: | ||
Modifications made with Firebug are lost when refreshing your page. If you want your CSS changes to be a bit more permanent, for example to try them with different pages of your Moodle installation, you can use another Firefox plugin: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. That way you can change your site's CSS with a simple mouse click without having to change Moodle code. | Modifications made with Firebug are lost when refreshing your page. If you want your CSS changes to be a bit more permanent, for example to try them with different pages of your Moodle installation, you can use another Firefox plugin: [https://addons.mozilla.org/en-US/firefox/addon/2108 Stylish]. That way you can change your site's CSS with a simple mouse click without having to change Moodle code. | ||
See [[Stylish]] for detailed instructions and examples. | See [[:dev:Stylish|Stylish]] for detailed instructions and examples. | ||
==== Stylish-Custom ==== | |||
This is an [https://addons.mozilla.org/en-US/firefox/addon/12105/ custom additions] to the Stylish extension which brings back features from 0.5.9 and adds new features. | |||
== How do I check for cross-browser compatibility? == | == How do I check for cross-browser compatibility? == | ||
There are some tools (standalone and online) which can show you how your site looks in different browsers. See this [http://moodle.org/mod/forum/discuss.php?d=127746 forum discussion] for details. | There are some tools (standalone and online) which can show you how your site looks in different browsers. See this [http://moodle.org/mod/forum/discuss.php?d=127746 forum discussion] for details. See the new device detection settings in [[Theme settings]] which will allow you to create a theme for those "special" browsers. | ||
==How are the device types used in Moodle?== | |||
If "Enabled device detection" has been turned on, Moodle will automatically use the theme which has been set for the device in the [[Standard themes|Theme selector]] settings page. It is also possible to add additional types to the Theme selector page by using the "device detection regular expressions" fields. | |||
Site administrators can find these enable device detection settings in Site administration > Appearance >Themes > [[Theme settings]] . | |||
== Concrete examples for modifying Moodle themes == | == Concrete examples for modifying Moodle themes == | ||
Line 77: | Line 154: | ||
==== Colors ==== | ==== Colors ==== | ||
* [[Forcing the colour of the chat discussion pane (pop-up mode)]] | * [[:dev:Forcing the colour of the chat discussion pane (pop-up mode)]] | ||
* [http://moodle.org/mod/forum/discuss.php?d=142765 Changing background colour of a topic box] | * [http://moodle.org/mod/forum/discuss.php?d=142765 Changing background colour of a topic box] | ||
* [http://moodle.org/mod/forum/discuss.php?d=152357 How to change the colour of the popup event's header and background] | * [http://moodle.org/mod/forum/discuss.php?d=152357 How to change the colour of the popup event's header and background] | ||
==== Logo and icons ==== | ==== Logo and icons ==== | ||
* [[Alternate Icon Set|Using an alternate icon set in Moodle]] | * [[:dev:Alternate Icon Set|Using an alternate icon set in Moodle]] | ||
* [[Favicon|Change the favicon that shows in front of the web address]] | * [[Favicon|Change the favicon that shows in front of the web address]] | ||
* [[Footer replacement|Replace the logo in the footer with your web address and/or or own logo]] | * [[Footer replacement|Replace the logo in the footer with your web address and/or or own logo]] | ||
*[[Header logo|Replace the logo in the header]] | *[[:dev:Header logo|Replace the logo in the header]] | ||
==== Layout ==== | ==== Layout ==== | ||
Line 94: | Line 171: | ||
=== Adding things === | === Adding things === | ||
* [http://moodle.org/mod/forum/discuss.php?d=157935 How to add a different img-bullet to each category?] | * [http://moodle.org/mod/forum/discuss.php?d=157935 How to add a different img-bullet to each category?] | ||
=== Hiding things === | === Hiding things === | ||
* Hiding an element with CSS is generally achieved using the [http://reference.sitepoint.com/css/display display: none;] property on the element. | * Hiding an element with CSS is generally achieved using the [http://reference.sitepoint.com/css/display display: none;] property on the element. | ||
* See [[Print style]] and [[Stylish#Print style for Database records]] for an example how to hide parts of a page not meant for printing. | * See [[:dev:Print style]] and [[:dev:Stylish#Print style for Database records]] for an example how to hide parts of a page not meant for printing. | ||
=== Moving things === | === Moving things === | ||
* [[Center Forum Posts|Centre smaller forum posts on the page]] | * [[:dev:Center Forum Posts|Centre smaller forum posts on the page]] | ||
* [[Footer positioning|Positioning the page footer]] | * [[:dev:Footer positioning|Positioning the page footer]] | ||
* [[Left-align quiz|Left align quiz questions and answers]] | * [[:dev:Left-align quiz|Left align quiz questions and answers]] | ||
* [http://moodle.org/mod/forum/discuss.php?d=121847 Indentation for nested categories] | * [http://moodle.org/mod/forum/discuss.php?d=121847 Indentation for nested categories] | ||
* [http://moodle.org/mod/forum/discuss.php?d=128599 Positioning login and choose language field] | * [http://moodle.org/mod/forum/discuss.php?d=128599 Positioning login and choose language field] | ||
* [http://moodle.org/mod/forum/discuss.php?d=145179 Match question type - position answers nearer to the questions] | * [http://moodle.org/mod/forum/discuss.php?d=145179 Match question type - position answers nearer to the questions] | ||
* [[:dev:Stylish#Fixed admin menue with CSS]] | |||
=== Miscellaneous === | === Miscellaneous === | ||
* [[Fixed-width theme|Creating a fixed-width theme | * [[:dev:Fixed-width theme|Creating a fixed-width theme]] | ||
* [http://moodle.org/mod/forum/discuss.php?d=146763 Is there a way to fix oversized HTML Editor using CSS?] | * [http://moodle.org/mod/forum/discuss.php?d=146763 Is there a way to fix oversized HTML Editor using CSS?] | ||
* [[:dev:Category Design|Modifying the design of specific categories with CSS]] | |||
==How can I see theme changes when using the Windows Complete Installer package== | ==How can I see theme changes when using the Windows Complete Installer package== | ||
Line 124: | Line 201: | ||
Restart the Moodle server using the "stop moodle" and then the "start moodle" programs in your server folder. You should now find that all of your changes to your CSS are reflected as soon as you save the file and refresh your browser cache (usually you can refresh your cache by pressing F5). This FAQ from a discussion at [http://moodle.org/mod/forum/discuss.php?d=151562#p663950 Deactivating caching with XAMPP installations] | Restart the Moodle server using the "stop moodle" and then the "start moodle" programs in your server folder. You should now find that all of your changes to your CSS are reflected as soon as you save the file and refresh your browser cache (usually you can refresh your cache by pressing F5). This FAQ from a discussion at [http://moodle.org/mod/forum/discuss.php?d=151562#p663950 Deactivating caching with XAMPP installations] | ||
==How can I have a custom menu for different roles, eg student or teacher?== | |||
While it is not possible to show a different menu to different roles (because they tend to be assigned course-wide not site-wide), it is possible to have a different menu for different users. See this [https://moodle.org/mod/forum/discuss.php?d=149803#p1131386 forum post on custom menus] | |||
== See also == | == See also == | ||
* Using Moodle [http://moodle.org/mod/forum/view.php?f=29 Themes forum] | * Using Moodle [http://moodle.org/mod/forum/view.php?f=29 Themes forum] | ||
* [[CSS FAQ]] | * [[:dev:CSS FAQ]] | ||
* [http://learn.open.ac.uk/mod/oublog/view.php?user=155976 "Understanding Moodle Themes"] - Blog post by [http://moodle.org/user/view.php?id=78896&course=5 Christopher Douce] (Open University) | * [http://learn.open.ac.uk/mod/oublog/view.php?user=155976 "Understanding Moodle Themes"] - Blog post by [http://moodle.org/user/view.php?id=78896&course=5 Christopher Douce] (Open University) | ||
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=149534 Testing 2.0. Use for modern vs old browsers] forum discussion | * Using Moodle [http://moodle.org/mod/forum/discuss.php?d=149534 Testing 2.0. Use for modern vs old browsers] forum discussion | ||
* [[Allow theme change by URL]] | |||
[[Category:FAQ]] | |||
[[de:Designs_FAQ]] | [[de:Designs_FAQ]] | ||
[[es:Temas FAQ]] |
Latest revision as of 14:31, 22 September 2015
Where can I find more Moodle themes?
As well as standard themes, which you will find in your Moodle installation, there are many FREE themes available for download from Moodle plugins directory - Category:Themes. Don't forget to choose the correct version of a theme for the version of Moodle you are currently using.
How do I install a new theme?
- Unzip the .zip file to an empty local directory.
- Upload folder to your web server to the /moodle/theme/[Theme Name]. (Replace [Theme Name] with the name of the theme you have downloaded.) Ensure the new theme folder and its contents are readable by the webserver. Change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme.
- Choose your new theme from within Moodle via Administration > Appearance > Themes > Theme selector.
How do I install a new theme when using cPanel?
- Upload your new theme .zip file to your web server via cPanel.
- Then using cPanel install the new theme to your Moodle theme's folder. The new theme will be installed into its own folder at /moodle/theme/[mytheme] (where [mytheme] is the name of your new theme.
- Ensure the new theme folder and its contents are readable by the webserver. If necessary change Read and Write permissions (CHMOD) for the files and folder to 755 - Owner read/write/execute, Group read/execute, Everyone read/execute. Incorrect permissions may prevent display of the newly installed theme.
- Choose your new theme from within Moodle via Administration > Appearance > Themes > Theme selector
Why is the new theme I uploaded not showing up in Theme Selector?
You probably forgot to do something correctly. Here are steps to create a "new" theme from an existing theme called "standard". Bold show places you must change for the theme to appear.
- Copy folder theme/standard and call it theme/new
- In theme/new/lang/en folder,
- Renamed theme_standard.php to theme_new.php
- Opened theme/new/lang/en/theme_new.php, recommend you change 2 lines to read something like:
- $string['pluginname'] = 'New theme - Martin D';
- $string['choosereadme'] = 'New theme came from the Standard theme and is being changed by Martin D in 2011';
- Saved the file
- In theme/new/config.php
- Change $THEME->NAME = 'new';
- Went to Administration > Site Administration > Appearance > Theme settings > Theme designer mode (Checked)
- Settings > Site Administration > Appearance > Theme selector
- Clear theme caches
- Select theme
- Tip: There could be a number of problems with the theme you uploaded, but one major problem reported in the Themes Forum all point to the way in which the theme is uploaded on certain servers. Using the cPanel method, as described in the FAQ How do I install a new theme when using cPanel? will, in most cases, cure the problem.
How do I control what themes show up where?
You can control which themes show up in which contexts by a series of settings in Administration>Site Administration>Appearance>Themes>Theme settings
How can I restrict the available themes to users and in courses?
In Administration>Site Administration>Appearance>Themes>Theme settings, add the themes you want them to use in the Theme list. These will then restrict the theme choice lists in pull down menus the contexts (Course, Category, User) where you allow them.
What is the hierarchy of contexts for themes to override each other?
There are five contexts in which themes appear and can be set: courses, category, session, user, and site (or Default, i.e. the site wide default theme). That is the level of priority of appearance they have as well.
- You enable/disable these in Theme settings.
- It is possible to change this hierarchy in the config.php file - see change default hierarchy for how.
Hierarchy of themes
- Course overrides Category (and below)
- Category overrides Session (and below)
- Session overrides User (and below)
- User overrides Default
- Default (site)
Note on Session Themes
- It is important to note that Session level themes (those set with the URL parameter theme=theme_name), override the Site level theme ONLY for the user's current logged in session. When the user logs out, they will then see the Default site theme, not the Session theme.
- You only have to set the theme once via the URL parameter and it will persist until the user logs out.
How do I create a custom theme?
If you aren't familiar with CSS and theming, first try customising the 'More' theme within Moodle. See Standard themes
Alternatively,see the developer documentation Theme development.
Can I assign a specific theme to a course?
Yes. In the course settings, use the "Force theme" dropdown box.
Is it possible to customise language strings per theme?
Not by default, as when strings are customised, they are customised for the whole site. However, it is possible to make a new language pack based on your main language and apply that pack to the course which has that theme. See this forum post for more information: https://moodle.org/mod/forum/discuss.php?d=220671
It is possible to create your own fly out menu via the custom menu block in Administration>Site administration>Appearance>Themes>Theme settings. Copy the examples given below the box. If you want the links to open in a new window, use the following code:
Moodle|http://www.moodle.org" target="_blank
See also https://tracker.moodle.org/browse/MDL-35420
Where shall I put my custom CSS code?
Note that the contributed themes Afterburner, Arialist, Formal White, Fusion, Nonzero, Overlay, Sky High and Splash all offer the possibility to add custom CSS in their page settings via Settings>Appearance>Themes>.
Failing this, instead of modifying the theme's CSS files you better put your own code in a separate CSS file and make your theme aware of that file by modifying its config.php file (be sure add your own CSS file as the last one in the list so that you will override all prior settings). See this posting for detailed instructions.
See also the instructions on creating your own theme mentioned above.
Will I lose my courses, language files, logo, etc. if I switch my theme?
Switching themes only changes the appearance of your site, not the content within it. The logo is a part of the theme and will be lost when you switch.
Follow these instructions to add a logo to a theme.
- If you upgrade your Moodle site and tweaked an existing standard theme, you will lose your changes. Thus it is a good idea to create a custom theme which will not be changed when you upgrade.
I can't access theme files on the server. Can I still add a logo to a theme?
Yes. You have three choices:
- Use the Clean theme (new in 2.5) or the Afterburner theme, both of which have the File picker available for you to upload your logo.
- Either upload your logo to another place publicly available online and then copy the image's URL to paste into the logo field of the theme page you are editing (such as Afterburner)
- Or add the main menu block to your front page; upload the logo via Main menu>Add a resource. Get its URL and paste it into the logo field of the theme page you are editing. You can safely then hide or delete the main menu block; the logo will still be there. NOTE - your logo will appear in Navigation>Site pages as well. To prevent this, go to Administration>Site administration>Appearance>Navigation and untick the box "Show front page activities in the navigation")
How can I add custom fonts to a theme?
See How to add custom fonts in a theme
Are there tools which help me creating and editing themes?
Clear Cache Button
This useful Firefox add-on let's you add a button to your tool bar for easily clearing your cache while working on your theme: https://addons.mozilla.org/de/firefox/addon/1801
Please note that the following tools are only for development. They only change the way you see your Moodle site, not the Moodle site itself. Any changes you make using these tools will not be visible to anyone else who uses your site. For this you will have to make those changes permanent by changing your theme's CSS files for example.
Firebug
The single most useful tool is the Firebug add-on for the Firefox web browser. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page... And there are additional add-ons for making Firebug an even more powerful tool.
Firebug enhancements
You can enhance Firebug even further. See Firebug for more information.
Web Developer Toolbar
Another great tool for any web developer is the Web developer extension, another Firefox add-on. One very useful feature is the option to disable your browser's cache while working on your theme. That way you are sure you're always presented with your latest modifications and not with an older, cached version.
Now also available for Google's Chrome browser: "The Web Developer Toolbar Comes to Chrome"
Stylish
Modifications made with Firebug are lost when refreshing your page. If you want your CSS changes to be a bit more permanent, for example to try them with different pages of your Moodle installation, you can use another Firefox plugin: Stylish. That way you can change your site's CSS with a simple mouse click without having to change Moodle code.
See Stylish for detailed instructions and examples.
Stylish-Custom
This is an custom additions to the Stylish extension which brings back features from 0.5.9 and adds new features.
How do I check for cross-browser compatibility?
There are some tools (standalone and online) which can show you how your site looks in different browsers. See this forum discussion for details. See the new device detection settings in Theme settings which will allow you to create a theme for those "special" browsers.
How are the device types used in Moodle?
If "Enabled device detection" has been turned on, Moodle will automatically use the theme which has been set for the device in the Theme selector settings page. It is also possible to add additional types to the Theme selector page by using the "device detection regular expressions" fields.
Site administrators can find these enable device detection settings in Site administration > Appearance >Themes > Theme settings .
Concrete examples for modifying Moodle themes
The following examples were taken from the former Theme Scrapbook:
"The Moodle Theme Scrapbook is a collection of small how-to descriptions. You theme designers and Moodle users working with themes add your knowledge here to help new Moodle users with tips and tricks for their theme work.
Feel free to add to this list! Don't know how? Read our Guidelines for contributors."
Changing things
Colors
- dev:Forcing the colour of the chat discussion pane (pop-up mode)
- Changing background colour of a topic box
- How to change the colour of the popup event's header and background
Logo and icons
- Using an alternate icon set in Moodle
- Change the favicon that shows in front of the web address
- Replace the logo in the footer with your web address and/or or own logo
- Replace the logo in the header
Layout
- Overriding the $menu / $button variables using PHP regular expressions in header.html
- Changing the view of course categories - work in progress
- Sub categories and courses layout - work in progress
- Tracker 'components' list too small
Adding things
Hiding things
- Hiding an element with CSS is generally achieved using the display: none; property on the element.
- See dev:Print style and dev:Stylish#Print style for Database records for an example how to hide parts of a page not meant for printing.
Moving things
- Centre smaller forum posts on the page
- Positioning the page footer
- Left align quiz questions and answers
- Indentation for nested categories
- Positioning login and choose language field
- Match question type - position answers nearer to the questions
- dev:Stylish#Fixed admin menue with CSS
Miscellaneous
- Creating a fixed-width theme
- Is there a way to fix oversized HTML Editor using CSS?
- Modifying the design of specific categories with CSS
How can I see theme changes when using the Windows Complete Installer package
In the Windows Complete Installer package, the eAccelerator in the XAMPP install can cause some issues with changes to your theme's CSS and HTML files from showing.
Open the php.ini file inside of the server\php folder from your install in notepad and search for "eAccelerator" you should see a line that reads:
extension=eaccelerator.dll
Insert a semi-colon (turns the line into a comment) at the start of this line so it now reads:
;extension=eaccelerator.dll
Restart the Moodle server using the "stop moodle" and then the "start moodle" programs in your server folder. You should now find that all of your changes to your CSS are reflected as soon as you save the file and refresh your browser cache (usually you can refresh your cache by pressing F5). This FAQ from a discussion at Deactivating caching with XAMPP installations
While it is not possible to show a different menu to different roles (because they tend to be assigned course-wide not site-wide), it is possible to have a different menu for different users. See this forum post on custom menus
See also
- Using Moodle Themes forum
- dev:CSS FAQ
- "Understanding Moodle Themes" - Blog post by Christopher Douce (Open University)
- Using Moodle Testing 2.0. Use for modern vs old browsers forum discussion
- Allow theme change by URL