Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS
-
Upload
blackboard-apac -
Category
Education
-
view
16 -
download
0
Transcript of Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS
![Page 1: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/1.jpg)
Enhancing Learn 9.1 using CSS
Michael Garner
Sustainable Theming Practices
![Page 2: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/2.jpg)
Styling the environment
![Page 3: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/3.jpg)
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 . . .
![Page 4: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/4.jpg)
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
![Page 5: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/5.jpg)
5
Creating your own design brief
![Page 6: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/6.jpg)
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/)
![Page 8: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/8.jpg)
Anatomy of a Bb Learn Theme
• Download the Bb Default 2016 Theme
• Extract Files
• Navigate to zip folder
![Page 9: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/9.jpg)
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
![Page 10: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/10.jpg)
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
![Page 11: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/11.jpg)
Customising the theme
• First, let’s change the tab background
• Right click in the tab background and select Inspect Element
![Page 12: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/12.jpg)
Customising the theme
![Page 13: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/13.jpg)
Customising the theme
• If making significant changes:
• Add css changes to end of app_nav.css rather than finding and changing original values
![Page 14: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/14.jpg)
Customising the theme
• Can also break into additional files and import into theme.css
![Page 15: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/15.jpg)
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; }
}
![Page 16: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/16.jpg)
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
![Page 17: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/17.jpg)
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
![Page 18: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/18.jpg)
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
![Page 19: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/19.jpg)
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
![Page 20: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/20.jpg)
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.
![Page 21: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/21.jpg)
21
Some great theme examples
![Page 22: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/22.jpg)
![Page 23: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/23.jpg)
![Page 24: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/24.jpg)
![Page 25: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/25.jpg)
25
![Page 26: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/26.jpg)
26
![Page 27: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/27.jpg)
27
![Page 28: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/28.jpg)
28
![Page 29: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/29.jpg)
29
![Page 30: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/30.jpg)
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
![Page 31: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/31.jpg)
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
![Page 33: Bb Tour ANZ 2017 - Workshop - Enhancing Learn CSS](https://reader031.fdocuments.in/reader031/viewer/2022030306/58d14cd71a28ab41128b4aff/html5/thumbnails/33.jpg)