ODOO: Customizing the eLearning Module

The Odoo eLearning module (website_slides) provides course and slide management for the Odoo website. Like all Odoo modules, it can be customized through inheritance without touching the original source files.

This post covers a specific and practical customization: disabling the fullscreen mode in the slide course player. The fullscreen feature can cause display issues in certain configurations, and this guide shows how to remove it cleanly.

The Problem

The Odoo eLearning course player appends ?fullscreen=1 to slide URLs and shows a Fullscreen button in the top-right corner of the lesson view.

In some deployments, this fullscreen mode causes layout or display issues. To fix it, you need to:

1. Remove fullscreen=1 from the URL parameter appended to slide links
2. Remove the Fullscreen button from the lesson view template

Both changes must be done through a custom module using JavaScript inheritance and XML view inheritance.

What You Should NOT Do

Never edit core Odoo files directly:

# DO NOT edit this file:
odoo/addons/website_slides/static/src/js/slides_course_slides_list.js

# DO NOT edit this file:
odoo/addons/website_slides/views/website_slides_templates_lesson.xml

Direct edits to core files break on every Odoo update. Use inheritance instead.

Custom Module Structure

Create a new module to hold both the JS override and the XML view override:

e_learning_custom/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       └── js/
│           └── slides_course_slides_list_custom.js
└── views/
    └── website_slides_templates_lesson.xml

The Original JavaScript Code

The problematic code lives in website_slides:

_updateHref: function () {
    this.$(".o_wslides_js_slides_list_slide_link").each(function () {
        var href = $(this).attr('href');
        var operator = href.indexOf('?') !== -1 ? '&' : '?';
        $(this).attr('href', href + operator + "fullscreen=1");
    });
}

This function iterates over all slide links and appends ?fullscreen=1 (or &fullscreen=1) to the URL. The fix is to change fullscreen=1 to fullscreen=0.

Step 1: Override the JavaScript

Create the override file at static/src/js/slides_course_slides_list_custom.js:

odoo.define('e_learning.slides_course_slides_list_custom', function (require) {
    "use strict";

    var SlidesCourseSlidesList = require('website_slides.SlidesCourseSlidesList');

    SlidesCourseSlidesList.include({
        _updateHref: function () {
            this.$(".o_wslides_js_slides_list_slide_link").each(function () {
                var href = $(this).attr('href');
                var operator = href.indexOf('?') !== -1 ? '&' : '?';
                $(this).attr('href', href + operator + "fullscreen=0");
            });
        },
    });
});

How This Works

• odoo.define(...) registers a new JavaScript module in the Odoo asset system
• require('website_slides.SlidesCourseSlidesList') loads the original class
• .include({...}) is Odoo's JavaScript mixin system that overrides methods on the existing class without creating a subclass
• The overridden _updateHref uses fullscreen=0 instead of fullscreen=1

This approach patches the existing class in-place, so all instances of it throughout the module will use the new behavior automatically.

Step 2: Remove the Fullscreen Button

The original fullscreen button in the lesson template looks like this:

<a class="btn btn-light border ms-2 my-1" role="button"
   t-att-href="'/slides/slide/%s?fullscreen=1' % (slug(slide))">
    <i class="fa fa-desktop me-xl-2 my-1"/>
    <span class="d-none d-xl-inline-block">Fullscreen</span>
</a>

To remove it, create views/website_slides_templates_lesson.xml in your custom module:

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="slide_content_detailed_inherit"
              inherit_id="website_slides.slide_content_detailed">
        <!-- Remove the fullscreen button -->
        <xpath expr="//a[contains(@class, 'btn btn-light border ms-2 my-1')
                     and contains(@t-att-href, 'fullscreen=1')]"
               position="replace"/>
    </template>
</odoo>

How This Works

• inherit_id="website_slides.slide_content_detailed" extends the original template
• <xpath expr="..."> uses an XPath selector to find the fullscreen button by its CSS class and href attribute
• position="replace" with an empty body replaces the matched element with nothing — effectively deleting it

Step 3: Register the JS Asset

For the custom JavaScript to be loaded on the website, register it in the manifest's assets:

{
    'name': 'E-Learning Custom',
    'version': '17.0.1.0',
    'summary': 'Customizes the eLearning module behavior',
    'description': 'Disables fullscreen mode in slide course player.',
    'author': 'VarApps',
    'depends': ['website_slides'],
    'data': [
        'views/website_slides_templates_lesson.xml',
    ],
    'assets': {
        'web.assets_frontend': [
            'e_learning_custom/static/src/js/slides_course_slides_list_custom.js',
        ],
    },
    'installable': True,
    'application': False,
}

The assets key registers your JS file in the web.assets_frontend bundle, which is loaded on all website pages.

Full Customization Summary

Problem: Odoo eLearning adds fullscreen=1 to slide URLs
         and shows a Fullscreen button

Solution:
  1. JS Override:
     slides_course_slides_list_custom.js
     --> Overrides _updateHref() to use fullscreen=0

  2. XML Override:
     website_slides_templates_lesson.xml
     --> Removes the fullscreen button with xpath + replace

Both changes are isolated in a custom module.
Core Odoo files are never touched.

Why This Approach Is Correct

When Odoo is upgraded to a newer version:

• Your custom module continues to work as long as the original method and template names have not changed
• Even if they change, only your custom module needs updating — not the core files

Testing the Customization

After installing the module:

1. Open any eLearning course on your Odoo website
2. Navigate to a slide or lesson
3. Verify the URL does not contain fullscreen=1
4. Verify the Fullscreen button is no longer visible in the top-right corner

If the changes do not appear immediately:

• Clear your browser cache
• Run ./odoo-bin -u e_learning_custom -d your_database to update the module

Final Thoughts

This customization demonstrates a core principle of professional Odoo development: never modify the original source. The combination of JavaScript .include() for behavior overrides and XML inherit_id for template overrides gives you complete control over any Odoo frontend feature.

The pattern shown here — creating a small, focused custom module that targets exactly the behavior you want to change — is reusable across any Odoo module customization you will ever need to make.

Override cleanly. Customize safely. Upgrade confidently.