Sharing a new approach for consistent and accessible Blackboard course menu colour schemes specific to faculties, departments, or subject areas.

1. Colour me impressed?
Sharing a new approach for consistent and accessible Blackboard
course menu colour schemes specific to faculties, departments, or
subject areas.
Matthew Deeprose – Senior Learning Designer,
University of Southampton.
European Blackboard User Group: 8 December 2020.
#EuroBbUG
1
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
#EuroBbUG

2. Connect
Blog: https://thevleguru.blogspot.com/
Twitter: https://twitter.com/vleguru
YouTube: https://www.youtube.com/c/VLEGuru
Blackboard Community site:
https://community.blackboard.com/profile/27
Feel welcome to connect with me on LinkedIn:
https://www.linkedin.com/in/mattdeeprose/
#EuroBbUG 2
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

3. Shameless plugs
3
https://youtu.be/PbI-p0XOUBk
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

4. Shameless plugs
4
https://youtu.be/PbI-p0XOUBk
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

5. Shameless plugs
5
https://youtu.be/DfXdSLPguX4
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

6. Slides and other materials are available
https://matthewdeepros
e.github.io/colormeimpr
essed.html
6
To save time, some slides are hidden,
download the full deck for more.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

7. What’s in scope?
In Scope:
Blackboard Original
Experience.
Out of Scope:
Blackboard Ultra.
Ultra-base navigation?
7
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

8. 8
Four stages of Bb
theme
customisation
taking the
audience from
Bluffer to
Innovator.
Accessibility
considerations for
theme
customisation,
referring to UK /
European
regulation.
A holistic look at Bb
theme accessibility,
presented to a
global audience.
Explaining why
Ally isn’t the
answer to all of the
accessibility issues
within Blackboard.
https://youtu.be/z0x2zGLkiaE
https://youtu.be/PhHVVU6qplU
Trailer:
https://youtu.be/vtvujtS4FcQ
https://youtu.be/jZcuHYopOa8
https://youtu.be/R7Apm_K2808
Continuing a theme…
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

9. In this presentation I will share
• a new approach?
9
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

10. In this presentation I will share
• a new approach?
• …for consistent and
accessible Blackboard
course menu colour
schemes
10
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

11. In this presentation I will share
• a new approach?
• …for consistent and
accessible Blackboard
course menu colour
schemes
• …specific to faculties,
departments, or subject
areas.
11
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

12. 12
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

13. Questions
Put your questions and
comments in the chat.
We will go through them
at the end.
13
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

14. The brief
14
Design a tailor-made course menu structure for our Faculty of Arts and
Humanities’ Blackboard courses.
Create process for building new Blackboard courses for 20-21 with this
template.
Apply a consistent, on-brand, colour scheme to course menus, varying by
school and department.
Assist with course redesign.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

15. The brief
15
Design a tailor-made course menu structure for our Faculty of Arts and
Humanities’ Blackboard courses.
Create process for building new Blackboard courses for 20-21 with this
template.
Apply a consistent, on-brand, colour scheme to course menus, varying by
school and department.
Assist with course redesign.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

16. The brief
16
Design a tailor-made course menu structure for our Faculty of Arts and
Humanities’ Blackboard courses.
Create process for building new Blackboard courses for 2020-21 with this
template.
Apply a consistent, on-brand, colour scheme to course menus, varying by
school and department.
Assist with course redesign.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

17. The brief
17
Design a tailor-made course menu structure for our Faculty of Arts and
Humanities’ Blackboard courses.
Create process for building new Blackboard courses for 20-21 with this
template.
Apply a consistent, on-brand, colour scheme to course menus, varying by
school and department.
Assist with course redesign.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

18. 18
Default course menu
Humanities Course Menu
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

19. 19
History
Film
English
Archaeology

20. Poll Question
20
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

21. Do you build Bb courses using templates?
1 = Yes
2 = No
21
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

22. Faculty of Arts and Humanities Bb
Templates Project
Template
implementation
Colour
Schemes
Change
Rollover
Process
Assist with
course
redesign
22
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

23. Faculty of Arts and Humanities Bb
Templates Project
Template
implementation
Colour
Schemes
Change
Rollover
Process
Assist with
course
redesign
23
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

24. Choices of templates
24
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

25. Choices of templates
25
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

26. Choices of templates
26
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

27. Technical Implementation: Templates
Receive central
data.
Separate
courses to be
built from
templates.
Build template
based courses.
Build standard
courses.
Verification and
reporting
27
BizTalk Bash Bash / SIS API
Bash / SIS API Bash
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

28. Poll Question
28
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

29. If you use templates, do you automate course
creation with them?
1 = Yes, using SIS.
2 = Yes, using REST API.
3 = No, we do it by hand.
29
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

30. Faculty of Arts and Humanities Bb
Templates Project
Template
implementation
Colour
Schemes
Change
Rollover
Process
Assist with
course
redesign
30
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

31. 31
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

32. Faculty of Arts and Humanities Bb
Templates Project
Template
implementation
Colour
Schemes
Change
Rollover
Process
Assist with
course
redesign
Documentation
Change
Management
32
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

33. Documentation / Change Management
Matthew Deeprose 33
#EuroBbUG

34. Documentation / Change Management
Matthew Deeprose 34
#EuroBbUG

35. Documentation / Change Management
Matthew Deeprose 35
#EuroBbUG

36. Faculty of Arts and Humanities Bb
Templates Project
Template
implementation
Colour
Schemes
Change
Rollover
Process
Assist with
course
redesign
36
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

37. Faculty of Arts and Humanities Bb
Templates Project
Template
implementation
Colour
Schemes
Change
Rollover
Process
Assist with
course
redesign
37
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

38. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
38
#EuroBbUG

39. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
39
#EuroBbUG

40. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
40
#EuroBbUG

41. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
41
#EuroBbUG

42. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
42
#EuroBbUG

43. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
43
#EuroBbUG

44. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
44
#EuroBbUG

45. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
45
#EuroBbUG

46. Which colours?
46
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

47. 47
https://go.soton.ac.uk/uosbrand
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

48. #EuroBbUG 48
History
Film
English
Archaeology

49. #EuroBbUG Matthew Deeprose 49

50. #EuroBbUG 50

51. Arts and Humanities?
Matthew Deeprose 51
#EuroBbUG

52. Staff / Students / Modules by Faculty
Matthew Deeprose 52
876
1777
2150 2051
993
6560
6925
8255
2163
9707
1004 1004
700
140
983
0
2000
4000
6000
8000
10000
12000
Faculty of Arts and Humanities Faculty of Environmental and Life
Sciences
Faculty of Engineering and Physical
Sciences
Faculty of Medicine Faculty of Social Sciences
Staff Students Modules
#EuroBbUG

53. Modules by Faculty
Matthew Deeprose 53
#EuroBbUG

54. Matthew Deeprose 54
Faculty School ModulesDepartment Modules
Faculty of
Arts and
Humanities
Arts and Humanities - Central 1
Winchester School of Art 187
School of Humanities
36
Archaeology 67
English 77
Film Studies 47
History 98
Modern Languages and
Linguistics
254
Music 68
Philosophy 43
Academic Centre for
International Students
126
1004 modules – 26% of all UoS modules
#EuroBbUG

55. Matthew Deeprose 55
#EuroBbUG

56. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
56
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

57. Organised / intuitive structure is consistently
valued by students
57
0%
5%
10%
15%
20%
25%
30%
35%
40%
45%
2015 2016 2017 2018 2019
Taken from VLE Awards
webinar by Anna Ruff
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

58. Bring an intuitive
feel.
Reduce
cognitive load.
Exhibit
professionalism.
Create harmony.
The Benefits of Visual Consistency
58
#EuroBbUG
“5 Methods to Achieve Visual Consistency in eLearning”, Karla Gutierrez
https://www.shiftelearning.com/blog/visual-consistency-in-elearning
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

59. Bring an intuitive
feel.
Reduce
cognitive load.
Exhibit
professionalism.
Create harmony.
The Benefits of Visual Consistency
59
#EuroBbUG
“5 Methods to Achieve Visual Consistency in eLearning”, Karla Gutierrez
https://www.shiftelearning.com/blog/visual-consistency-in-elearning
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

60. Bring an intuitive
feel.
Reduce
cognitive load.
Exhibit
professionalism.
Create harmony.
The Benefits of Visual Consistency
60
#EuroBbUG
“5 Methods to Achieve Visual Consistency in eLearning”, Karla Gutierrez
https://www.shiftelearning.com/blog/visual-consistency-in-elearning
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

61. Bring an intuitive
feel.
Reduce
cognitive load.
Exhibit
professionalism.
Create harmony.
The Benefits of Visual Consistency
61
“5 Methods to Achieve Visual Consistency in eLearning”, Karla Gutierrez
https://www.shiftelearning.com/blog/visual-consistency-in-elearning
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

62. Consistency is key in online learning
“faculty… made changes to the language, layout and
colors to personalize each course… it created
confusion and a lack of consistency from course to
course.
…this lack of consistency contributed to confusion in
course preparation and management.”
1. Scutelnicu G, Tekula R, Gordon B, Knepper HJ. Consistency is key in online learning: Evaluating student and instructor perceptions of a
collaborative online-course template. Teaching Public Administration. 2019;37(3):274-292. doi:10.1177/0144739419852759
Matthew Deeprose 62
#EuroBbUG

63. Consistency is key in online learning
“faculty… made changes to the language, layout and
colors to personalize each course… it created
confusion and a lack of consistency from course to
course.
…this lack of consistency contributed to confusion in
course preparation and management.”
1. Scutelnicu G, Tekula R, Gordon B, Knepper HJ. Consistency is key in online learning: Evaluating student and instructor perceptions of a
collaborative online-course template. Teaching Public Administration. 2019;37(3):274-292. doi:10.1177/0144739419852759
Matthew Deeprose 63
#EuroBbUG

64. Common Framework for Online Education
64
https://sotonac.sharepoint.com/teams/chep/SitePages/common-framework.aspx
Bobbi Moore Helen Carmichael
The Centre for Higher Education
Practice (CHEP)
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

65. Seven elements of good design
65
Structure
Engagement
Peer to peer
interaction
Connecting
the campus
Accessible
and Inclusive
content
Assessment
and
feedback
Organisation
Belonging
to UoS
5. Connecting the campus
Students who have a clear sense of belonging and
identity with their programme and their university
are more likely to succeed. This will be important
for all students, and particularly those joining for
the first time into the online environment.
Finding ways to incorporate and
profile UoS research and community activities will
enhance this sense of connection and belonging.
Common Framework for Online Education, 2020
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

66. Connecting the campus?
66
https://go.soton.ac.uk/uosbrand
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

67. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
67
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

68. Poll Question
68
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

69. Do you understand how to use colour
contrast accessibly?
1 = Yes
2 = No
69
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

70. Matthew Deeprose 70
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Equality Act 2010
Does not apply in Northern
Ireland
Disability Discrimination Act
1995
Applies to all UK
Standard - EN 301 549
Accessibility requirements suitable for public
procurement of ICT products and services in Europe
REGULATION (EU) No 1025/2012 OF THE
EUROPEAN PARLIAMENT AND OF THE
COUNCIL
WCAG 2.X Level AA
The “failure to make a reasonable adjustment” definition in the 2018 SI refers to the
detail already determined in the above two acts.
Directive (EU) 2016/2102
On the Accessibility of the websites and mobile
applications of public sector bodies
#EuroBbUG

71. 06/11/2021 Matthew Deeprose 71
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018

72. Matthew Deeprose 72
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
#EuroBbUG

73. Matthew Deeprose 73
Statutory Instrument 2018 No. 952
The Public Sector Bodies (Websites and Mobile
Applications) No. 2 Accessibility Regulations 2018
Standard - EN 301 549
Accessibility requirements suitable for public
procurement of ICT products and services in Europe
#EuroBbUG

74. 06/11/2021 Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
74
Standard - EN 301 549
Accessibility requirements suitable for public
procurement of ICT products and services in Europe

75. 06/11/2021 Matthew Deeprose
https://www.linkedin.com/in/mattdeeprose/
75
WCAG 2.X Level AA

76. How is colour contrast calculated?
1. Determine the relative luminance of two colours.
2. Compare the relative luminance of the
background and foreground colour.
See https://planetcalc.com/7779/
Matthew Deeprose 76
#EuroBbUG

77. Matthew Deeprose 77
https://www.24a11y.com/2019/color-theory-and-contrast-ratios/
#EuroBbUG

78. whocanuse.com
Created by Corey Ginnivan
@coreyginnivan
Matthew Deeprose 78
Or use an online
checker
#EuroBbUG

79. By the way…
Matthew Deeprose 79
A new method of testing colour
contrast is under discussion by
“Taskforce Silver”.
https://github.com/w3c/wcag/issues/
695
#EuroBbUG

80. 80
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

81. The ratios to remember
3:1
4.5:1
7:1
81
Minimum for
Graphical
Objects / UI
Minimum for
Text
Enhanced level
for Text
AAA
AA
(not to scale)
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

82. 82
Four stages of Bb
theme
customisation
taking the
audience from
Bluffer to
Innovator.
Accessibility
considerations for
theme
customisation,
referring to UK /
European
regulation.
A holistic look at Bb
theme accessibility,
presented to a
global audience.
Explaining why
Ally isn’t the
answer to all of the
accessibility issues
within Blackboard.
https://youtu.be/z0x2zGLkiaE
https://youtu.be/PhHVVU6qplU
Trailer:
https://youtu.be/vtvujtS4FcQ
https://youtu.be/jZcuHYopOa8
https://youtu.be/R7Apm_K2808
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

83. 83
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

84. 84
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

85. 85
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

86. 86
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

87. 87
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

88. 88
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

89. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose 89
#EuroBbUG

90. One template for each
template variation.
Ten colour schemes = ten
templates.
Standard approach for Blackboard course
templates
90
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

91. One template for each
template variation.
Ten colour schemes = ten
templates.
Standard approach for Blackboard course
templates
Matthew Deeprose 91
#EuroBbUG

92. BB Course template
Matthew Deeprose 92
Faculty School Department
Faculty of Arts and
Humanities
Arts and Humanities - Central
Winchester School of Art
School of Humanities
Archaeology
English
Film Studies
History
Modern Languages and
Linguistics
Music
Philosophy
Academic Centre for
International Students
#EuroBbUG

93. Disadvantages of standard approach
93
Colour scheme can be changed by
instructor later.
If customer requests colours to be
changed, only new courses will be
affected.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

94. Disadvantages of standard approach
94
Colour scheme can be changed by
instructor later.
If customer requests colours to be
changed, only new courses will be
affected.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

95. My approach
95
The course menu structure is the same for all Arts and
Humanities modules, so let’s use one template.
Use JSHack to
 Load a CSS file with each department’s
colour scheme and deploy based on course
id.
 Hide option for instructors to change
colour scheme.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

96. BB Course template
96
Faculty School Department
Faculty of Arts and
Humanities
Arts and Humanities - Central
Winchester School of Art
School of Humanities
Archaeology
English
Film Studies
History
Modern Languages and
Linguistics
Music
Philosophy
Academic Centre for
International Students
CSS File
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

97. One template = reduced
complexity and maintenance.
Using CSS means colours can
be adjusted at any time.
Benefits
97
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

98. One template = reduced
complexity and maintenance.
Using CSS means colours can
be adjusted at any time.
Benefits
98
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

99. The CSS
99
CSS = Cascading Style Sheet
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

100. 100
/* Change colour of subheader */
#courseMenuPalette h3 span {
color: #TEXT_COLOUR !important; }
/* Set menu item text */
#courseMenuPalette div.navPaletteContent ul li a,
#courseMenuPalette h3 a,
#previewCourseMenu h3 a,
.navPaletteContent h3 a.submenuLink:before, .
navPaletteContent h3 a.submenuLink_active:before,
#courseMenuPalette div.navPaletteContent ul li a span,
#courseMenuPalette .navPaletteContent .subhead {
color: #TEXT_COLOUR; }
/* Set menu background */
#courseMenuPalette div.navPaletteContent,
#courseMenuPalette_contents li,
#courseMenuPalette_paletteTitleHeading h3 {
background-color: #BACKGROUND_COLOUR !important; }
/* Hide colour menu settings */
li#menuDesignElement {
display: none; }
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

101. 101
/* Change colour of subheader */
#courseMenuPalette h3 span {
color: #TEXT_COLOUR !important; }
/* Set menu item text */
#courseMenuPalette div.navPaletteContent ul li a,
#courseMenuPalette h3 a,
#previewCourseMenu h3 a,
.navPaletteContent h3 a.submenuLink:before, .
navPaletteContent h3 a.submenuLink_active:before,
#courseMenuPalette div.navPaletteContent ul li a span,
#courseMenuPalette .navPaletteContent .subhead {
color: #TEXT_COLOUR; }
/* Set menu background */
#courseMenuPalette div.navPaletteContent,
#courseMenuPalette_contents li,
#courseMenuPalette_paletteTitleHeading h3 {
background-color: #BACKGROUND_COLOUR !important; }
/* Hide colour menu settings */
li#menuDesignElement {
display: none; }
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

102. Subheaders
102
The sub header in
Blackboard is a fixed colour.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

103. #EuroBbUG 103

104. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
104
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

105. About JSHack
Developed by University of
the Sunshine Coast.
Winner of Blackboard
learn™ innovative
development (catalyst)
award.
A Building Block that gives
administrators the ability to
customise their Blackboard
Learn instances by
inserting HTML and
JavaScript into pages
where it was not possible
before.
105
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

106. 106
How using JSHack increased
engagement with
https://elearn.southampton.ac.uk
from within Blackboard by 2000% +
https://youtu.be/PhHVVU6qplU
Trailer: https://youtu.be/vtvujtS4FcQ
0
5000
10000
15000
20000
25000
2018 2019
Week 0 to Week 4
Page views where referral was
blackboard.soton*
0
1,000
2,000
3,000
4,000
5,000
6,000
Week
0-Mon
Week
0-Tue
Week
0-Wed
Week
0-Thu
Week
0-Fri
Week
0-Sat
Week
0-Sun
Week
1-Mon
Week
1-Tue
Week
1-Wed
Week
1-Thu
Week
1-Fri
Week
1-Sat
Week
1-Sun
Week
2-Mon
Week
2-Tue
Week
2-Wed
Week
2-Thu
Week
2-Fri
Week
2-Sat
Week
2-Sun
Week
3-Mon
Week
3-Tue
Week
3-Wed
Week
3-Thu
Week
3-Fri
Week
3-Sat
Week
3-Sun
Week
4-Mon
Week
4-Tue
Week
4-Wed
Week
4-Thu
Week
4-Fri
Week
4-Sat
Week
4-Sun
2018 2019
elearn.soton page views per day: week 0 to week 4 2018 vs 2019
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

107. The process
107
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

108. 108
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
Include Exclude
ENGL.*, CMRC6014.*,
CMRC6014.*, HUMA1040.*,
HUMA3011.*, HUMA6015.*,
HUMA6017.*
ENGL3067.*, ENGL9001.*,
ENGL9002.*, ENGL9003.*,
ENGL9004.*, ENGL9005.*,
ENGL9007.*, ENGL9008.*,
ENGL9009.*, ENGL9010.*,
ENGL9011.*, ENGL9012.*,
ENGL9013.*, ENGL9014.*,
ENGL9015.*, ENGL9016.*,
ENGL9042.*, ENGL9090.*,
ENGL9092.*, ENGL9092.*
Mapping
subject
areas to
schools
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

109. 109
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
/* Change colour of subheader */
#courseMenuPalette h3 span {
color: #FFFFFF !important; }
/* Set menu background */
#courseMenuPalette div.navPaletteContent,
#courseMenuPalette_contents li,
#courseMenuPalette_paletteTitleHeading h3 {
background-color: #8D3970 !important; }
/* Set menu item text to #FFFFFF */
#courseMenuPalette div.navPaletteContent ul li a,
#courseMenuPalette h3 a,
#previewCourseMenu h3 a,
.navPaletteContent h3 a.submenuLink:before, .
navPaletteContent h3 a.submenuLink_active:before,
#courseMenuPalette div.navPaletteContent ul li a span,
#courseMenuPalette .navPaletteContent .subhead {
color: #FFFFFF; }
/* Hide colour menu settings */
li#menuDesignElement {
display: none; }
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

110. 110
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

111. 111
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
The expression is parsed
using Apache Java Expression
Language (JEXL)
The Blackboard Context
object can be accessed via the
variable 'context'.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

112. 112
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
The expression is parsed
using Apache Java Expression
Language (JEXL)
The Blackboard Context
object can be accessed via the
variable 'context'.
One line box for
entering restrictions.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

113. 113
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
Advanced Expression is Advanced Expression is
not
context.course.courseId =~ "^ENGL.*$" ||
context.course.courseId =~ "^CMRC6014.*$" ||
context.course.courseId =~ "^CMRC6014.*$" ||
context.course.courseId =~ "^HUMA1040.*$" ||
context.course.courseId =~ "^HUMA3011.*$" ||
context.course.courseId =~ "^HUMA6015.*$" ||
context.course.courseId =~ "^HUMA6017.*$"
context.course.courseId =~ "^ENGL3067.*$" ||
context.course.courseId =~ "^ENGL9001.*$" ||
context.course.courseId =~ "^ENGL9002.*$" ||
context.course.courseId =~ "^ENGL9003.*$" ||
context.course.courseId =~ "^ENGL9004.*$" ||
context.course.courseId =~ "^ENGL9005.*$" ||
context.course.courseId =~ "^ENGL9007.*$" ||
context.course.courseId =~ "^ENGL9008.*$" ||
context.course.courseId =~ "^ENGL9009.*$" ||
context.course.courseId =~ "^ENGL9010.*$" ||
context.course.courseId =~ "^ENGL9011.*$" ||
context.course.courseId =~ "^ENGL9012.*$" ||
context.course.courseId =~ "^ENGL9013.*$" ||
context.course.courseId =~ "^ENGL9014.*$" ||
context.course.courseId =~ "^ENGL9015.*$" ||
context.course.courseId =~ "^ENGL9016.*$" ||
context.course.courseId =~ "^ENGL9042.*$" ||
context.course.courseId =~ "^ENGL9090.*$" ||
context.course.courseId =~ "^ENGL9092.*$" ||
context.course.courseId =~ "^ENGL9092.*$"
Mapping
subject
areas to
schools
Mapping
subject
areas to
schools
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

114. 114
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

115. 115
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

116. 116
Check the
course id
Apply CSS
file?
Colour
scheme
applied.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

117. Other uses of this technique
117
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

118. Other uses of this technique
118
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

119. Other uses of this technique
119
#EuroBbUG
Based on
https://github.com/humsstel/blackboard_hacks
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

120. Other uses of this technique
120
#EuroBbUG
Based on
https://github.com/humsstel/blackboard_hacks
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

121. Better Blackboard Help
121
https://youtu.be/PhHVVU6qplU
Trailer:
https://youtu.be/vtvujtS4FcQ
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

122. 122
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

123. 123
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

124. 124
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

125. 125
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

126. Why stop at Course Menus?
126
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

127. 127
FILM3018 led by
Professor Michael Williams.
(Used with permission).
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

128. 128
FILM3018 led by
Professor Michael Williams.
(Used with permission).
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

129. Dark mode?
129
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

130. Dark mode?
130
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

131. Using JSHack
131
Quick, immediate impact.
Lots of potential for further development.
Easier than you may think.
Not supported for use in Ultra.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

132. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
132
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

133. 133
Faculty
code
Faculty
description
School
code
School
description
Department
code
Department
description
A1
Faculty of Arts
and
Humanities
NX
Arts and Humanities -
Central
FH
Winchester School of
Art
AR School of Humanities
MH Archaeology
PL English
LT Film Studies
RG History
GC Modern Languages and Linguistics
NC Music
FJ Philosophy
HG
Academic Centre for International
Students
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

134. 134
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

135. 135
Curriculum
Innovation
Programme
Research
Methods
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

136. Subj
Code
Crse NumberCourse Long Title Sub Faculty Unit Sub Faculty Name
HUMA 1038 Introduction to Ethnography: Food and Culture MH Archaeology
HUMA 1040 Humanities, the Human and the Non-Human PL English
HUMA 2007 Humanities University Ambassadors Scheme (Modern Languages) GC Modern Languages
HUMA 2008 The Life and Afterlife of the Vikings MH Archaeology
HUMA 2012 Study Abroad Preparation Module GC Modern Languages
HUMA 2013 How the Arts Work: a practical introduction to cultural economics NC Music
HUMA 2016 Arabian Nights and Days: The World of the 1001 Nights MH Archaeology
HUMA 2023 Issues in Latin American Popular Music and Culture NC Music
HUMA 2024 Learning about Culture: Introduction to Ethnography GC Modern Languages
HUMA 3009 Humanities Undergraduate Ambassador Scheme Yr 3 AR School of Humanities
HUMA 3011 Narrative Non-Fiction: The Interdisciplinary Art PL English
HUMA 3013 Year Abroad Report Module for Humanities Students GC Modern Languages
HUMA 3019 Academic English for Business HG ACIS
HUMA 3020 Issues in Latin American Popular Music and Culture NC Music
HUMA 3021 German-Jewish Writing Across the Twentieth Century GC Modern Languages
HUMA 5003 Cultural Perspectives AR School of Humanities
HUMA 5004 Research Project HG ACIS
HUMA 5011 Critical and Contextual Thinking for Masters Study (24 weeks) HG ACIS
HUMA 5014 Critical and Contextual Thinking for Masters Study (12 weeks) HG ACIS
HUMA 5015 English for Masters Study (12 weeks) HG ACIS
HUMA 5017 Critical and Contextual Thinking for Masters Study (24 weeks HG ACIS
HUMA 5017 Critical and Contextual Thinking for Masters Study (24 weeks HG ACIS
HUMA 6015 Narrative Non-Fiction: The Interdisciplinary Art PL English
HUMA 6016 English for Masters Study (24 Weeks) HG ACIS
HUMA 6017 Remaking Rome PL English
HUMA 6021 Academic English for Health and Medicine (Pre-Masters) AR School of Humanities
136
6 different departments
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

137. HUMA**** Distribution
School / Department Number of HUMS modules
ACIS 8
Archaeology 3
English 4
Modern Languages 5
Music 3
School of
Humanities
3
137
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

138. 138
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

139. Lessons
139
Don’t make assumptions about the data.
Ask the customer to check and
verify before implementation.
And make sure they have time to so 
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

140. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
140
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

141. Feedback
141
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

142. Feedback
142
There was
remarkably little
fuss about the
colours.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

143. Feedback
143
A couple of people complained via their
DOPs about having a colour scheme
imposed on them.
The Faculty's line on this was - it was
compulsory, unless the individual could
give a good reason why not to comply.
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

144. Feedback
144
[We were asked] if
we'd considered
accessibility...
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

145. Feedback
Matthew Deeprose 145
I haven't received any
comment about the colour
schemes.
No news is good news!
#EuroBbUG

146. Feedback
Matthew Deeprose 146
I like the colour
scheme...
#EuroBbUG

147. 39% of modules now use templates
147
Hums: 1,004
SOHS: 447
Remaining modules: 2,392
#EuroBbUG Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

148. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
148
#EuroBbUG

149. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
149
#EuroBbUG

150. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
150
#EuroBbUG

151. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
151
#EuroBbUG

152. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
152
#EuroBbUG

153. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
153
#EuroBbUG

154. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
154
#EuroBbUG

155. Colour
Schemes
Pedagogy
Accessibility
CSS
JSHack
Mapping
subject
areas to
schools
Feedback
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
155
#EuroBbUG

156. Were you impressed?
Sharing a new approach for consistent and accessible Blackboard
course menu colour schemes specific to faculties, departments, or
subject areas.
Matthew Deeprose – University of Southampton
156
#EuroBbUG
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html

157. Thank you!
Matthew Deeprose
https://matthewdeeprose.github.io/colormeimpressed.html
157
https://matthewdeeprose.github.io/colormeimpressed.html
#EuroBbUG

158. Matthew Deeprose 158
Out of scope In scope When
Websites published on or after 23 September 2018. After 22nd September 2019.
Websites published before 22 September 2018. After 22nd September 2020.
Mobile apps. After 22nd June 2021.
Office file formats published before 23rd September
2018, unless such content is needed for active
administrative processes relating to the tasks
performed by the public sector body.
Office file formats published from 23 September 2018, and any
published before 23rd September 2018 which are needed for
active administrative processes relating to the tasks performed
by the public sector body.
After 22nd September 2019.
Pre-recorded time-based media published before 23rd
September 2020.
Pre-recorded time-based media published on or after 23rd
September 2020.
After 23rd September 2020.
Live time-based media.
Recordings of live time-based media that are used on or after
23rd September 2020.
After 23rd September 2020.
Content of extranets and intranets published before
23rd September 2019, or until such time as the website
undergoes a substantial revision, whichever is sooner.
Content of extranets and intranets published on or after 23rd
September 2019, and any content published before 23rd
September 2019 that has been substantially revised.
From 23rd September 2019.
Content of websites and mobile applications qualifying
as archives, except those that are needed for active
administrative processes or have been updated or
edited since 23 September 2019.
Content of websites and mobile applications qualifying as
archives that are needed for active administrative processes or
have been updated or edited since 23 September 2019.
After 22nd September 2020.
Maps. An accessible alternative to maps should be provided.
Depends on publishing date of
host website (see above).
Reproductions of items in heritage collections that
cannot be made fully accessible.
Some accessibility requirements for websites or mobile
applications should still be complied with as regards the
metadata linked to the reproduction of items in heritage
collections.
Depends on publishing date of
host website (see above).
#EuroBbUG