Welcome

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....'.ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

Trademarks

Bitnami – bitnami.com/trademark.

Firefox® is a registered trademark of the Mozilla Foundation.

Ubuntu® is a registered trademark of Canonical Ltd - www.ubuntu.com/legal/terms-and-policies/intellectual-property-policy

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' – moodle.com/trademarks.

I am independent from the organisations listed above and am in no way speaking for or endorced by them.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

IntroductionIntroduction:

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): moodle.org/plugins/view.php?plugin=theme_shoelace.

● A little knowledge of CSS: www.w3schools.com/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.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

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....'.

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.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

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'.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

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.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

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.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

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.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

Ref: docs.moodle.org/dev/Themes_overview#Files_and_folders

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.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

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'.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

Refs: docs.moodle.org/dev/Themes_overview#Compiling_LESS_on_the_fly and docs.moodle.org/dev/Creating_a_theme_settings_page

geek

-and

-pok

e.co

m/g

eeka

ndpo

ke/2

013

/9/1

8/t

he-a

rt-o

f-pr

ogra

mm

ing

Where to find help and progression

Where to find help:Themes forum: moodle.org/mod/forum/view.php?id=46.

Documentation: docs.moodle.org/dev/Themes.

Developer tools:● Chrome: developer.chrome.com/devtools.● Firefox: developer.mozilla.org/en/docs/Tools.● Firebug: getfirebug.com/faq/.● Internet Explorer:

msdn.microsoft.com/library/bg182326(v=vs.85).

Progression beyond the basics:● LESS: lesscss.org.● jQuery: docs.moodle.org/dev/jQuery.● AMD (and Grunt): docs.moodle.org/dev/Javascript_Modules.● Grunt: gruntjs.com.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

Summary and homework

SummaryWe have learnt about:

● Setting up the environment for theme development.

● Browser development tools.

● Basic customisation.

● How to take things further.

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g

HomeworkUse 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: getgreenshot.org.

● Post the screen shot with a description in the presentation course.

● Gain feedback from peers, me and a badge.

'Tell me how to....'

1. Tell me how to....

2. Q & A.

3. Thank you for attending and participating. Feedback always appreciated.

4. About.me/gjbarnard.

geek

-and

-pok

e.co

m/g

eeka

ndpo

ke/2

014

/7/3

1/ha

nsel

-and

-gee

kel

ww

w.ic

onfin

der.c

om/i

cons

ets/

49ha

nddr

awin

g