Installing a new theme: Difference between revisions

Revision as of 11:22, 18 September 2011

A site administrator who has access to the Moodle code can easily install a new theme Moodle theme. Once installed, the theme will be available via the appropriate site, category, course or activity menu.

Steps to install a new theme in the code

In this example, we will install a new theme that has been made by someone else.

Download the zip file of the theme

Select the theme
Extract to its own named folder
Using your FTP program, upload this folder to the /theme folder of your Moodle installation

Upload the unzipped file
Go to Site administration > Notifications to see if the new theme requires any decisions or updating of Moodle code.

Now you or others can select the new theme.

Steps to change the theme

In this example, we will change our site theme to a new one that we added. Your role will require the permissions to allow you to change themes. Remember that themes can be changed in many contexts in Moodle.

You may select different themes depending upon the device that will be viewing Moodle. For example, you might have one theme for computers with monitors and another for mobile phones and another for tablets.

Go to the Settings block
Open Site administration > Appearance > Themes > Theme Selector link

Open the Appearance > Theme selector page
Click on "Clear theme caches" button

Click the Clear theme caches button
Click on the "Select theme" button on the right of the current theme being used for the device

Click the Clear theme caches button
Scroll down to find the theme you wish to use
Click the "Use theme" button next to that theme

Click the Use theme button
Moodle will tell you it has been saved as the default theme[Image:instheme11.png|thumb|400px|center|Checking if the theme is the one selected]]
Check your Moodle site by going to the Moodle site's home page.
You may have to refresh your browser to see the new theme.

@@ Line 1: / Line 1: @@
 {{Themes}}
-== Change Moodle Theme ==
+A site administrator who has access to the Moodle code can easily install a new theme Moodle theme.  Once installed, the theme will be available via the appropriate site, category, course or activity menu.
-You can easily change the moodle theme.  Here we will install a new theme that has been made by someone else.
-Steps are
+==Steps to install a new theme in the code==
+In this example, we will install a new theme that has been made by someone else.
-) Download the zip file of the theme
+# Download the zip file of the theme [[Image:instheme01.png|thumb|400px|center|Select the theme]]
-[[Image:instheme01.png|thumb|400px|center|Select the theme]]
+# Extract to its own named folder [[Image:instheme01a.png|center|Select the theme]]
+# Using your FTP program, upload this folder to the /theme folder of your Moodle installation [[Image:instheme04.png|thumb|400px|center|Upload the unzipped file]]
+# Go to Site administration > Notifications to see if the new theme requires any decisions or updating of Moodle code.
-) Extract to its own named folder
+Now you or others can select the new theme.
-[[Image:instheme01a.png|center|Select the theme]]
-) Using your FTP program, upload this folder to the /theme folder of your Moodle installation
+==Steps to change the theme==
-[[Image:instheme04.png|thumb|400px|center|Upload the unzipped file]]
+In this example, we will change our site theme to a new one that we added.  Your [[Roles|role]] will require the permissions to allow you to change themes.  Remember that themes can be changed in many [[Context|contexts]] in Moodle.
-) Go to your site administration block
+You may select different themes depending upon the device that will be viewing Moodle.  For example, you might have one theme for computers with monitors and another for mobile phones and another for tablets.
-) You will have to have administrative rights as the user
+# Go to the Settings block
+# Open Site administration > Appearance > Themes > Theme Selector link [[Image:instheme07.png|thumb|400px|center|Open the Appearance > Theme selector page]]
-) Open Administration > Appearance > Theme > Theme Selector link
+# Click on "Clear theme caches" button [[Image:instheme08.png|thumb|400px|center|Click the Clear theme caches button]]
-[[Image:instheme07.png|thumb|400px|center|Open the Appearance > Theme selector page]]
+# Click on the "Select theme" button on the right of the current theme being used for the device[[Image:instheme09.png|thumb|400px|center|Click the Clear theme caches button]]
+# Scroll down to find the theme you wish to use
-) Click on Clear the Theme caches button
+# Click the "Use theme" button next to that theme[[Image:instheme10.png|thumb|400px|center|Click the Use theme button]]
-[[Image:instheme08.png|thumb|400px|center|Click the Clear theme caches button]]
+# Moodle will tell you it has been saved as the default theme[Image:instheme11.png|thumb|400px|center|Checking if the theme is the one selected]]
+# Check your Moodle site by going to the Moodle site's home page.
-) Click on the Select theme button on the right of the current theme preview.
+# You may have to refresh your browser to see the new theme.
-[[Image:instheme09.png|thumb|400px|center|Click the Clear theme caches button]]
-) Scroll down to select your theme and when a choice is made, click the Use theme button
-[[Image:instheme10.png|thumb|400px|center|Click the Use theme button]]
-) Check your Moodle site (e.g. yourdomain.com) by going to the site home page!
-[[Image:instheme11.png|thumb|400px|center|Checking if the theme is the one selected]]
 [[de:Ein_neues_Design_installieren]]

Documentation

Installing a new theme: Difference between revisions

Revision as of 11:22, 18 September 2011

Steps to install a new theme in the code

Steps to change the theme