This document discusses enhancing the Learn 9.1 learning management system through custom CSS theming. It provides guidance on involving stakeholders, setting up a local development environment, understanding the theme anatomy, customizing elements, deploying themes, reducing upgrade impacts, and resources for more information. Custom theming allows for consistency, ownership, and innovative practices while planning is important to involve others and allow time for design, testing, and upgrades.

1. Enhancing Learn 9.1 using CSS
Michael Garner
Sustainable Theming Practices

2. Styling the environment

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

4. 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
5

6. 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/)

7. http://brackets.io/
Brackets
HTML, CSS & JS Editor

8. Anatomy of a Bb Learn Theme
• Download the Bb Default 2016 Theme
• Extract Files
• Navigate to zip folder

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

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

11. Customising the theme
• First, let’s change the tab background
• Right click in the tab background and select Inspect Element

12. Customising the theme

13. Customising the theme
• If making significant changes:
• Add css changes to end of app_nav.css rather than finding and changing original values

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

15. 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 screen
and (min-width:320px) and (max-width:480px) {
.global-nav-bar .logout-link {
width: 30px;
}
.global-nav-bar {
font-size: 13px;
height: 30px;
}
}

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

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

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

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

20. 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. 21
Some great theme examples

25. 25

26. 26

27. 27

28. 28

29. 29

30. Considerations for SaaS – Learn 9.1 NOT ULTRA
30
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
31
• Blackboard Help: https://en-
us.help.blackboard.com/Learn/Administrator/Hosting/User_Interface_Management/04
0_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

32. For more information please contact me:
Michael.Garner@blackboard.com
@mikegarnr