theme/upgrade.txt

   1 This files describes API changes in /theme/* themes,
   2 information provided here is intended especially for theme designer.
   3
   4 === 3.8 ===
   5
   6 * Moodle does not produce chunked CSS anymore, instead an unique css fils is generated and served (MDL-55751). This implies:
   7   * css_chunk_by_selector_count() has been removed.
   8   * css_store_css(), theme_styles_get_filename() and theme_styles_get_etag() don't accept any chunk-related param anymore.
   9 * The PHP Less compilier has now been removed from the core library.
  10   Please consider migrating your theme to use SCSS.
  11 * It is now possible to use sub-directories when creating mustache templates.
  12   The standard rules for Level 2 namespaces also apply to templates.
  13   The sub-directory used must be either an valid component, or placed inside a 'local' directory to ensure that it does not conflict with other components.
  14
  15     The following are all valid template names and locations in your theme:
  16       theme_themename/columns2: theme/[themename]/templates/columns2.mustache
  17       theme_themename/local/layouts/columns2: theme/[themename]/templates/local/layouts/columns2.mustache
  18
  19     The following are core templates, locations, and override locations in your theme:
  20       core/modal: lib/templates/modal.mustache => theme/[themename]/templates/core/modal.mustache
  21       mod_forum/forum_post: mod/forum/templates/forum_post.mustache => theme/[themename]/templates/mod_forum/forum_post.mustache
  22       mod_forum/local/post/user: mod/forum/templates/local/post/user.mustache => theme/[themename]/templates/mod_forum/local/post/user.mustache
  23
  24     The following are _invalid_ template names and locations:
  25       theme_themename/layouts/columns2: theme/[themename]/layouts/columns2.mustache
  26
  27 === 3.7 ===
  28 * The core/form_autocompelte_input template now has a `data-tags` attribute.
  29 * Boost theme renderer overrides have now been migrated to core.
  30 * Renderers that were overridden by Boost are now in Bootstrapbase
  31 * Core templates in Boost have now moved into core
  32 * Templates that were overridden by boost are now located in Bootstrapbase
  33 * Themes bootstrapbase, clean & more have now been removed.
  34
  35 === 3.6 ===
  36
  37 * A new callback has been added to the theme layout files allowing plugins to inject their content
  38   into the page. For Boost it was added as a mustache variable "{{{ output.standard_after_main_region_html }}}" in
  39   templates/columns1.mustache and templates/columns2.mustache. In bootstrapbase it was added as a
  40   function call "$OUTPUT->standard_after_main_region_html()" in layout/columns1.php, layout/columns2.php.
  41   and layout/columns3.php. Child themes not inheriting these templates should add the function call
  42   after the div containing the main content region. Please refer to the messaging drawer UI for an example of
  43   making use of this new feature.
  44 * The body tag has various browser-specific classes for those cases where some
  45   browser-sniffing is unavoidable. This used not to recognised Microsoft Edge,
  46   but now it does (class 'edge'). Also, both Safari and Chrome used to be
  47   class 'safari', but now there are separate classes 'safari' and 'chrome'.
  48   The body's class should change to match the browser:
  49   - Google Chrome (Mac & Window): The body class should change from safari to chrome.
  50   - Google Chrome (Android) : The body class should change from safari, android to chrome, android.
  51   - Microsoft Edge: The body class should change from safari to edge.
  52   - Mobile safari: The class ios should exist, safari class should be removed.
  53 * Remove class .safari styling from activity chooser dialog for theme boost and bootstrapbase.
  54 * The following functions and classes have been finally deprecated and can not be used anymore:
  55   * css_is_colour()
  56   * css_is_width()
  57   * css_sort_by_count()
  58   * core_course_renderer::add_modchoosertoggle()
  59   * class css_optimiser
  60
  61 === 3.4 ===
  62
  63 * There was a mustache template login.mustache in /lib/templates/ rendering the login form
  64   and a template with the same name in /theme/boost/templates/ rendering the pagelayout "login".
  65   To prevent misunderstanding when overriding one of these templates in a Boost child theme,
  66   the first one was renamed to loginform.mustache - see MDL-58970.
  67 * The Boost flat navigation nodes now have several data-attributes which let plugin developers
  68   access properties from the underlying navigation nodes in the browser - see MDL-59425.
  69 * Navigation between activities via a previous and next link was added to Boost, Clean and Bootstrapbase. This
  70   is made possible by a new function core_renderer->activity_navigation().
  71 * Theme designers may now place the Reset tour on this page link where required by adding an empty
  72   container (e.g. <div class="tool_usertours-resettourcontainer"></div>) to their layouts.
  73
  74 === 3.3 ===
  75
  76 * As boost-based themes no longer use the moodle-core-popuphelp help popups, the javascript
  77   setup for this module have been moved from core standard_head_html to the bootstrapbase
  78   renderer. If your theme needs this javascript you will need to ensure the bootstrap renderer
  79   is called, or require the JS yourself
  80
  81 === 3.2 ===
  82
  83 * Removed themes: base, canvas
  84   During the upgrade process the themes will be uninstalled and all their settings will be deleted.
  85   If you wish to keep your theme and its settings, download it from moodle.org and put it back in
  86   the theme/ directory BEFORE UPGRADING.
  87 * Bootstrap 4 was added as part of a the new theme 'boost'.
  88 * Some backwards and forwards compatibility has been added for different bootstrap versions.
  89   This is to allow the same markup to work in "clean" and "boost" themes a lot of the time.
  90   It is also to allow user text with bootstrap classes to keep working in the new theme.
  91 * Using .dir-rtl for RTL styling is deprecated and should not be used any more. From now
  92   the styles are automatically flipped when the language is right-to-left. However,
  93   as this is not always perfect, you can define exceptions. Please refer to the documentation
  94   of the tool RTLCSS-PHP for more information: https://github.com/moodlehq/rtlcss-php
  95 * Themes can now automatically compile SCSS on the fly. This works the same way as it
  96   does compiling LESS on the fly, effecitvely adding $THEME->scss to your config. The
  97   latter can either be the name a SCSS file (without extension) in your theme's scss/ folder,
  98   or a Closure which will return the main SCSS content.
  99 * Two new callbacks allow themes to inject SCSS code before and after the content provided
 100   by the SCSS file $THEME->scss. See $THEME->prescsscallback and $THEME->extrascsscallback.
 101 * A new callback can be defined to post process the CSS using an object representation
 102   of the CSS tree ($THEME->csstreepostprocess). This gives a lot more flexibility than a
 103   simple find and replace. Refer to 'boost' for an example, and to PHP-CSS-Parser.
 104   (https://github.com/sabberworm/PHP-CSS-Parser) for the API.
 105 * A new core setting now enables admins to upload the logos of their site. Using the
 106   following methods, themers can instantly support branding logos without the need
 107   to implement specific theme settings:
 108   * $OUTPUT->get_logo_url($maxwidth, $maxheight);
 109   * $OUTPUT->get_compact_logo_url($maxwidth, $maxheight);
 110 * The class .dir-ltr should not be used any more. To force LTR styles use the directive
 111   to remove the rule when the language is RTL. See RTLCSS-PHP for more information.
 112 * A new class .text-ltr may be used to force the direction to LTR. This is especially useful
 113   for forms fields (numbers, emails, URLs must not be RTL'd), and for displaying code
 114   snippets or configuration samples.
 115 * A new theme config 'requiredblocks' allows a theme to define which blocks are deletable.
 116 * You may no longer override the following core_course_renderer methods.
 117   See course/upgrade.txt for more information:
 118   - course_modchooser_module_types
 119   - course_modchooser_module
 120   - course_modchooser_title
 121 * The question chooser now uses a renderable and a template, the following methods
 122   have been deprecated in favour of core_question_bank_renderer::render_qbank_chooser().
 123   - qbank_chooser
 124   - qbank_chooser_types
 125   - qbank_chooser_qtype
 126   - qbank_chooser_title
 127 * The 'css optimiser' has been removed. Developers are encouraged to use tools such as stylelint
 128   to help optimise their css. Some functions and classes in lib/csslib.php (which was not for public use)
 129   have been deprecated:
 130   - css_is_colour
 131   - css_is_width
 132   - css_sort_by_count
 133   - class css_optimiser no longer does anything.
 134 * CLI svgtool.php has moved from theme/base/cli to admin/cli and paths should be relative to the new location.
 135 * mod_chat will now display the 'course theme' option for all themes (previously it was only displayed on
 136   bootstrap2 based themes).
 137 * Theme can choose how to display "Add a block" control in $THEME->addblockposition, default value is
 138   BLOCK_ADDBLOCK_POSITION_DEFAULT that displays it as a fake block in editing mode.
 139
 140 === 3.1 ===
 141
 142 * A new search box for global search has been added to bootstrap and clean layout files, if
 143   your theme is overwriting columns1.php, columns2.php or columns3.php you will need to add a
 144   call to core_renderer::search_box to display it.
 145 * Notification templates have been renamed to better suit types of alert
 146   rather than uses. The following changes have been made:
 147   * notification_problem.mustache => notification_error.mustache
 148   * notification_message          => notification_info
 149   * notification_redirect         => notification_warning
 150 * Method core_course_renderer::course_section_cm_name() is split into two methods, custom themes that override
 151   this method must be modified or otherwise editing functionality may become broken. This method is now also used by
 152   social activities block and site menu block to display activities names.
 153
 154 === 3.0 ===
 155
 156 * The renderer function core_availability_renderer::multiple_messages was changed to
 157   render_core_availability_multiple_messages, requiring a parameter of the new
 158   \core_availability\multiple_messages type.
 159 * Meta description is now included in standard_head_html for homepage in bootstrapbase.
 160   If your theme includes a meta description directly in a layout for the frontpage,
 161   you will need to remove it or override the standard_head_html instead.
 162 * Themes Clean and More have been updated to use a new navbar_button function, which shows the
 163   hamburguer icon (responsive menu) or not depending on custom and language menus settings;
 164   themes extending bootstrapbase and overriding its layouts can call replace their "a.btn-navbar"
 165   node for a call to this function.
 166 * Themes Clean and More page header logo only displays on front page and login page.
 167 * A new function navbar_home has been added to theme_clean and theme_more to display the navigation bar link
 168   to the site home. Two new settings have been added to control if the link should be a small logo image, text
 169   or both. It defaults to the current behaviour, only a text link.
 170
 171 === 2.9 ===
 172
 173 * Themes Bootstrapbase, Clean and More have undergone some changes for RTL layouts see - MDL-48160.
 174
 175 * Themes Clean amd More page header background logo, if loaded, no longer links to the home page.
 176 * Themes Clean and More have been updated to use the renderer full_header(). This renderer (when in a user context) displays a message button
 177   and consequently the link to message users have been removed from various pages. It is recommended that theme developers use this
 178   renderer to ensure that they do not suffer from a reduction in access to this feature.
 179 * $OUTPUT->context_header() has been introduced to produce headers similar to what full_header() creates. This renderer is used for creating
 180   subsequent headers in a page. If provided with user information, this render will also display a message button like full_header().
 181
 182 === 2.8 ===
 183
 184 * Themes Base and Canvas layout/embedded.php has changed.
 185   The div id="content" has been changed to id="page-content" - see MDL-47915.
 186 * All mod_assign CSS selectors have been qualified with ".path-mod-assign". This means any custom CSS
 187   rules for mod_assign in a theme may need to be updated.
 188 * The following render methods were renamed, if you have overridden any of these you will need to update your renderer:
 189   - report_log_renderer::render_report_log_renderable         => report_log_renderer::render_report_log
 190   - report_loglive_renderer::render_report_loglive_renderable => report_loglive_renderer::render_report_log
 191 * On calendar view screen the course selector and new event button have been swapped, custom CSS for .path-calendar might be affected.
 192 * The functions search_listing() and search_pagination() in the core_course_management_renderer class take the searched string
 193   as an extra parameter - see MDL-46902.
 194 * Themes with non-fixed headers must have the .navbar class in their navbar in order for floating headers in the grader report to work - see MDL-46658.
 195 * To accomodate the new gradebook, use of overflow: hidden or overflow-x: hidden CSS rules on DOM elements containing the
 196   #user-grades table, visible at [Course administration -> Grades] is not recommended. Please use overflow: auto or
 197   overflow: scroll instead, as this will handle medium to large courses with multiple activities better (more information available at https://docs.moodle.org/dev/Theme_upgrade_notes ).
 198 * The new user menu can be added to themes by calling $OUTPUT->user_menu(); we recommend doing so in a backwards-compatible way (see https://docs.moodle.org/dev/Theme_upgrade_notes for more information).
 199
 200 === 2.7 ===
 201
 202 * CSS related functions in theme class and csslib.php were refactored, addons that are
 203   using this private API need to be updated
 204 * Please update your css to use 'tr:nth-of-type(odd/even)' instead of '.r0/.r1' to apply tr specific css for various tables.
 205   These classes are deprecated now and will be removed in Moodle 2.9. This has done to better support styling tables that will be altered by JavaScript.
 206   Here is an example to update your css:
 207   Old code:
 208     table.generaltable .r0 {background-color: #F0F0F0;}
 209     table.generaltable .r1 {background-color: #F0F0F0;}
 210   New code:
 211     table.generaltable > tbody > tr:nth-of-type(even) {background-color: #F0F0F0;}
 212     table.generaltable > tbody > tr:nth-of-type(odd) {background-color: #F0F0F0;}
 213
 214 Removed themes:
 215 * afterburner, anomaly, arialist, binarius, boxxie, brick, formal_white, formfactor, fusion, leatherbound,
 216   magazine, nimble, nonzero, overlay, serenity, sky_high, splash, standard and standardold have been removed.
 217   During the upgrade process the themes will be uninstalled and all their settings will be deleted.
 218   If you wish to keep your theme and its settings, download it from moodle.org and put it back in
 219   the theme/ directory BEFORE UPGRADING.
 220
 221 Notes:
 222 * z-index on #dock has been adjusted from 11000 to 5000 to prevent overlapping issues with fullscreen TinyMCE in Base theme.
 223
 224 === 2.6 ===
 225
 226 Removed themes:
 227 * "My Mobile" theme has been removed (see MDL-40874).
 228   During the upgrade process "My Mobile" theme will be uninstalled and all its settings will be deleted.
 229   "My Mobile" theme and its extending themes will fallback to the mobile friendly "Clean" theme.
 230   If you wish to keep "My Mobile" theme and its settings, BEFORE UPGRADING you can copy the files from the
 231   unmaintained plugin into theme/mymobile.
 232   The unmaintained plugin can be downloaded at https://moodle.org/plugins/pluginversion.php?id=4563
 233 Notes:
 234 * There have been several changes made to the classes used on headings throughout Moodle.
 235   This was done as per the Moodle HTML guidelines. h1 and h2 elements should have no classes, h3 and lower headings
 236   may have descriptive classes only (any classes must properly describe the relation between the header and its content).
 237 * The parameters value for the following functions have been modified: core_renderer::heading() and core_renderer::heading_with_help().
 238   This means that headings using the default options will no longer have the class "main" which was the previous default.
 239 * The file picker and activity chooser have been converted to use M.core.dialogue. This means the styles
 240   for these elements have changed in the base and bootstrapbase themes and you will need to copy the new styles
 241   if you are not inheriting from either one of these themes.
 242 * For the themes based on bootstrapbase please also read theme/bootstrapbase/upgrade.txt
 243 * A new component action_menu is now used to display editing icons for courses and blocks within a drop down. If you have a theme that doesn't
 244   extend base, canvas, or clean then you will need to style for this new component within your theme.
 245 * The maintenance layout now has a special renderer that extends the core_renderer in order to prevent some methods from interacting
 246   with the database. Please be aware that for the maintenance layout some methods now always return an empty string.
 247   This has been done because it is important that during maintenance routines we don't show any links, interact with the database,
 248   or interact with caches as doing so may lead to errors,
 249   Please see the maintenance renderer notes below for details on the functions affected.
 250
 251 Renderer changes:
 252 * core_course_renderer::course_section_cm_edit_actions has two new optional arguments and now uses and action_menu component.
 253 * core_course_renderer::course_section_cm has been altered to call core_course_renderer::course_section_cm_edit_actions with the two new arguments.
 254 * core_renderer::block_controls has a new optional argument (the block id) and has been altered to use the new action_menu component.
 255 * core_renderer::block_header has been altered to give core_renderer::block_controls the new second argument, the block id.
 256 * core_renderer::action_link has a new argument, and optional icon that can be rendererd into the link.
 257
 258 Selector changes:
 259 * Changes to the classes given to the header produced when rendering a single section within a course.
 260   .section-navigation.header.headingblock => .section-navigation.navigationtitle
 261 * Changes to the classes used when producing the course information box that lists courses.
 262   The name (h3|div} of both courses and categories used to have .name, for courses in the list this was changed to .coursename and for categories in the list this was changed to .categoryname.
 263 * Classes ".header and .headingblock" were removed from all front page content headings.
 264 * Classes ".headingblock .header .tag-header" were removed from the tag index page
 265
 266 Maintenance renderer notes:
 267 When the maintenance layout is being used $OUTPUT will be an instance of core_renderer_maintenance.
 268 This renderer mimics the core_renderer except that the following functions always return an empty string.
 269 * core_renderer_maintenance::block
 270 * core_renderer_maintenance::blocks
 271 * core_renderer_maintenance::blocks_for_regions
 272 * core_renderer_maintenance::course_header
 273 * core_renderer_maintenance::course_footer
 274 * core_renderer_maintenance::course_content_header
 275 * core_renderer_maintenance::course_content_footer
 276 * core_renderer_maintenance::custom_menu
 277 * core_renderer_maintenance::file_picker
 278 * core_renderer_maintenance::htmllize_file_tree
 279 * core_renderer_maintenance::lang_menu
 280 * core_renderer_maintenance::login_info
 281 * core_renderer_maintenance::user_picture
 282
 283 If you have overridden methods of the core_renderer in your theme and want those changes to be shown during times of maintenance you
 284 will also need to override the core_renderer_maintenance and copy your customisations from the core_renderer to that.
 285
 286 === 2.5.1 ===
 287
 288 Notes:
 289 * Block drag and drop functionality has been improved so that it works regardless of what block regions you use
 290   or how many block regions you have. In order to benefit from this improvement you must convert your calls from
 291   $OUTPUT->blocks_for_region() to $OUTPUT->blocks.
 292
 293 Optional changes:
 294 * Theme config can nominate block regions to swap if the user is using a rtl languages such as Hebrew.
 295   $THEME->blockrtlmanipulations should be an associative array, the key is the original block region, and the
 296   value should be where the blocks in that region should be displayed.
 297 * New $OUTPUT methods to replace code that was previously using $PAGE. Converting to these methods is optional
 298   but highly recommended. Refer to the bootstrapbase layouts for examples.
 299   - $OUTPUT->body_attributes() returns a string you can use for the body id and classes.
 300   - $OUTPUT->blocks() returns HTML to display a block region and all of its blocks. This adds data attributes
 301     that ensure drag and drop of blocks will work no matter what block regions or how many you have.
 302   - $OUTPUT->page_heading() returns the page heading. Replaces $PAGE->heading.
 303   - $OUTPUT->page_heading_button() returns the button to display with the heading. Replaces $page->button.
 304   - $OUTPUT->page_doc_link() returns the link to moodle docs for the page. Replaces page_doc_link().
 305   - $OUTPUT->page_heading_menu() returns the heading menu for the page. Replaces $PAGE->headingmenu.
 306   - $OUTPUT->page_title() Returns the title to use for the head section.
 307   - $OUTPUT->favicon() returns the URL to the favicon.
 308
 309 Renderer changes:
 310 * core_renderer::navbar now returns an empty string if there are no navigation items to display.
 311 * core_renderer::custom_menu now adds a class "custom_menu" to the div that contains the HTML for the custom menu.
 312
 313 === 2.5 ===
 314
 315 required changes:
 316 * Functions core_course_renderer::course_category_tree() and course_category_tree_category()
 317   are deprecated
 318 * Significant changes in rendering of courses and categories listings, lots of CSS classes changed,
 319   several functions such as print_courses(), print_whole_category_list(), print_category_info()
 320   are moved to course renderer.
 321   See http://docs.moodle.org/dev/Courses_lists_upgrade_to_2.5
 322
 323 DOM changes:
 324 * changed the h1 title in the help popup to a h2.
 325 * new setting $THEME->yuicssmodules = array('cssreset', 'cssfonts', 'cssgrids', 'cssbase'); which
 326   allows themes to use different CSS reset normalisers such as cssnormalize YUI module.
 327 * Re-wrote the user profile views to definition lists.
 328 * Re-wrote the table for the course completion status block to use html_table - added some CSS classes to
 329   the table in the process (see MDL-35608).
 330 * Cancel buttons have the class btn-cancel.
 331 * Added a z-index for the div#dateselector-calendar-panel so that the calendar pop-up renders above
 332   the filemanager when they overlap, ie. the course settings page (see MDL-39047).
 333 * Trivial change of CSS selectors used to display plugin status at the plugins overview
 334   screen (#plugins-control-panel).
 335
 336 Renderer changes:
 337 * Mymobile theme changed to support more verbose move-block-here descriptions.
 338
 339 === 2.4 ===
 340
 341 required changes:
 342 * output course and course content header/footer that may be returned by course format (see MDL-36048)
 343 * span.completionprogress has been changed to a <div> and is not a float by default any more.
 344
 345 deprecation:
 346 * i/roles: Use t/assignroles instead
 347 * t/manual_item: Use i/manual_item instead
 348 * t/unlock_gray: Use t/locked instead
 349 * t/userblue: Previously used to unblock a user, use t/unblock.
 350 * c/course: Use i/courseevent instead
 351 * c/group: Use i/groupevent instead
 352 * c/site: Use i/siteevent instead
 353 * c/user: Use i/userevent instead
 354 * t/clear: Use t/check instead
 355 * i/cross_red_big: Use i/invalid or i/grade_incorrect
 356 * i/tick_green_big: Use i/valid or i/grade_correct
 357 * i/tick_amber_big: Use i/caution or i/grade_partiallycorrect
 358 * No more small versions of i/cross_red_small, i/tick_green_small and i/tick_amber_small, use their big equivalent.
 359 * t/addgreen: Use t/add instead.
 360 * i/approve: Use t/approve instead
 361
 362 optional changes:
 363 * new optional boolean parameter $withlinks for public function login_info() in lib/outputrenderers.php (MDL-31365)
 364 * new layout option "nologinlinks" and new page layout "secure" e.g. for safebrowser and securewindow (MDL-31365)
 365 * new class 'iconlarge' for 24x24 icons.
 366 * new icons i/export and i/import (sized 16x16). Previously export and import actions used i/backup and i/restore.
 367 * new icon i/assignroles (sized 16x16), to prevent the use of i/roles which is 12x12.
 368 * new icon i/switchrole (sized 16x16), was previously using i/roles. Now is a copy of the new i/assignroles icon.
 369 * new icons i/enrolusers and t/enrolusers, previsouly i/users was used.
 370 * new icon t/cohorts (sized 12x12), to prevent the use of i/cohorts which is 16x16.
 371 * new icons t/sort_asc, t/sort_desc to use for ordering in table headers.
 372 * new class 'iconsort' for icons used for ordering in table headers.
 373 * new icons t/locked and t/unlocked (12x12) which should be used when there is no action associated to the icon.
 374 * new icons i/folder (16x16), monochrome equivalent to f/folder.
 375 * new icons t/addcontact, t/removecontact and t/messages, previously t/addgreen, t/delete and t/log were used in messaging.
 376 * new icons t/unblock and i/twoway.
 377 * new icons i/courseevent, i/groupevent, i/siteevent and i/userevent (16x16) instead of c/* for calendar events.
 378 * new icon t/markasread (12x12) to replace t/clear used in forums.
 379 * new icon t/check (12x12) to replace t/clear which name does not reflect the icon meaning.
 380 * new classes 'icon-pre' and 'icon-post' supposedly to be used when the icon is positioned before or after the text. This is not really used yet, but it's a start towards some standardisation of the icon selectors.
 381 * new icons i/valid, i/caution and i/invalid for generic statuses.
 382 * new icons i/grade_correct, i/grade_partiallycorrect and i/grade_incorrect for grades.
 383 * new icon t/approve (12x12).
 384 * new icon t/contextmenu (12x12) for a monochrome version of i/menu.
 385
 386 === 2.3 ===
 387
 388 optional changes:
 389 * add new u/f3.png image when theme contains customised f1 and f2 default user images
 390
 391 === 2.2 ===
 392
 393 required changes:
 394 * use new page content placeholder "echo $OUTPUT->main_content()" instead of "echo core_renderer::MAIN_CONTENT_TOKEN"
 395   see git commit: 3b3f302855d7621405a8b93e49bd399d67a998d7
 396 * upgrade report selectors: search for "-course-report-" and replace with "-report-"