Hide breadcrumbing navigation in Lesson

Hide breadcrumbing navigation in Lesson

από Cindy Weber -
Αριθμός απαντήσεων: 7

Moodle 3.11 Boost
In Lesson, is there a way to eliminate breadcrumbing navigation and maybe even reduce the size of the Lesson Title? Especially on a phone, but even on a PC, the student would need to scroll down to see each page because of the amount of space used by breadcrumbing and Title of the Lesson. A screenshot of my large phone, student role, barely shows the start of the lesson on the page.


Μέσος όρος βαθμολογίας: -
Σε απάντηση σε Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

από Cindy Weber -
This CSS hid it throughout the site:
#page-navbar .breadcrumb {display: none;}
Site Admin-Appearance-Themes-Boost-Advanced-Raw SCSS

Does anyone know how to make it specific to Lesson?
Μέσος όρος βαθμολογίας: -
Σε απάντηση σε Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

από Dominique Bauer -
Φωτογραφία Documentation writers Φωτογραφία Particularly helpful Moodlers Φωτογραφία Plugin developers
Hello Cindy,

You could put the CSS code in a block that appears only on specific lessons.

Better yet is to apply your code on lesson pages only, using a simple Javascript "if" statement. I will give you more details at the end of next week, because right now I'm at the beach with just my phone..
Μέσος όρος βαθμολογίας: -
Σε απάντηση σε Dominique Bauer

Re: Hide breadcrumbing navigation in Lesson

από Cindy Weber -
Thanks Dominique! I would appreciate more details. I made some additional attempts without success. I find the breadcrumbing a nice backup, except when using lesson.
Μέσος όρος βαθμολογίας: -
Σε απάντηση σε Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

από Dominique Bauer -
Φωτογραφία Documentation writers Φωτογραφία Particularly helpful Moodlers Φωτογραφία Plugin developers
Hello Cinfy?,Someone else might give you the required few Javascript statements. They are quite simple if you know Javascript.

Otherwise, I would ask you to wait until Christmas.
Μέσος όρος βαθμολογίας: -
Σε απάντηση σε Cindy Weber

Re: Hide breadcrumbing navigation in Lesson

από Dominique Bauer -
Φωτογραφία Documentation writers Φωτογραφία Particularly helpful Moodlers Φωτογραφία Plugin developers

Hello Cindy,

Add the following code to Site administration / Appearance / Additional HTML / Within HEAD: 

<!-- Use no-nonsense jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

// Wait for the document to be loaded.
$(document).ready(function() {

    // Check if the URL contains "lesson", i.e. check if the page is part of a lesson.
    if (window.location.href.indexOf("lesson") > -1) {

        // Hide the breadcrumb.
        $(".breadcrumb").hide();

        // Reduce the size of the lesson icon.
        $(".modicon_lesson").css({"width":"30px","height":"30px"});

        // Remove the superfluous icon name label "LESSON".
        $(".page-header-headings div").hide();

        // Reduce the size of the Lesson title (smaller-->>h3, h4, h5, h6).
        $(".page-header-headings h1").attr("class", "h5");

    }
});
</script>

You can keep or remove "#page-navbar .breadcrumb {display: none;}", it won't make any difference.

Then, instead of that, you will get this

MoodleForum_20221227_0931.png MoodleForum_20221227_0932.png


All of the above relates to Moodle 4.1. Feel free to ask me if this doesn't work with Moodle 3.11.

Μέσος όρος βαθμολογίας:Useful (2)