Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Courses lists upgrade to 2.5: Difference between revisions

From MoodleDocs
Line 46: Line 46:
* category listing that does not have subcategories and number of courses is less than $CFG->courseswithsummarieslimit
* category listing that does not have subcategories and number of courses is less than $CFG->courseswithsummarieslimit


<pre>
<code css>
div.course_category_tree.courses-only
div.course_category_tree.courses-only
     div.courses
     div.courses
         div.paging ''(pagination)''
         div.paging /* pagination */
         div.course
         div.course
             h3.course_name ''(never <div>)''
             h3.course_name /* never <div> */
                 a.course_link ''(has background image 'course')''
                 a.course_link /* has background image 'course' */
             div.course_info
             div.course_info
             div.course_summary
             div.course_summary
Line 60: Line 60:
         div.course
         div.course
         ...
         ...
         div.paging ''(may be pagination or 'more' link)''
         div.paging /* may be pagination or 'more' link */
</pre>
</code>


'''Tree of categories and courses'''
'''Tree of categories and courses'''
Line 68: Line 68:
* combo list on the front page
* combo list on the front page


<pre>
<code css>
div.course_category_tree
div.course_category_tree
     div.subcategories
     div.subcategories
         div.paging (pagination)
         div.paging /* pagination */
         div.category[.with_children[.loaded[.collapsed]|.notloaded]] ''(does NOT have background image any more)''
         div.category[.with_children[.loaded[.collapsed]|.notloaded]] /* does NOT have background image any more */
             div.category_label ''(in some themes has background image with gradient)''
             div.category_label /* in some themes has background image with gradient */
                 [h3|h4].category_name ''(<h4> for nested categories; has background image 'collapsed'/'expanded')''
                 [h3|h4].category_name /* <h4> for nested categories; has background image 'collapsed'/'expanded' */
                     a.category_link
                     a.category_link
             div.subcategories
             div.subcategories
Line 81: Line 81:
         div.category
         div.category
         ...
         ...
         div.paging ''(may be pagination or 'more' link)''
         div.paging /* may be pagination or 'more' link */
     div.courses
     div.courses
         div.paging ''(pagination)''
         div.paging /* pagination */
         div.course
         div.course
             [div|h3].course_name ''(In this listing type it is usually <div>. May be <h3> if course is shown expanded, with summary and contacts)''
             [div|h3].course_name /* In this listing type it is usually <div>. May be <h3> if course is shown expanded, with summary and contacts */
                 a.course_link ''(has background image 'course')''
                 a.course_link /* has background image 'course' */
             div.course_info
             div.course_info
             div.course_summary
             div.course_summary
Line 94: Line 94:
         div.course
         div.course
         ...
         ...
         div.paging ''(may be pagination or 'more' link)''
         div.paging /* may be pagination or 'more' link */
</pre>
</code>


'''Pages, displaying information about one course only'''
'''Pages, displaying information about one course only'''
Line 101: Line 101:
* /enrol/index.php (in Moodle 2.4 had url /course/enrol.php)
* /enrol/index.php (in Moodle 2.4 had url /course/enrol.php)


<pre>
<code css>
div.course-info-box
div.course-info-box
     div.course
     div.course
         h3.course_name ''(never <div>)''
         h3.course_name /* never <div> */
             a.course_link
             a.course_link
         div.course_info
         div.course_info
Line 110: Line 110:
         ul.course_contacts
         ul.course_contacts
             li
             li
</pre>
</code>


===Some common CSS rules that need to be changed===
===Some common CSS rules that need to be changed===

Revision as of 23:56, 11 March 2013

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

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

CSS classes hierarchy

Listings of courses only where courses information is expanded:

  • search results
  • tagged courses
  • list of enrolled or available courses on the front page
  • category listing that does not have subcategories and number of courses is less than $CFG->courseswithsummarieslimit

div.course_category_tree.courses-only

   div.courses
       div.paging /* pagination */
       div.course

h3.course_name /* never

*/
               a.course_link /* has background image 'course' */
           div.course_info
           div.course_summary
           ul.course_contacts
               li
       div.course
       div.course
       ...
       div.paging /* may be pagination or 'more' link */

Tree of categories and courses

  • category contents
  • categories tree on the front page
  • combo list on the front page

div.course_category_tree

   div.subcategories
       div.paging /* pagination */
       div.category[.with_children[.loaded[.collapsed]|.notloaded]] /* does NOT have background image any more */
           div.category_label /* in some themes has background image with gradient */
[h3|h4].category_name /*

for nested categories; has background image 'collapsed'/'expanded' */ a.category_link div.subcategories .... div.category div.category ... div.paging /* may be pagination or 'more' link */ div.courses div.paging /* pagination */ div.course [div|h3].course_name /* In this listing type it is usually
. May be

if course is shown expanded, with summary and contacts */
               a.course_link /* has background image 'course' */
           div.course_info
           div.course_summary
           ul.course_contacts
               li
       div.course
       div.course
       ...
       div.paging /* may be pagination or 'more' link */

Pages, displaying information about one course only

  • /course/info.php
  • /enrol/index.php (in Moodle 2.4 had url /course/enrol.php)

div.course-info-box

   div.course
h3.course_name /* never
*/
           a.course_link
       div.course_info
       div.course_summary
       ul.course_contacts
           li

Some common CSS rules that need to be changed

2.4 2.5 Comments
.coursebox .course_category_tree.courses-only .courses .course, .course-info-box .course May be also without .courses-only
.coursebox .teachers .course_category_tree .courses .course .course-contacts, .course-info-box .course .course-contacts
.coursebox h3
.coursebox .info .course_category_tree.courses-only .courses .course_link
.coursebox .summary .course_category_tree .courses .course .course-summary
.categorylist .course_category_tree .subcategories
.categorylist .category .indentation .course_category_tree .category .subcategories
#page-course-category .courseboxes, #page-course-index .courseboxes .course_category_tree.courses-only .courses