Note: You are currently viewing documentation for Moodle 1.9. Up-to-date documentation for the latest stable version is available here: Themes FAQ.

Themes FAQ: Difference between revisions

From MoodleDocs
m (Added link to spanish translation of page)
 
(48 intermediate revisions by 6 users not shown)
Line 5: Line 5:
# 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''  (or ''Administration > Configuration > Themes'' in versions of Moodle prior to 1.7).
# Choose your new theme from within Moodle via ''Administration > Appearance > Themes > Theme selector''  (or ''Administration > Configuration > Themes'' in versions of Moodle prior to 1.7).
=== 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''  (or ''Administration > Configuration > Themes'' in versions of Moodle prior to 1.7).
=== 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 previous section 1.1 [[Themes_FAQ#How do I install a new theme when using cPanel?]] (see above) will, in most cases, cure the problem.


==How do I create a custom theme?==
==How do I create a custom theme?==
Line 16: Line 27:
== Where shall I put my custom CSS code? ==
== Where shall I put my custom CSS code? ==


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. 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.
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.


==How can I get the New Moodle2 theme for my site?==
==How can I get the New Moodle2 theme for my site?==
Not til Moodle 2.x comes out and it will be a "sort of".  The new look (refered to as "Moodle2") for Moodle.org was made public just before the close of 2008. The Moodle2 look has various things hard coded into its fabric.  The good news is that many pieces of the look are available.
Not till Moodle 2.x comes out and it will be a "sort of".  The new look (refered to as "Moodle2") for Moodle.org was made public just before the close of 2008. The Moodle2 look has various things hard coded into its fabric.  The good news is that many pieces of the look are available.
: See [[Development:Themes 2.0]] for anything related to themes in Moodle 2.0.


==Will I lose my courses, language files, logo, etc. if I switch my theme?==
==Will I lose my courses, language files, logo, etc. if I switch my theme?==
Line 35: Line 49:
=== Firebug ===
=== Firebug ===
The single most useful tool is the [[Development:Firebug|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.
The single most useful tool is the [[Development:Firebug|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 ===
=== 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 [[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"]


=== Stylish ===
=== Stylish ===
Line 43: Line 62:


See [[Stylish]] for detailed instructions and examples.
See [[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? ==
Line 48: Line 70:


== Concrete examples for modifying Moodle themes ==
== Concrete examples for modifying Moodle themes ==
The following examples were taken from the former ''Theme Scrapbook''.
<p class="note">
 
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.  
<br />
 
"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 [[MoodleDocs:Guidelines_for_contributors|Guidelines for contributors]].
<br />
Feel free to add to this list! Don't know how? Read our [[MoodleDocs:Guidelines_for_contributors|Guidelines for contributors]]."
</p>


=== Changing things ===
=== Changing things ===
Line 58: Line 82:
==== Colors ====
==== Colors ====
* [[Forcing the colour of the chat discussion pane (pop-up mode)]]
* [[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=152357 How to change the colour of the popup event's header and background]


==== Logo and icons ====
==== Logo and icons ====
Line 63: Line 89:
* [[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]]
==== Layout ====
* [http://moodle.org/mod/forum/discuss.php?d=136546 Overriding the $menu / $button variables] using PHP regular expressions in header.html
* [http://moodle.org/mod/forum/discuss.php?d=143411 Changing the view of course categories] - work in progress
* [http://moodle.org/mod/forum/discuss.php?d=145077 Sub categories and courses layout] - work in progress
* [http://moodle.org/mod/forum/discuss.php?d=151370 Tracker 'components' list too small]


=== Adding things ===
=== Adding things ===
* [[Header logo|Adding a logo to the theme header]]
* [[Header logo|Adding a logo to the theme header]]
* [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 ''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.


=== Moving things ===
=== Moving things ===
Line 76: Line 111:
* [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]
* [[Stylish#Fixed admin menue with CSS]]


=== Miscellaneous ===
=== Miscellaneous ===
* [[Fixed-width theme|Creating a fixed-width theme]]
* [[Fixed-width theme|Creating a fixed-width theme]]
* [[Homepage design|Homepage design of moodle.org]]
* [[Homepage design|Homepage design of moodle.org]]
* [http://moodle.org/mod/forum/discuss.php?d=136546 Overriding the $menu / $button variables]
* [http://moodle.org/mod/forum/discuss.php?d=146763 Is there a way to fix oversized HTML Editor using CSS?]
* [[Category Design|Modifying the design of specific categories with CSS]]
 
==How can I see theme changes when using the Windows Complete Installer package==
In the [http://download.moodle.org/windows/ 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 [http://moodle.org/mod/forum/discuss.php?d=151562#p663950 Deactivating caching with XAMPP installations]
 
==What is new in themes in Moodle 2.0?==
 
A lot! See [[Development:Themes 2.0]].


== See also ==
== See also ==
Line 86: Line 139:
* 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]]
* [[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)
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=149534 Testing 2.0. Use for modern vs old browsers] forum discussion


[[Category:FAQ]]
[[Category:FAQ]]
[[de:Designs_FAQ]]
[[de:Designs_FAQ]]
[[es:Temas FAQ]]

Latest revision as of 14:31, 22 September 2015


How do I install a new theme?

  1. Unzip the .zip file to an empty local directory.
  2. 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.
  3. Choose your new theme from within Moodle via Administration > Appearance > Themes > Theme selector (or Administration > Configuration > Themes in versions of Moodle prior to 1.7).

How do I install a new theme when using cPanel?

  1. Upload your new theme .zip file to your web server via cPanel.
  2. 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.
  3. 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.
  4. Choose your new theme from within Moodle via Administration > Appearance > Themes > Theme selector (or Administration > Configuration > Themes in versions of Moodle prior to 1.7).

Why is the new theme I uploaded not showing up in Theme Selector?

  1. 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 previous section 1.1 Themes_FAQ#How do I install a new theme when using cPanel? (see above) will, in most cases, cure the problem.

How do I create a custom theme?

See Creating a custom theme and/or Make your own theme.

Can I assign a specific theme to a course?

Yes. In the course settings, use the "Force theme" dropdown box.

Where shall I put my custom CSS code?

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.

How can I get the New Moodle2 theme for my site?

Not till Moodle 2.x comes out and it will be a "sort of". The new look (refered to as "Moodle2") for Moodle.org was made public just before the close of 2008. The Moodle2 look has various things hard coded into its fabric. The good news is that many pieces of the look are available.

See Development:Themes 2.0 for anything related to themes in Moodle 2.0.

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.

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.

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

Logo and icons

Layout

Adding things

Hiding things

Moving things

Miscellaneous

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

What is new in themes in Moodle 2.0?

A lot! See Development:Themes 2.0.

See also