Easily Add custom #CSS to #Moodle #edtech

One of the underused aspects of Moodle is the ability to add custom CSS to themes without having to edit the theme files on the server.  On our site I have completely reskinned “formal white” to reflect the main corporate website without having to touch the server (although I do manually back up the CSS into a text file).  Another advantage of this is that it allows you to test CSS changes quickly and without switching on theme designer mode.

I recently gave a colleague some of my CSS, and it was only after a while that I realised they were unaware of this capability, so this is just a quick walk through.

All of the custom CSS is applied on a theme by theme basis, so firstly you need to find which theme you are currently using.  To find this find the theme selector page under:-

Site administration > Appearance > Themes > Theme selector

Once you know your default theme you need to find it in the list of themes in the site admin menu and click on it.  At the bottom of all of the theme options there is a large text box where you can paste or hand code your CSS.  As soon as you hit the save button your CSS changes will be active!

This entry was posted in Moodle. Bookmark the permalink.

One Response to Easily Add custom #CSS to #Moodle #edtech

  1. Pingback: Adding Custom #CSS to Moodle | Anything and eve...

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>