Themes

Hi Charles and Pat 

My previous post above, I think, solves your need of having the "My courses" section come before the "New courses" section,
as per your illustration that you attached in your post:

So this post contains an optional design addition - the "Accordion" technique of reducing clutter on the frontpage. I am happy to report that I have emerged from my laboratory with a sample solution. First I will show you what I've done. Then I will show you how I did it. If it's helpful, don't forget to vote me as the most helpful Moodle of 2017 on moodle.org. I need your votes.

Before I ramble on, I need to mention on my Moodle site, that I changed the words "New courses" into "New modules", and the words "My courses" into "My modules" using Home  ► Site administration  ► Language  ► Language customisation

So on my website, I display "New modules" in place of "New courses" and "My modules" in place of "My courses". But I bet that you have figured that one out.  Now that's out of the way, let me proceed.

Part 1. WHAT FRANKIE DID

Now I click on the link "New courses" (my "New modules"). The new course rectangular links appear.

The screen below shows you my frontpage after a user has logged in. He or she only sees the enrolled courses. And the "New courses" link is displayed, to be clicked upon if the user so wishes to.

If the user clicks the "New courses" (my "New modules") link, the full set of new courses will appear in accordion style.

So what have I achieved with this alchemy? I have de-cluttered my frontpage.

Part 2. HOW FRANKIE DID IT

2.1 Go to Site administration -> Appearance -> Themes -> Klass -> Header  and inside the Custom CSS section, type in the below CSS code:

       a.accordion {
           /* background-color: #eee; */
           color: #444;
           cursor: pointer;
           padding: 18px;
           width: 100%;
           border: none;
           text-align: left;
           outline: none;
           font-size: 15px;
           transition: 0.4s;
       }

       a.accordion.active, button.accordion:hover {
       /* background-color: #ddd; */
       }

       div.panel {
           padding: 0 18px;
           background-color: white;
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.2s ease-out;
       }

2.2 Create a subfolder named javascript inside the klass folder

2.3 Create a javascript file named accordion.js with this code inside it:

       var acc = document.getElementsByClassName("accordion");
       var i;
       for (i = 0; i < acc.length; i++) {
         acc[i].onclick = function() {
           this.classList.toggle("active");
           var panel = this.nextElementSibling;
           if (panel.style.maxHeight){
            panel.style.maxHeight = null;
           } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
           }
         }
       }

2.4 Store the accordion.js file inside the javascript subfolder

2.5 Edit the file /public_html/moodle/theme/klass/config.php
       and insert this line of code in it: $THEME->javascripts_footer = array('accordion'); 
       Like so:

Save your config.php file.

2.6  Edit your /public_html/moodle/theme/klass/renderers/course_renderer.php file (make sure you backup the original php file first!)

       Add in the yellow highlighted snippets of code:

Save your /public_html/moodle/theme/klass/renderers/course_renderer.php file.

That's it! I hope this helps. You may or may not want to do it this way, but at least you now know what is possible. 

You said:
> It is desirable that the administrator can turn-off the slider post-login.
>

Do you want the slider to be automatically hidden after the user has logged in?
Or do you want the slider to still show after the user has logged in, and the user can click a link/button to toggle-hide the slider? In which case an accordion link might be what you are looking for. The solution is similar to how I toggled on and off the "New courses" section.

You said: 
> It would also be useful if on that page there are two columns, one on the left and the other on the right so that general
>announcements etc can be fitted in.
>

As for this requirement I don't know yet how to add the extra left and right columns to the Klass theme. Perhaps someone else can assist you on this. I'm not a huge fan of a three-column frontpage because I think it makes the Moodle website look cluttered. But then, it's your website so the design is up to you.

My work is done here - for now. I can go for my lunch now, haha. In the meantime, keep calm and Moodle on!

Cheers and best regards 
Frankie Kam 
References:
http://www.w3schools.com/howto/howto_js_accordion.asp
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate