How to ADD CSS STYLES to a MOODLE COURSE when you're not an admin
HTML-код
- Опубликовано: 23 авг 2024
- How to add CSS styles to a Moodle course - A tutorial for those who are not administrators.
►► NEW COURSE - How to use Moodle 4.0 (7+ hours of video training) ricoshae.com.a...
►► Useful links
Disclosure: Some of the links below go to my websites and some are affiliate links where I may earn a small commission if you make a purchase at no additional cost to you. As an Amazon Associate I earn from qualifying purchases.
Favourite Moodle themes
Edwiser REMUI - ricoshae.com.a...
Adaptable - moodle.org/plu...
Moove - moodle.org/plu...
Plugins
Edwiser - Rapid Grader- ricoshae.com.a...
Design software
Affinity Designer 2 - affinity.serif...
Affinity Photo 2 - affinity.serif...
Screen capture software
Screen flow by Telestream - ricoshae.com.a...
Most used online services
Canva - Design application - ricoshae.com.a...
Free pix - Photos and vector images - ricoshae.com.a...
Tech that I use
Laptop - MacBook pro - ricoshae.com.a...
Monitor - Dell U2720Q UltraSharp USB-C 27 Inch 4K UHD (3840x2160) Monitor - ricoshae.com.a...
Microphone - Rode NT USB - ricoshae.com.a...
Microphone - Shure MV7X XLR - ricoshae.com.a...
Audio interface - Claret 8 Pre - ricoshae.com.a...
Camera - Sony a33600 - ricoshae.com.a...
Programming tools
Sublime Text - ricoshae.com.a...
Github - ricoshae.com.a...
![Kodak Black - Sharp Vibes [Official Music Video]](http://i.ytimg.com/vi/oEV0OoLJeIs/mqdefault.jpg)
Priceless! Exactly what I needed...
No problem.
Nice one! I'm going to try this now and figure out how to adapt some table css styles to use with this!
This is fantastic! I can't wait to try it!
Please do!
try inline (in html) styling
Absolutely. Although you have to change this in every page then.
Woww!! Thanks a lot!!!
You're welcome!
Very useful tip! Is there a way to make this method work in question preview mode (question bank)? It seems that the custom HTML block is not shown there and CSS rules are not applied. Outside preview mode it works perfectly.
Not that I know of. Blocks are hidden to give you more room in the preview mode. I think there are a few places that blocks don't appear. Sorry - no easy solution.
@@Ricoshae Thank you. As a workaround (at least for question debugging purposes) I paste the css script code code inside every question. Kinda stupid, results in duplicated code.
I have also tried creating js/html files on an external server and link them in every question bank item that needs styling, but with no success. I suppose that Moodle prevents execution due to security limitations (?).
Examples:
const script = document.createElement("script")
script.type = "text/javascript"
script.src = "url/to/my-css-script.js"
script.async = false
document.head.appendChild(script)
@@KadiCompany Great workaround, but yes, a lot of work. I was just thinking that the Generico plugin could be a useful solution for that. If you create a generico template that has the javascript and CSS in it you can just add the filter to each question rather than the actual code. The Generico filter will add everything at runtime for you. {GENERICO:type=mycustomss} or something like this would go in each question. At least you can update the template globally without having to change every page.
@@Ricoshae Thank you very much for helpful tip. I will ask my admins if this can be installed and will share the results!
@@Ricoshae I asked my Moodle Admin about Generico plugin and he told me that Generico templates can be added only by admins globally (and not by ordinary course creators without administrative privileges). Being in that similar to other plugin, called "Snippet", we already have.
So it seems that Generico won't allow me to create and update my own css rule templates without asking admins each time for updating them globally. Is that right or are we missing something?
thank for this tutorial, is it possible to show video on moodle app only to prevent user from downloading the video, thanks
Hi Rues, I don't think it is possible to do this but I am not an expert on the Moodle App. I focus on the browser version as to me the app is really useful as a notifications tool but not as a content delivery tool. Sorry I can't be of much help on this one. Thanks, Chris
Ricoshae thanks, do you have any suggestion how to prevent user from downloading a video on moodle?
Do you mean a video uploaded to Moodle or a video embedded in the Moodle page?
I'm using Moodle 3.10.1. Edwiser Theme, followed all of the instructions on the video, but still didn't work. Upon inspection the console says: Uncaught ReferenceError: StyleElement is not defined
at view.php?id=..... Any idea why?
HI Diego,
Could you share a copy of the code you are using between the tags. This might help me find the issue. Thanks, Chris
@@Ricoshae Hi Chris, thank you so much for your reply. I had manually entered the code (then it must have been a typo I entered), but after copying and pasting the code from your website, it worked. Thanks a lot!! By the way, I'm happy taking your courses!!
Hi Chris, can the same method be applied to styling topics? Specifically i'd like to style the backgrounds of each topic a little bit to differentiate between them a bit on the main course page. I'm assuming by altering some parts of the CSS this would be possible even though this method applies to pages?
I don't think there is a practical way to do that. Once you go into a page, there doesn't seem to be a reference to the topic number, just to the cmid which doesn't really help.