Modifying Theme in Course Appearance

Re: Modifying Theme in Course Appearance

by Mary Evans -
Number of replies: 0
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Wesley,

If you go to Administration > Site Administration > Appearance > Themes > Theme settings you will find a setting that allows you to set Allow theme changes in the URL

This setting will then allow you to add a theme name in the URL for the course page you want to see in a particular theme, or course in a particular colour scheme.

You can actually have the same theme for different courses by adding CSS that uses, what we term as 'body classes', which are CSS selectors that relates to the page, be it the layout type, or category or course.

So for course-1 you could set all the links to red, in course-2 all the links in blue, and in course-3 all the links in green. You could make the logo in the hearer change in this way too by setting different logos for different courses. You could have different background colours...in fact the list is endless with the changes you can do using CSS.

To see these body classes in the FireFox browser,  just RIGHT click on the page with your mouse and select 'View page source'. Then search the top of the page until you find the body tag <body id="page-site-index classes="... ... ...  ">

The body classes in the page I am now is as follows...

<body id="page-mod-forum-post" class="format-topics path-mod path-mod-forum gecko dir-ltr lang-en yui-skin-sam yui3-skin-sam moodle-org pagelayout-incourse course-5 context-115 cmid-46 category-3 two-column has-region-side-post used-region-side-post jsenabled dndsupported" aria-hidden="false">

See the body class 'course-5' well that is the body class for this forum in Moodle.

These will be similar to what you see in your site pages for your courses...the courses you want to change.

There is nothing stopping you experimenting with CSS if you uses the Clean theme to test with and set your main site to use the More theme, and have the Theme setting to Allow theme changes in the URL you could add some CSS in Clean theme Custom CSS settings page for that theme something like ...

.course-1 .block .header h2 { color: #abc;}

.course-2 .block .header h2 { color: #890;}

.course-3 .block .header h2 {color: #036;}

And visit those course pages that you style for (where I have used 1, 2, and 3 you need to add your own course number that you see in the body tag for that particular course).then by adding &theme=clean after the course page URL ...

for example:

http://demo.moodle.net/course/view.php?id=2&theme=clean

You will see the headers of all the block headers on that page with the colour you have set for course-2 in the CSS. The beauty of this is that only you will see it.

Hope this helps?

Mary