Custom CSS in course or activity

Custom CSS in course or activity

by Alan Kmiecik -
Number of replies: 5

Is there a way to add CSS into the description of an activity to control how that activity displays.

This discussion seems to imply their is but it does not work:  https://moodle.org/mod/forum/discuss.php?d=174052

Average of ratings: -
In reply to Alan Kmiecik

Re: Custom CSS in course or activity

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

I know you want the activity description in a course to have styling, but is that one particular activity or all activities? One particular course or all courses? Do you have Site Administrator access?

Average of ratings: Useful (1)
In reply to Jon Bolton

Re: Custom CSS in course or activity

by Alan Kmiecik -

Given that link in initial post, it implies I can add <style>  tags to the description edit box that will work for anything in that activity.

For example, Wordpress has a plugin that enables custom CSS for each page.  I'm looking for something like that.  It's nice to have when needed.

Yes, on Site Admin access (and FTP to files, I'm game for getting into files to do it too)

Thanks

In reply to Alan Kmiecik

Re: Custom CSS in course or activity

by Alisa Natal -

It depends on the theme you are using, I believe. I use Academi and it is on Appearance/Themes/Academi and under custom CSS. Though, I have learned it's not the same as Wordpress. Any changes you make to the theme will also reflect in the back-end, so it is more cumbersome. 

I am not entirely sure the best method for making specific changes though (non-universal). I believe that changing the theme itself (unlike Wordpress) is the preferred method? 

I too am bridging that wide gap between Wordpress and Moodle so at least I can get you to where I am now! I still have a lot to learn, too. 

In reply to Alan Kmiecik

Re: Custom CSS in course or activity

by Guillermo Dova -
I would suggest to do this on the theme "Raw SCSS" option. (On Boost theme: advanced settings)
Use "course class" to apply this rules "only" to the course page and element you require.







Average of ratings: Useful (2)
In reply to Guillermo Dova

Re: Custom CSS in course or activity

by Alan Kmiecik -
Thanks, Those classes and ID's should do the trick.

I think Raw CSS in the theme is way to cumbersome. Too much clicking around and purge caches.

I discover that, a link to a CSS file in the Header HTML and then editing CSS file in an editor (Like Visual Studio Code) is much faster and bypasses the buffer.  And you get to see the CSS file and line number in DevTools.

Don't understand the Design Mode either, makes it too darn slow to be productive.