There are significant changes in course-related functions and UI in 2.5. This document is aimed to assist migration from 2.4 to 2.5. This is NOT a complete documentation on 2.5 features.
Theme developers
All course listings are now performed through the same renderer functions.
There are significant changes to CSS classes used
Pages that are affected by the new renderer functions
To test your theme make sure that your site has several course categories with courses. Also some courses have summaries. Some courses should have enrollment methods other than manual (i.e. self enrollment). Some courses should have enrolled users with roles listed in $CFG->coursecontact. See screenshots attached to MDL-37009
Pages and responsible renderer functions:
- Courses lists on frontpage (see $CFG->frontpage, $CFG->frontpageloggedin) - core_course_renderer::courses_list_frontpage()
- List of courses where user is enrolled (please note, this is no longer recommended setting, use 'my' page instead!)
- List of all available courses
- Categories list ($CFG->maxcategorydepth will affect how many subcategories levels to display)
- Combo list ($CFG->maxcategorydepth will affect how many subcategories levels to display)
- View courses (/course/index.php, /course/category.php) - core_course_renderer::course_category()
- Category is empty
- Category has only subcategories
- Category has only subcategories and there are more than $CFG->coursesperpage of them
- Category has only courses and there are less courses than $CFG->courseswithsummarieslimit
- Category has only courses and there are more than $CFG->courseswithsummarieslimit but less than $CFG->coursesperpage
- Category has only courses and there are more than $CFG->coursesperpage
- Category has both courses and categories and at least one of the lists is bigger than $CFG->coursesperpage (make sure to click "more" link for both courses and categories list).
- Search courses - core_course_renderer::search_courses()
- No courses found
- Less than $CFG->coursesperpage courses found
- More than $CFG->coursesperpage courses found
- Courses with tag - core_course_renderer::tagged_courses()
- Enable tag functionality, tag some courses with the same tag, add Tags block, click on tag name, the list of tagged courses is displayed (this is very similar to search results)
- Course information (.course-info-box) - core_course_renderer::course_info_box()
- If course has self enrollment, when student clicks on course name he is redirected to /enrol/index.php
- In collapsed courses listing there is an "i" icon next to the course name, click on it, /course/info.php is opened
Hint. To change $CFG->xxx type xxx in the search box in Administration block.
New renderer functions
One course: core_course_renderer::coursecat_coursebox()
How to use
|
What you get (HTML/CSS)
|
This function is used to render courses lists, print course information and/or display courses and categories trees in many places.
To print information about one course on php page:
$renderer = $PAGE->get_renderer('core', 'course');
echo $renderer->course_info_box($course);
Function course_info_box() also existed in Moodle 2.4.
Remember that function print_course() is deprecated in 2.5.
|
div.coursebox
div.info
h3.name
a[.dimmed]
div.enrolmenticons
div.moreinfo /* empty, may be populated with JS */
div.content
div.summary
ul.teachers
li
div.coursecat
a[.dimmed]
or
div.coursebox.collapsed
div.info
div.name /* Note that it is not any more */
a
div.enrolmenticons
div.moreinfo /* contains link to /course/info.php or empty */
div.content
Also note that JS may be attached to switch between modes by hiding content or loading it via AJAX request. In this case the tag with class .name is not changing so the name does not change font size.
|
List of courses: core_course_renderer::coursecat_courses()
How to use
|
What you get (HTML/CSS)
|
Also is already used in many course listings.
To print custom list of courses on php page:
$renderer = $PAGE->get_renderer('core', 'course');
echo $renderer->courses_list($courses);
Remember that function print_courses() is deprecated.
|
CSS classes
div.courses
div.paging /* pagination for courses */
div.coursebox[.collapsed].odd.first
div.coursebox[.collapsed].even
...
div.coursebox[.collapsed](.odd|.even).last
div.paging /* pagination for courses or 'more' link */
|
List of subcategories: core_course_renderer::coursecat_subcategories()
How to use
|
What you get (HTML/CSS)
|
Can be used only as part of tree
|
CSS classes
div.subcategories
div.paging /* pagination for categories */
div.category[.with_children[.collapsed]][.loaded|.notloaded][.dimmed_category]
div.info
[h3|h4].name /* for nested categories */
a
div.content /* always present even if empty */
div.subcategories
.... /* recursive */
div.courses
... /* see above */
div.category
div.category
...
div.paging /* pagination for categories or 'more' link */
|
Courses and categories tree: core_course_renderer::render_coursecat_renderable()
How to use
|
What you get (HTML/CSS)
|
Can be called as $renderer->render($coursecat) but since the class coursecat_renderable is defined inside /course/renderer.php it is not recommended to use it from outside of the class.
Used in functions:
$renderer = $PAGE->get_renderer('core', 'course');
echo $renderer->courses_list_frontpage($displaymode);
echo $renderer->search_courses($searchcriteria);
echo $renderer->tagged_courses($tagid);
echo $renderer->course_category($id);
|
div.course_category_tree /* plus extra class for each particular listing */
div.subcategories
... /* see above */
div.courses
... /* see above */
div.controls
div.addtoall.expandall
div.removefromall.collapseall
|
Changes in CSS
Pages, displaying information about one course only
- /course/info.php
- /enrol/index.php (in Moodle 2.4 had url /course/enrol.php)
Moodle 2.4
|
Moodle 2.5
|
h2.main /* course/info.php only */
a /* link to course */
br /* plus short course name in parenthesis */
div.box.generalbox.info
div.no-overflow /* missing if there is no summary */
ul.teachers
li
|
div.box.generalbox.info
div.coursebox
div.info
h3.name
a[.dimmed]
div.enrolmenticons
div.moreinfo /* empty */
div.content
div.summary
ul.teachers
li
|
Courses lists
- search results
- tagged courses
- list of enrolled or available courses on the front page
- category page where number of courses is less than $CFG->courseswithsummarieslimit
Moodle 2.4
|
Moodle 2.5
|
div.box.courseboxes /* category view only */
ul.unlist /* category view and frontpage */
li /* category view and frontpage */
div.coursebox
div.info
h3.name
a
ul.teachers
li
div.summary
div.no-overflow
...
p.category /* search results only */
div.enrolmenticons
img
|
div.courses
div.paging /* pagination for courses */
div.coursebox.odd.first
div.info
h3.name
a[.dimmed]
div.enrolmenticons
div.moreinfo /* empty, maybe populated with JS */
div.content
div.summary
ul.teachers
li
div.coursecat
a[.dimmed]
div.coursebox.even
...
div.coursebox(.odd|.even).last
div.paging /* pagination for courses or 'more' link */
|
CSS directives replacements
|
Moodle 2.4
|
Moodle 2.5
|
.coursebox > .info > ul.teachers > li
|
.coursebox > .content > ul.teachers > li
|
.coursebox > .summary
|
.coursebox > .content > .summary
|
.coursebox > .summary > p.category
|
.coursebox > .content > div.coursecat (could not use word 'category' any more because it might cause CSS confusions)
|
.coursebox > .summary > .enrolmenticons
|
.coursebox > .info > .enrolmenticons
|
Combo list on frontpage
Moodle 2.4
|
Moodle 2.5
|
div.course_category_tree
div.category[.with_children] /* in some themes has background image with gradient */
div.category_label /* has background image 'collapsed'/'expanded' */
a.category_link
div.subcategories
div.category
... /* recursive */
... /* more div.category */
div.courses
div.course
a.course_link
div.course_info
img, a img /* enrolment icons and link to /course/info.php */
... /* more div.course */
|
div.course_category_tree.frontpage-category-combo
div.subcategories
div.category[.with_children[.collapsed]][.loaded|.notloaded][.dimmed_category]
div.info
[h3|h4].name /* for nested categories */
a
div.content
div.subcategories
.... /* recursive */
div.courses
... /* see in the same example below */
... /* more div.category */
div.paging.paging-viewmore /* 'more' link for categories */
div.courses
div.coursebox.collapsed(.odd|.even)[.first][.last]
div.info
div.name /* Note that it is not any more */
a[.dimmed]
div.enrolmenticons
div.moreinfo /* contains link to /course/info.php or empty */
div.content /* empty, placeholder for JS */
... /* more div.coursebox */
div.paging.paging-viewmore /* 'more' link for courses */
div.controls
div.addtoall.expandall
div.removefromall.collapseall
|
CSS directives replacements
|
Moodle 2.4
|
Moodle 2.5
|
.course_category_tree .courses. > .course
|
.course_category_tree .courses. > .coursebox (or .coursebox.collapsed)
|
.course_category_tree .courses. > .course > .course-info
|
.course_category_tree .courses. > .coursebox > .info > .enrolmenticons,
.course_category_tree .courses. > .coursebox > .moreinfo
|
.course_category_tree .courses. > .course > .course_link
|
.course_category_tree .courses. > .coursebox > .info > .name > a
|
.course_category_tree .category > .category_label > .category_link
|
.course_category_tree .category > .info > .name > a
|
.course_category_tree .category > .subcategories
|
.course_category_tree .category > .content > .subcategories
|
.course_category_tree .category > .courses
|
.course_category_tree .category > .content > .courses
|
Categories lists
Moodle 2.4
|
Moodle 2.5
|
Categories list on the frontpage
div.box.generalbox.categorybox
div.categorylist
div.category
a
span.numberofcourse
div.category
div.indentation /* maybe several nested */
a
span.numberofcourse
|
div.course_category_tree.frontpage-category-names
div.subcategories
div.category[.with_children[.collapsed]][.loaded|.notloaded][.dimmed_category]
div.info
[h3|h4].name /* for nested categories */
a
span.numberofcourse
div.content
div.subcategories
.... /* recursive */
... /* more div.category */
div.paging.paging-viewmore /* 'more' link */
div.controls
div.addtoall.expandall
div.removefromall.collapseall
|
Categories list on /course/index.php
div.box.categorybox
div.categorylist
div.category
div.image
img /* 'i/course' */
div.name
a
div.clearfloat /* empty */
div.course /* note that it is not nested in .category */
div.indentation
div.name
img /* enrolment icon */
a /* link to course */
div.info
a /* link to /course/info.php */
img
div.course
... /* other courses */
div.categorylist
div.category
div.indentation /* indicates that this category is nested */
div.image
div.name
div.course
div.indentation
div.indentation
div.name
div.info
... /* other courses */
... /* other categories */
|
div.course_category_tree.category-browse.category-browse-0
div.subcategories
div.category[.with_children[.collapsed]][.loaded|.notloaded][.dimmed_category]
div.info
[h3|h4].name /* for nested categories */
a
div.content
div.subcategories
.... /* recursive */
div.courses
div.coursebox.collapsed(.odd|.even)[.first][.last]
div.info
div.name
a[.dimmed]
div.enrolmenticons
div.moreinfo /* contains link to /course/info.php or empty */
div.content /* empty */
... /* more div.coursebox */
div.paging.paging-viewmore /* 'more' link for courses */
... /* more div.category */
div.paging.paging-viewmore /* 'more' link for categories */
div.controls
div.addtoall.expandall
div.removefromall.collapseall
Note that by default categories content is not loaded, it may be loaded by AJAX request
|
CSS directives replacements
|
Moodle 2.4
|
Moodle 2.5
|
.categorylist > .category div.name > a
|
.course_category_tree .subcategories > .category > div.info > .name > a (Note that now courses are nested inside category and if directive just say .category .name it will also be applied to names of the courses inside category!)
|
.categorylist > .category .image
|
does not exist anymore, if you want to add an icon for category add it as background for .category > .info > .name > a
|
.categorylist .indentation
|
does not exist anymore, all subcategories and courses are nested div's now
|
.categorylist .course
|
.course_category_tree .courses. > .coursebox
|
Browsing category
Moodle 2.4
|
Moodle 2.5
|
Category view with subcategories
table.generalbox.boxaligncenter.category_subcategories
thead
tr
th /* 'Sub-categories' */
tbody
tr
td
a
tr
...
div.box.courseboxes
ul.unlist
li
div.coursebox
div.info
h3.name
a
ul.teachers
li
div.summary
div.no-overflow
...
p.category /* search results only */
div.enrolmenticons
img
div.coursebox
...
|
div.course_category_tree.category-browse
div.subcategories
div.paging /* pagination for categories */
div.category[.with_children[.collapsed]][.loaded|.notloaded][.dimmed_category]
div.info
[h3|h4].name /* for nested categories */
a
div.content
div.subcategories
.... /* recursive */
div.courses
... /* see in the same example below */
... /* more div.category */
div.paging /* pagination for categories or 'more' link */
div.courses
div.paging /* pagination for courses */
div.coursebox[.collapsed](.odd|.even)[.first][.last]
div.info
(h3|div).name
a[.dimmed]
div.enrolmenticons
div.moreinfo /* contains link to /course/info.php or empty */
div.content
div.summary
ul.teachers
li
... /* more div.coursebox */
div.paging /* pagination for courses or 'more' link */
div.controls
div.addtoall.expandall
div.removefromall.collapseall
Note that by default subcategory content is not loaded, it may be loaded by AJAX request
If there are more than $CFG->courseswithsummarieslimit courses in category they will be displayed as div.coursebox.collapsed (with empty .content)
|
Category view with paginated courses
or category with more than $CFG->courseswithsummarieslimit courses
table.generalbox.boxaligncenter.category_subcategories
... /* see above */
div.paging /* applies to courses only! */
table.generalbox.boxaligncenter
tbody
tr
th /* 'Courses' */
th /* empty */
tr
td
a /* link to course */
td
img, a img /* enrolment icons and link to /course/info.php */
tr
...
|
CSS directives replacements
|
Moodle 2.4
|
Moodle 2.5
|
.courseboxes
|
.course_category_tree.category-browse
|
table.category_subcategories
|
.course_category_tree .subcategories (no more tables!)
|
also see styles for Listings of courses
|