Adding css to a Blackboard Course page

As we found out in previous posts, the TinyMCE editor in Blackboard 9 does not allow css to be embedded in course ‘Items’. Creating and editing an ‘Item’ (as opposed to a File) with TinyMCE  strips out all css, inline or referenced, from the item.

Also recall that creating an HTML re-usable object in the Content  Collection does support full html including css and referenced css file.

So, by using a little trick we can load css into the course page, which can then be used by the Item.

  • Create an HTML reusable object in the Content Collection that is blank except for css definitions, either inline or referenced.
  • Add this file using Item -> Insert file option on the course in question.
  • Make it not visible but active by colouring the text white and leaving it available.
  • Move it down to the bottom of your course.  It will appear as extra, but blank section.

Now you can create an Item that uses the css classes in this referenced file.  Note the css affects the entire page, so you may want to define your css classes carefully.


Update – May 2015 (as comments don’t seem to be working)

I checked it out, and it still works. The css in the first file needs to be external, can’t be embedded. So:
1. testcss.css Contents .foobar { color: green; font-weight: bold;}
2. testcss.html – ‘Linked’ from within an Item in the course(use absolute url). Contents:
<html>
<head>
<link href="http://{myblackboard.edu}/bbscwebdav/courses/{mycourse}/testcss.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>

3. Second Item in course:
This is a test of the embedded css
<span class="foobar">This line should be green.</span>
This line should not.

This entry was posted in Uncategorized and tagged . Bookmark the permalink.

8 Responses to Adding css to a Blackboard Course page

  1. Roberto says:

    I followed all the steps and yet cannot handle to use my CSS code in my course, is this still posible in blackboard 9.1?

  2. Bob Walker says:

    I checked it out, and it still works. The css in the first file needs to be external, can’t be embedded. So:
    1. testcss.css Contents .foobar { color: green; font-weight: bold;}
    2. testcss.html – ‘Linked’ from within an Item in the course. Contents:
    <html>
    <head>
    <link href="testcss.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
    </html>

    3. Second Item in course:
    This is a test of the embedded css
    <span class="foobar">This line should be green.</span>
    This line should not.

  3. Stefano says:

    Thank you very much for this trick. Unfortunately it does not work here either. I think I have followed all your steps, using your test examples. I was thinking this could be a solution to include Font Awesome in Blackboard 9.1. While this work fine in the HTML Reusable Object, it does not work then in the Item (also using your method). Any help?

    Interesting. Thanks for the feedback. Something seems to have changed. My initial testing did not work, but looking a bit deeper, BB couldn’t find the css file by relative url. So, changing the css link in Step 2 to use an absolute url for the css file(get it from 360 view) does work. May have something to do with the change from frames to divs? I’ve updated the post to reflect using an absolute url in Step 2. bob

  4. leon says:

    Hi Guys,

    Can anyone verify that this still works for blackboard 9.1 ? (I’m on Version Oct 2014)
    Can you also provide more information as I followed the above but can’t get it to work.

    thanks.

  5. Paul Sijpkes says:

    Hi Bob,

    It seems we have both solved a similar problem! Here at UoN did this by loading an external script into an Item and then hiding the item with an inline style=’display: none’ if the user’s role did not match. The script will still execute even if the item is not displayed.

    With my solution host this script somewhere (or place it inline if you must):
    https://gist.github.com/sijpkes/d80e21db66320379d581ccd93afca42e

    then add this to the HTML code section of as a Blackboard Item anywhere in the page:

    https://gist.github.com/sijpkes/a8c719b7979fc510c3238b5495414f67

  6. LengCB says:

    Hi I tried this technique and I does work. However I couldn’t get the CSS to work consistently in student preview.

Leave a Reply

Your email address will not be published. Required fields are marked *