Custom theme for a category

Custom theme for a category

by Pieterjan Heyse -
Number of replies: 6
Is it possible to show categories in moodle in their own theme's? Just like you can define a theme for one course.

The reason for this is that we are using our moodle install with 6 schools. We have created one catergory for each school and 1 category for all the common courses. We would like to have own themes for each school. Has anyone got a solution for this theme-wise?
Average of ratings: -
In reply to Pieterjan Heyse

Re: Custom theme for a category

by Urs Hunkler -
Picture of Core developers

Pieterjan, Moodle does not offer category specific themes.

Did you consider setting the course theme for all courses of for example school A to the theme A?

Another possibility is to offer all teachers and pupils of school A theme A and tell them not to change it. Hmm could this scenario work?

One interesting question - how will you handle the start page? It is for all schools the same.

I hope I could help you on Urs

In reply to Urs Hunkler

Re: Custom theme for a category

by Pieterjan Heyse -
Urs,
I do not want to set all these theme manually for all courses, and most important, I specifically want he categories to show a different layout, because I will link different URL's to the category pages. This way I simulate different homepages for each school, eliminating the need to logout when pupils want to cross the (digital) school borders and visit another schools moodle category.

There will be a start page (category) for each school and one for the entire school community.

Right now I am running 6 parallel moodle installs. This works nice, but is tedious for an administrator (doing 6x the same thing ...), and people who want to visit the communities moodle install need to relogin when they are logged in in their own moodle. Thats too much work, so by merging everything I want to avoid this.
In reply to Pieterjan Heyse

Re: Custom theme for a category

by Martín Langhoff -
In the upcoming 1.6 there's an additional div across the page that has a per-top-level category theme. With the appropriate CSS-fu you can change the theme completely.

Good things come to those who... wait wink
In reply to Martín Langhoff

Re: Custom theme for a category

by Urs Hunkler -
Picture of Core developers

Martin, very interesting. Can you please explain a bit more in detail how this category theme will integrate into the Moodle theme system and in what order it will overwrite other settings.

At what place will this theme be saved and who will be able to change it?

Thanks
Urs

In reply to Urs Hunkler

Re: Custom theme for a category

by Martín Langhoff -
Hi Urs!

It's been a while so I may be a bit hazy with the details. Just after body, Moodle 1.5.x has a DIV that names the page type, and you can use in your CSS files to modify/override how classes work. We just added an additional DIV just outside of it, that says "category-categoryname" where categoryname is a lowercased, space-stripped version of the category name.

Does it make sense? I don't have any url handy right now... sorry.
In reply to Martín Langhoff

Re: Custom theme for a category

by Urs Hunkler -
Picture of Core developers

Hi Martin, this makes a lot of sense wink

I was thinking about a way to use group specific theme variations for some time now. You brought me on the way with your information about the surrounding DIV.

These category specific variations can be integrated the same way. The solution needs two parts.

  1. A CLASS with the category number for the outermost DIV (I use the existing 'page')
  2. CSS to style the pages different according to the CLASS name = category number

You offer different styles in your CSS files which all start with a CLASS like 'category-1', 'category-2' etc. When the page changes the browser finds the different CLASSes and will render the pages according to the different CSS. This same technique is used for the Moodle body ID and CLASSes.

The DIV 'page' is opened in the header and closed in the footer. So I can work with it without changing the source code. The CLASS is calculated by the following PHP script. I placed it before the 'head' part in 'header.html'. It reads the category 'id' and combines it with 'category-' to give a clear naming.

global $resourceinstance, $category;
   // used in resource module rather than $course.

if (!isset($course) && isset($resourceinstance)) {
    $course = $resourceinstance->course;
}

$catclass = 'category-none';
if (isset($course->category)) {
    $catclass = 'category-' . $course->category;
} else if (isset($category->id)) {
    $catclass = 'category-' . $category->id;
}

$pageclass = ' class="' . $groupclass . '"';

The '$pageclass' is then added as CLASS to DIV 'page'.

<div id="page" <?php echo $pageclass ?>>

To test the category specific styling I added the following CSS.

.category-1 #header {
  background-color:#F0D0D0;
}
.category-2 #header {
  background-color:#CFC;
}
.category-3 #header {
  background-color:#C1E1FF;
}

I did some short test which went well. Because I am no programmer perhaps you can look at it if you see any obvious mistakes Martin.

Pieterjan, If you try the code please give some feedback here.
Urs