Widening the content area in Moodle 4.0 (making it consistent)
HTML-код
- Опубликовано: 15 июл 2024
- Time for a somewhat controversial topic... The width of the content panel in Moodle 4.0. Some like it narrow, others like it wide...
I like mine consistent!
I do have a slight preference for the content to be wider. After all, I did spend the big money to get myself a big, wide, 4k screen. Also, I'm prefectly capable of resizing my browser window to my desired width and have no need for Moodle to dictate max-widths to me. But more importantly, the content pane widths are NOT consistent across modules. This is enormously jarring, and until this is resolved, "narrow" just is not practical.
Fortunately with one line of SCSS, this can be resolved. In this video, I rant about the problem and then demonstrate the solution.
Site admin → Appearance → Themes → Boost → Advanced settings
Add the following to the "Raw initial SCSS" box:
/* Make the content area use all the available space */
$course-content-maxwidth: 100% !default;
![NoCap - Yacht Party [Official Music Video]](http://i.ytimg.com/vi/rm_lvDln8kE/mqdefault.jpg)
You helped me a lot. It was annoying the visual changes between the pages. Finaly Moodle is now consistent.
Thank's from Brazil.
Glad to hear it helped. Obrigado!
That is exactly what I've always thought since the very moment I tried moodle out. Especialy on the front page, it just doesn't feel right to have this narrow space in the middle. In fact this is to jam it with things to the sides and then make it cluttered. It puts new visitors off.
Exactly! When I first saw the narrow strip in the middle, I thought I had just wasted a bunch of money buying a 24" screen. I like my Moodles like my monitors: widescreen enabled.
Clearly, having the power to customise the width to one's own liking is appreciated. Thanks for giving the viewers of your video this power!
Thank you. Yes, it was one of the first things I looked into after upgrading. I didn't buy a 30" 4k monitor so Moodle can hide in the corner, haha.
Great stuff - I was feeling your same pain - and now its sorted - thank you !
Glad it helped
This is great! Big fan 😋
Thank you.
Perfect, thank you!
Glad it helped!
Thanks a lot!
No worries!
Thank you!!!!
You're welcome! Thanks for watching!
Thank you :)
You're very welcome.
Thanks a lot
Glad it helped!
Great. I spent days to find how to do it.
Glad I could help
Thanks a lot for the snippet!
One issue though: I'm using databases (activities) to keep track of contact information, a ticket-system and so forth.
While the 100% page width works fine everywhere else, as soon as I click on a "database" activity it switches back to narrow view.
Any idea how to change this? I know basic css, but seemingly cannot find the correct css selector to force a width for that display option.
Thanks!
Hmm, not sure about this off the top of my head. Perhaps you could consider installing the Boost Union theme which allows for customising the width of the content area as a theme setting?
@@Wise-Cat Gonna try that, thanks for the idea, Wisecat!
Hi Wisecat, love your videos! I'm trying to test the migration of a moodle site on another test system, so I performed a backup of the database and then imported it to phpmyadmin on the test system. Then I changed dbname in config.php to the new db, because I read somewhere that's how you're supposed to switch between databases.
I got this error though: Could not find a top-level course!
Is there any step in between which I've missed?
Sounds like the import of the database didn't work properly. Try that again and confirm that the data is actually there before switching the db over. In particular the table mdl_course may be missing some records. Good luck.
Hi Wisecat. Thanks for the video. I am in agreement with your over the content width, and is the first thing I thought about when installing 4.0. I am using REM-UI and was hoping the same CSS may apply, but unfortunately I wasn't that lucky. I have been inspecting the pages on dashboard or course to try to identify where to apply max width 100% but not immediately obvious.
I may switch back to boost and make some comparrisons.
Did you find the option? Im also stuck with this same problem
I've never used REM-UI and don't know how they set their widths. Perhaps contact the developers, or look at the code using your browser's inspector to find the CSS selector you need? Sorry I can't be more help than this.
I did eventually end up with a solution to this. Like wise st says you can normally figure this out by inspecting and writing custom css but this requires change to a php file as well.
Solution below.
Moodle has limited its content width to 800px in Moodle 4.0.
To change the width across the site in the Edwiser RemUI theme, please navigate to the following directory on your Moodle installation: theme/remui/layout/common.php.
In this file add the following line of code at the end and save:
$templatecontext['bodyattributes'] = str_replace("limitedwidth", "innerfullwidth", $templatecontext['bodyattributes']);
Then navigate to Site Admin > Appereance > Themes > Edwiser RemUI > General Settings > Custom CSS and add the following CSS code to the Custom CSS section of the theme:
.innerfullwidth .header-maxwidth, .innerfullwidth .secondary-navigation{ max-width: 100% !important; }
Once completed, make sure you also purge caches on your Moodle site.
@@martinlidyard4314 Thanks so much for the follow up. This is good information to know. Cheers!
You really saved me! Thank you. Is it also possible to widening the content area just for a specific activity, e.g. quiz settings?
Yes, but you would need to also use the page identifier in the CSS. Look at the body tag on the page you want to widen and search for the CSS classes for that page. Then you should be able to nest the code inside a selector for that page.
@@Wise-Cat thank you so much for your answer, that helps a lot. if I want to change the content-width of the feedback activity entry page I do like you described:
#page-mod-feedback-show_entries .drawers .limitedwidth .main-inner {
max-width: 100%;
}
but it doesn't work, where are my mistakes? :-(
I'm not entirely sure myself. I don't get the chance to use the feedback module very often (we use questionnaire for the same function) so I'm at a bit of a loss to help you, sorry.
Hi WiseCat, thank you for your videos on moodle LMS, I am beginner with Moodle, but your videos gave me much of knowledge about what moodle actually is and how its works.
I will appreciate if you could make videos on moodle cloud configuration, means I want to know about what is the hardware configuration for aws server for 1000 concurrent user. From where I could find these kind of information. please help me regards this
Unfortunately I don't think I can be all that much help with your request though. My experience in server management is limited to much smaller scales than you are talking about. The largest Moodle I manage is around 8,000 users with concurrency rarely going over 200. So, it's a very different game. At my level I don't even need to do load balancing and even caching sees no significant boost in performance, so my knowledge on such topics is null.
One thing I can recommend you join is the "Large scale Moodle discussion" on Telegram. Here is the link: t.me/large_scale_moodle In there, you will find many more people who have experience working at scale. Recently, the following Github repo was shared in this group. I think it may be just what you're looking for...
github.com/aws-samples/aws-refarch-moodle#architecture
Good luck and happy Moodling!
Hello wisecat, so i have a problem here ive been going crazy about and i would apreciate some help, so i have never updated moodle since i got it due to fear of anything going wrong since i have lots of students in it and i cant play around with that, i have moodle version 3.1.1 (not 3.11, actually 3.1.1, i know, very old) i had been using a shared server service where they had mysql 5.6 but they now updated it to 8.0 and my moodke has completly stoped working, so i have to fix this asap, i have been told to upgrade moodle from 3.1.1 to 3.5 which is a more recent version, but ive followed all the steps and the updating gets stuck, on the progress bar it wont move, it wont do anything, ive left it for hours there and nothing, and im starting to get worried, so if you could give me some tips on what to possibly do id apreciate it, idk if this is the best place to contact you but im desperate man, thanks.
Sounds like a job for a Zoom call. Contact me via this webform and let's setup a call. wisecat.net/mod/page/view.php?id=23
I too am frustrated when people force formatting changes with product upgrades, but I should expect it with any open-source product. I tried your suggestions and it did NOT work. I am really working to find a solution, because it impacts 100% of the embedded videos I have included in my complete curriculum making the edit of these objects a huge task. Any suggestions from others others who were unsuccessful with this simple SCSS file addition?
The main reason this wouldn't work would be if you're using a different theme other than boost that does things differently. Can you confirm that you're using boost?
Other themes such as LearnR provide a checkbox that does the same thing AND makes the moodle look a lot nicer at the same time. I am tempted to do a video introducing that theme, it's very cool. Perhaps that is an alternate solution to your problem...
moodle.org/plugins/theme_learnr
Hi Cris
How can I apply this for the home page only? not course pages
I'm not sure. I would think you could enclose it in a pseudo-element like :not(.course-index) to limit its application. I've never tried anything like that though.
BTW, My name isn't Cris... So apologies if you didn't mean for me to respond.
Ohh sorry for confusion😓 I thought you are Chris Kenniburg the developer of LearnR theme
Wow! No, I'm not Chris Kenniburg, though I am a big fan of his work. It's truly an honour to be mistaken for him. ;-)
@@Wise-Cat I had the same question :(