7/23/17

1

MakingBoostdoMore

Dr.RickJerzTheUniversityofIowa

Situation…

• IwantmyMoodlelookinggreat!

• Problem:Everyonehasadifferentdefinitionofwhat“great”means

• Solution:Themes

• Three generalthemeoptions:1. Designyourowncustomtheme2. Useathird-partyplugintheme3. Useoneofthebuildinthemes

© 2017 rjerz.com2

ThreeThemeOptions

1. Designandproduceyourowntheme• Advantages:Youcandoanything• Disadvantages:Learningcurvesteep,time,cost

2. Usea3rd-partypluginthemes• Advantages:Manygreatthemes,quickto

deploy• Disadvantages:Shorterlearningcurve,long-

termsupportissometimesquestionable3. *Usebuiltinthemes(Clean,More,Boost)

• Advantages:Greatlong-termsupport,youdonothing

• Disadvantages:Theydonotlookasgreatasyoumightwant

© 2017 rjerz.com3

Rick’sApproach

• PreMoodle3.2(CleanandMorethemes)• IusedMore andmodified itwithCSS

• IPresented“CustomizingMOREtoImproveYourMoodle’sAppearance”atMoodleMootUS2016

(seewww.rjerz.com,linksatbottom)

• Moodle3.2andbeyond• WenowhaveBoost,thenewestcoretheme• Newfeatures(e.g.,thenavdrawer)andnewwaystoapplyCSS

• Boostseemstobethefuturedirection,Ilikeit.© 2017 rjerz.com4

Problem:MakingmyBoostlooklikeMore

MyMore DefaultBoost

© 2017 rjerz.com5

MyStrategy

• More (pre-3.2):usethemesettingsandCSStotweakMoodle’slook.Nocodemodification!

• Boost – alittledifferent,2tabbedpages• AdvancedSettings:TwoCSS(SCSS)dialogboxes• GeneralSettings:Presetfiles,veryfewothersettings

© 2017 rjerz.com6

7/23/17

2

Rick’s methodforBoost

• UsetheRawSCSS dialogbox(exactlylikeMore)

• Optionally:• MakechangestosettingsinyourownPreset file• Moveworking(tested)CSSfromtheRawSCSSdialogboxintoyourPreset file

• Eventually:AllmodificationsinPresetfile,easilysharable

© 2017 rjerz.com7

Howdoesonedothis?

• Usebrowser’sinspectiontools• ProbeforthewebpageelementofinterestanditsassociatedCSScode

• Makechangesandviewtheresults• CopychangedCSSintoyourRawSCSStextbox

• Whenyoucan’tfigureitout,postonmoodle.org

• Havefun!

© 2017 rjerz.com8

Example1:ChangeCourseFontColortoRed

• FindtheelementinFirefox’sWebDeveloperInspectortool

• Changesomesettings• CopythecodeintoRawSCSSdialogboxinBoost

• Exampleofthecode

a{color:red}

© 2017 rjerz.com9

Example2:NavbarColor

• Navbar:Changecolor

/*ThetopNavbarcharacteristics*/.navbar-light{background-color:#d1c8c1;//background-color:orange;}

• Note:WhenIduplicatemy“production”moodletomy“experimental”MAMPmoodle,Iswapthe“//”infrontofthelinestodistinguishmyexperimentalmoodlefrommyproductionmoodle

© 2017 rjerz.com10

Example3:HeadingTextSizesandLineSpacing

• Asmallerand“tighter”designisdesired

/*ImproveHeadingStyles*/h1,h2,h3,h4{line-height:100%;}h1{font-size:150%}h2{font-size:120%}h3{font-size:110%}h4{font-size:110%}

© 2017 rjerz.com11

Example4:Addabackgroundimage

• Ididn’tknowhowtodothis,soIaskedonmoodle.org

• HereistheCSScode

/*Addbackgroundimage*/body{background-image:url(https://rjerz.com/images/moodle_background_01.jpg);background-repeat:repeat;}

© 2017 rjerz.com12

7/23/17

3

WhatisaPresetfileandwhatdoesitlooklike?

• Beginwiththedefault.scssfile,renameittosomethingthatyoulike(Ilikerj-preset02.scss)

• Elementattributes• Youcanchangetheattributevaluesandviewtheresults

• CSScode• YoucanchangetheCSScode,andaddyourown

© 2017 rjerz.com13

UsingthePresetfiles?

• ExampleofchangingHeadingTextSizes• ExampleofaddingBackgroundImageCSScode

• LoadfileintoyourMoodle’sBoosttheme• Selectitfromthedropdown

• Note:thesePresetfilescanbecomeverypowerful.Itakeasimple approach.

© 2017 rjerz.com14

MymethodofusingthePresetfile

• WorkistheRawSCSSdialogboxfirst• Editthepresetfileinatexteditor• CuttheCSScodefromRawSCSSandpasteitintothePresetfile

• ReloadthepresetfileintoBoost• Seethatitworks!

© 2017 rjerz.com15

Results(current)

MyMore(moodle3.1) MyBoost(Moodle3.3)

© 2017 rjerz.com16

Summary

• Advantages ofmyapproach:• Uses“core”themes,goodlong-termsupport• Easytomaintainandmakechanges• Easywhenupdatingmoodle,codepersists• Easytomovetheappearancearoundtoothermoodles

© 2017 rjerz.com17

Summary

• Disadvantages:• CSSisalittle“technical”• Thereisstillalearningcurve• Whatisfuntoonepersoncanbeapaininthenecktoothers

• Notascoolassomeofthe3-partypluginthemes

© 2017 rjerz.com18

7/23/17

4

MyIssueswithBoost

• Unabletocollapseright-sideblocksVoteforMDL-57305

• Whatshouldbeinthenavdrawer?

Thereseemstobeagreatopportunitytogreatlyenhancethenavdrawerandmakeitbecomeavaluable“usercustomized”feature,farsurpassingcompetitorLMSs!

© 2017 rjerz.com19

AdditionalSupport

• Gotohttp://www.rjerz.com,followthelinksatthebottomforlastyear’sandthisyear’spresentations

• Additionalsupportforthispresentation,including:• Default.scssfile• Mycurrentpresetfile• RawSCSSCSScode• Presentationvideo

• Email:rick@rjerz.com• Findmeonmoodle.org

© 2017 rjerz.com20

TheEnd- Thankyou!

• ForPechaKuchapresentations,questionswillbeaskedcollectivelyattheendofthesession.

© 2017 rjerz.com21