Note: Programming skills required<\/h2><\/div>Knowledge of basic web programming (CSS, Javascript, HTML) required<\/span><\/div><\/div>\nI discovered this when I really needed to migrate programs from websites into Blackboard, which already had a lot of styling and formatting. So bearing this in mind, I had to think of a way that would be simple for everyone: making it easy for the designer to build and also for academic staff to edit and add content.<\/p>\n![\"Screenshot\"](\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-27-at-9.25.08-AM-300x266.png\")
<\/a>Screenshot from Abrahamson & Hillman’s presentation at the Blackboard World 2016 conference, showing how CSS can be used to customise visual styling of Blackboard.<\/figcaption><\/figure>\nI have always wanted to do this and I’m sure many Blackboard users also wanted to\u00a0as well, but the complexity of the LMS deters explorations into this. However, a couple of Blackboard gurus from Boston University have shared how they approached this recently through the Blackboard community. Thanks to Andrew Abrahamson & Dan Hillman who had presented this at the Blackboard World 2016 conference. Check out the\u00a0PDF of their\u00a0presentation<\/a>\u00a0for detailed instructions. Essentially, the steps can be boiled down to:<\/p>\n\n- Create a custom CSS file and save it to an accessible content area.<\/li>\n
- Use a script tag and some Javascript to link in this CSS file.<\/li>\n
- Ensure your content has the classes corresponding to those in the custom CSS file.<\/li>\n<\/ol>\n
Using their tips, I can now customise the font, size, colours of the heading classes in Blackboard. But this customisation is not limited to headings – you can pretty much customise any text or image styling using CSS. But you do need to have some basic CSS skills to do this, and if you are a CSS guru, you can do wonders to your Blackboard site.<\/p>\n![\"Screenshot](\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-26-at-4.52.44-PM-300x200.png\")
<\/a>Screenshot showing modified style sheets in Blackboard<\/figcaption><\/figure>\nI’m no expert in CSS but have deliberately taken this screenshot (on the left) to illustrate some of these styles.<\/p>\n
\n- In this example, the\u00a0heading classes have been set via\u00a0CSS, i.e. H4 is red, H5 is blue and H6 is green. So, if you use the text editor to apply the heading classes to the text on each line, they will be formatted as defined\u00a0in the CSS without having to use the colour control.<\/li>\n
- The background image of the page has been changed to a customised image (the University of Sydney logo).<\/li>\n<\/ul>\n
These are just some basic examples to demonstrate that it is possible to do this now. The slides provided by Andrew and Dan shows you how to do all this. I have asked them if they have encountered any display or functionality issues when applying this modification: they have not noticed any\u00a0functionality issues, but there may be some CSS class conflicts that you may need to define with more granularity to make them take effect. I would also suggest that you do some testing and run through your site to ensure that there are no issues when you apply this modification. Contact your faculty Educational Designers in\u00a0your Educational Innovation spoke<\/a> for more information and assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"Have you always wanted to make your Blackboard site more visually stunning? With some basic knowledge of coding for the web, you can do…<\/p>\n","protected":false},"author":47,"featured_media":2683,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[138,128,68],"coauthors":[496],"class_list":["post-2641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teaching-tips","tag-advanced-elearning","tag-blackboard","tag-lms","post-item","post-even"],"_links":{"self":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/2641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/comments?post=2641"}],"version-history":[{"count":23,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/2641\/revisions"}],"predecessor-version":[{"id":2693,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/2641\/revisions\/2693"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media\/2683"}],"wp:attachment":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media?parent=2641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/categories?post=2641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/tags?post=2641"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/coauthors?post=2641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
I discovered this when I really needed to migrate programs from websites into Blackboard, which already had a lot of styling and formatting. So bearing this in mind, I had to think of a way that would be simple for everyone: making it easy for the designer to build and also for academic staff to edit and add content.<\/p>\n I have always wanted to do this and I’m sure many Blackboard users also wanted to\u00a0as well, but the complexity of the LMS deters explorations into this. However, a couple of Blackboard gurus from Boston University have shared how they approached this recently through the Blackboard community. Thanks to Andrew Abrahamson & Dan Hillman who had presented this at the Blackboard World 2016 conference. Check out the\u00a0PDF of their\u00a0presentation<\/a>\u00a0for detailed instructions. Essentially, the steps can be boiled down to:<\/p>\n Using their tips, I can now customise the font, size, colours of the heading classes in Blackboard. But this customisation is not limited to headings – you can pretty much customise any text or image styling using CSS. But you do need to have some basic CSS skills to do this, and if you are a CSS guru, you can do wonders to your Blackboard site.<\/p>\n I’m no expert in CSS but have deliberately taken this screenshot (on the left) to illustrate some of these styles.<\/p>\n These are just some basic examples to demonstrate that it is possible to do this now. The slides provided by Andrew and Dan shows you how to do all this. I have asked them if they have encountered any display or functionality issues when applying this modification: they have not noticed any\u00a0functionality issues, but there may be some CSS class conflicts that you may need to define with more granularity to make them take effect. I would also suggest that you do some testing and run through your site to ensure that there are no issues when you apply this modification. Contact your faculty Educational Designers in\u00a0your Educational Innovation spoke<\/a> for more information and assistance.<\/p>\n","protected":false},"excerpt":{"rendered":" Have you always wanted to make your Blackboard site more visually stunning? With some basic knowledge of coding for the web, you can do…<\/p>\n","protected":false},"author":47,"featured_media":2683,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[138,128,68],"coauthors":[496],"class_list":["post-2641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teaching-tips","tag-advanced-elearning","tag-blackboard","tag-lms","post-item","post-even"],"_links":{"self":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/2641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/users\/47"}],"replies":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/comments?post=2641"}],"version-history":[{"count":23,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/2641\/revisions"}],"predecessor-version":[{"id":2693,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/2641\/revisions\/2693"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media\/2683"}],"wp:attachment":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media?parent=2641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/categories?post=2641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/tags?post=2641"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/coauthors?post=2641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Screenshot\"](\"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/wp-content\/uploads\/2016\/09\/Screen-Shot-2016-09-27-at-9.25.08-AM.png\")
<\/a>\n
<\/a>\n