Restore pre-version 4 appearance

Restore pre-version 4 appearance

by Eric Oberle -
Number of replies: 2

Hello, 

I don't see a definitive (or even very helpful) post on this....but...I just upgraded to version 4.0 and the information density is *far* too low for college courses.  Is there a theme or some CSS that can restore the much tighter appearance that was the norm in versions 3 ?   The icons are too big, and single lessons with 12 items now don't fit on two pages.....I need to find a way to put all the documents together neatly and have there be subordination under folders, etc. without so much vertical space being lost.  

I apologize if there is an obvious answer (is there a button to "restore version 3 icons?) or a theme that will just do the trick, but so far I can't find anything at all. 

best, 

Eric 

Average of ratings: Useful (1)
In reply to Eric Oberle

Re: Restore pre-version 4 appearance

by E Martin -
Hi Eric. I work with a group of BC (Canada) online schools and we were similarly trying to find a way to temper the Moodle 4 interface with the old Moodle 3 interface off which our courses were built (and hence off the prior information density) ... we converged on CSS hacks below, perhaps you will find inspiration (or not) in them (and btw, this code is essentially stolen from different posts in this forum smile

/* Eliminate white side margins in main course nav */
$course-content-maxwidth: 100% !default;

/* Get rid text labels ASSIGNMENT, URL etc */
.activitytitle .text-uppercase { display: none; }

/* Clean up course objects by occupying less space and removing borders */
.activity-item:not(.activityinline) { border: none; padding: 0.2rem; }

/* Reduce course nav icons down to smallest reasonable size */
.activityiconcontainer { width: 30px; height: 30px; }

Below is how we change the icon - below is an example of how we change the LTI icon.

/* Hide the old lTI icon */
#page-mod-lesson-view .activityiconcontainer img, .activitytitle.modtype_lti .activityiconcontainer img { display: none; }

/* And replace it with a new one */
#page-mod-lesson-view .activityiconcontainer, .activitytitle.modtype_lti .activityiconcontainer {
background: url("https://upload.wikimedia.org/wikipedia/commons/5/50/Closed_Book_Icon.svg");
background-size: 30px 30px; background-repeat: no-repeat; background-color: inherit; }
Average of ratings: Useful (3)