bb tour anz 2017 - workshop - enhancing learn css

Enhancing Learn 9.1 using CSS

Michael Garner

Sustainable Theming Practices

Styling the environment

Styling the environment

• Creates consistency for improved user Experience

• Sense of ownership and inclusion in the large enterprise solution set

• Can support innovative pedagogical practices

• And many more . . .

Planning…who do we involve…it’s important

• Involve Marketing and/or Corporate Web team . . . Why?

• Usability feedback from users

• Allow time– Run as a project or build ample time into upgrade

timeline– Storyboard ideas, create mockups, design brief

5

Creating your own design brief

Local development - Workstation Setup

• Developer VM–https://community.blackboard.com/docs/DOC-1104

• Zip Tool–Windows OS may have issues with native zip tool

• CSS Editor of your choice–Brackets (http://brackets.io/)

http://brackets.io/

Brackets HTML, CSS & JS Editor

Anatomy of a Bb Learn Theme

• Download the Bb Default 2016 Theme

• Extract Files

• Navigate to zip folder

Anatomy of Bb Learn Theme

• Two root folders–Core–Plugins

• Main focus – ‘core’ folder

• Core folder contains most of the CSS files used by Learn

Anatomy of a Bb Learn Theme

• The theme.css contains the stylesheet includes that get combined into the main theme file when uploaded. I prefer to make all the changes and additions to this file to minimise file edits

• NOTE: Theme.css is not referenced when viewing My Blackboard pages. app_nav.css is used

Customising the theme

• First, let’s change the tab background

• Right click in the tab background and select Inspect Element

Customising the theme

Customising the theme

• If making significant changes:

• Add css changes to end of app_nav.css rather than finding and changing original values

Customising the theme

• Can also break into additional files and import into theme.css

Customising the theme– responsive CSS

• You can use the 480/768.css files or include you own by placing CSS code in between

@media only screenand (min-width:320px) and (max-width:480px) {

.global-nav-bar .logout-link { width: 30px; }

.global-nav-bar { font-size: 13px; height: 30px; }

}

Deploying your custom theme

• Once you have updated the CSS files, change is complete, zip up core and plugins directories

• Using a command line script can expedite this process

Deploying your custom theme

• Upload zip file to System Admin > Brands and Themes > Theme & Palette Catalog

• Great article on automating this process using the content system–https://community.blackboard.com/docs/DOC-3285-customizing-the-blackboard-

learn-experience-with-css

• Create at least one course, instructor and student accounts for testing

Customising the theme

• Once you have updated the CSS files, change is complete, zip up core and plugins directories

• Using a command line script can expedite this process

Code

TestAdjust

Customising the theme – Reducing impact of upgrades

• Upgrades are a reality

• Plan theme updates into your upgrade plan

• Separate enhancements from original code and COMMENT appropriately

• Use a diff tool to review latest theme with your custom theme

Customisation – Reducing impact of upgrades

Reduce the pain of upgrades by minimising:

• Major page layout changes

• If using bootstrap elements, extract the required elements and adjust for inclusion in theme package. Do not simply include the bootstrap css files.

21

Some great theme examples

25

26

27

28

29

30

Considerations for SaaS – Learn 9.1 NOT ULTRA

For those considering a transition to the AWS SaaS hosting platform running Learn 9.1, some considerations:

• Continuous Delivery – updates every 2-4 weeks

• Ongoing theme updates

• Understanding the impact of your theme updates

31

Resources

• Blackboard Help: https://en-us.help.blackboard.com/Learn/Administrator/Hosting/User_Interface_Management/040_Brands_and_Themes/050_Themes/Learn_2016_Theme

• Customising the Blackboard Learn Experience: https://community.blackboard.com/docs/DOC-3285-customizing-the-blackboard-learn-experience-with-css

• Show us your Blackboard: https://community.blackboard.com/message/11768#comment-11768

For more information please contact me:

Michael.Garner@blackboard.com

@mikegarnr