making boost do more - rjerz.com...•pre moodle 3.2 (clean and more themes) •i used moreand...
TRANSCRIPT
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:[email protected]• Findmeonmoodle.org
© 2017 rjerz.com20
TheEnd- Thankyou!
• ForPechaKuchapresentations,questionswillbeaskedcollectivelyattheendofthesession.
© 2017 rjerz.com21