How do I find the css to edit?

How do I find the css to edit?

by Joshua Jones -
Number of replies: 2

This may seem like a really stupid question. I am new to Moodle and am used to WordPress where I can use browser inspect dev tools to inspect an item and easily see where the css file is located and what line the code is on.

For example, in the course list block I want to remove the grey background and hide the 'course' button. This is only an example though and I would want to edit various elements of the site.

I am using Moodle 3.7.1 and the theme Adaptable.

Average of ratings: -
In reply to Joshua Jones

Re: How do I find the css to edit?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
Well, Moodle and Wordpress work in different ways.
Moodle takes a variety of SCSS files and processes them to create the css and caches that.

You could take the time to find out exactly where the source code is and edit that, by using theme designer mode which prevents the caching and tells you which css file it is in (Adaptable uses css for most things, other themes are likely to use SCSS and presets which complicates finding the source) - but bear in mind that if you edit Adaptable's files your changes are likely to get overwritten on any update.

Perhaps a better (OK, 'easier' though maybe less technically correct) is simply to use the inspect tools as you are accustomed to, and then to write your css into the customcss setting in your theme. That will override the theme css as the custom css gets applied last. That setting also gets maintained through upgrades.

Richard
Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: How do I find the css to edit?

by Joshua Jones -
Thanks Richard, you've cut short hours of searching!
Average of ratings: -