Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theme customisation for beginners


Published on

As presented at iMoot 2015

Published in: Education
  • Be the first to comment

  • Be the first to like this

Theme customisation for beginners

  1. 1. Welcome
  2. 2. Agenda 1. Trademarks. 2.Introduction. 3.What would you like explained later? 4.Theme designer mode, debugging and URL Swapping. 5.Browser development tools. 6.Block border radius change. 7. Changing a layout to have no blocks. 8. Identifiying and using your own icons. 9. Page background colour & semi- transparent content area. 10.Block heading background colour setting. 11. Where to find help and progression. 12. Summary and homework. 13. 'Tell me how to....'.
  3. 3. Trademarks Bitnami – Firefox® is a registered trademark of the Mozilla Foundation. Ubuntu® is a registered trademark of Canonical Ltd - Windows® is registered trademark of the Microsoft Corporation. Oracle® is a registered trademark of Oracle® and/or its affiliates. Other names may be trademarks of their respective owners. MoodleTM is a registered trademark of 'Martin Dougiamas' – I am independent from the organisations listed above and am in no way speaking for or endorced by them.
  4. 4. Introduction Introduction: Customising your Moodle theme can be scary. I will show you how to both decipher a theme with tools and make some basic alterations. Prerequisites for trying things out for yourself: ● A test Moodle installation: See presentation course for details of my iMoot 2014 presentation. ● Shoelace (if desired): ● A little knowledge of CSS: Me: Gareth J Barnard – Course formats and themes developer, 'Themes' and 'Courses and course formats' forums moderator, small scale core developer, software engineer and educator.
  5. 5. What would you like explained later? In addition to the published agenda, is there a particular theme skill that you would like explained at the end? Have a think and time permitting I'll have a go at explaining how as many as possible can be done. Note down the idea and put in the chat when we get to 'Tell me how to....'.
  6. 6. Theme designer mode, Debugging and URL Swapping Theme designer mode: ● Allows changes to be apparent as soon as you refresh the page. ● Individual style sheets served separately rather than combined into one, so you can debug. ● Dramatically slows down page load time, so definitely development only with hardly any other users. Debugging: ● Shows code faults and development information in more detail. URL Swapping: ● Very useful setting where you can change theme with a HTTP 'GET' parameter in the URL, such as 'theme=clean' prefixed with '?' if there are no other parameters and '&' if there are. ● Great for getting out of problems if things break. ● Able to quickly compare two themes if something looks odd.
  7. 7. Browser development tools Most modern browsers have them. Features: ● Pulling apart the components of the page, both HTML, CSS and JS so that you can explore. ● Make temporary changes and see the effect. ● Lots of other debugging tools, such as 'network requests' and the 'console'.
  8. 8. Block border radius change 1. Using Shoelace for M2.9. 2. Discover what to change. 3. Create the CSS. 4. Place in 'Custom CSS' box. 5. See the effect.
  9. 9. Changing a layout to have no blocks Will change the 'report' layout. 1. Can be slightly different in each theme. 2. Demonstrated in: ● Shoelace – config.php. ● Clean via Bootstrap base config.php.
  10. 10. Identifiying and using your own icons 1. Shoelace already has the icons overriden, so will use 'Clean' to change a core and plugin icon. 2. Use the browser development tool to interrogate the HTML to find the 'code' that helps us identify the image. 3. Moodle uses 'SVG' files first, then falls back to 'png' / 'jpg' / 'gif' if the browser does not support them or there is no 'svg' available. Ref:
  11. 11. Page background colour & semi-transparent content area 1. Using Shoelace. 2. Use browser development tools to: ● Discover. ● Test idea, with: ● Body: #AAD7FD. ● Content: rgba(255, 255, 255, 0.5). 3. Examine theme 'config.php' for 'custom' stylesheet. 4. Implement in 'custom' stylesheet.
  12. 12. Block heading background colour setting 1. Using Shoelace as uses PHP LESS compiler. Will also work with More and Campus. Other themes will be more tricky as use older 'CSS pre-processing' mechanism. 2. We will: ● Discover the CSS. ● Define the LESS variable and selector in 'variables-shoelace.less' and 'shoelacecustom.less'. ● Create the setting in 'settings.php' and the required language strings. ● Implement the setting value assignment in 'lib.php'. Refs: and
  13. 13. Where to find help and progression Where to find help: Themes forum: Documentation: Developer tools: ● Chrome: ● Firefox: ● Firebug: ● Internet Explorer: Progression beyond the basics: ● LESS: ● jQuery: ● AMD (and Grunt): ● Grunt:
  14. 14. Summary and homework Summary We have learnt about: ● Setting up the environment for theme development. ● Browser development tools. ● Basic customisation. ● How to take things further. Homework Use what you have learnt to: ● Make a change to a theme. ● Take a screen shot of the change with evidence of what you did. Greenshot is a good tool for this: ● Post the screen shot with a description in the presentation course. ● Gain feedback from peers, me and a badge.
  15. 15. 'Tell me how to....' 1. Tell me how to.... 2. Q & A. 3. Thank you for attending and participating. Feedback always appreciated. 4.