Theme Gallery: University of Southampton theme

Document created by mdeeprose on May 13, 2019Last modified by mdeeprose on Jul 10, 2019
Version 10Show Document
  • View in full screen mode

Main thread: Learn 2016 Theme - CSS gallery 

Here is the current version of our theme, put together by myself and Sam Cole with help from the Blackboard community.  We put this together over two months having started from scratch with little knowledge of CSS.  You can find out more in our talk TLC Europe 2019 - "Bluffer's Guide to Customising the 2016 Theme".  




  • It is built on the 2018 Q4 CU6 base 2016 theme. 
  • Customisations are in the mods.css file
  • Except for the updated "puller" which is at the base of the app_nav.css file.
  • All changes are documented with comments.
  • There are:
    • 32 Colour change sections
    • 35 Layout change sections
    • 7 Help text customisations
    • 6 Text formatting customisations
    • A section making changes to buttons
    • A section with changes to the mobile view
    • The aforementioned puller change which you can see in the animation below.
    • Some of the graphics are also changed in utilicons_sprite_rev.png


Animation demonstrating the theme, if slow to load click here to get a faster version

Click the above animation to be directed to a faster loading .gifv version if the animation is slow to display.


I can't find the icon to add attachments, so here is a link.  If anyone can help me attach a file to this post let me know.


# Changes in 2.4

- accessibility improvement: when instructors chose bad menu colour schemes, work around this by using focus and hover to make menu items clearer:

Make course menu easier when bad choices made

- Make Edit mode a bit clearer when it is set to Off

- Fix number of items to grade list in Needs Grading

- Fix achievements control panel screen

- Make Grade Center scrollbars easier to use in Chrome:

- Make Banners responsive:

- Highlight the cell info bar in the Grade Center to make the text there more impactful.

- Improve the list format in Group areas.

- Big improvements to the mobile menu, fixing many issues (but can't fix needing to refresh for it to work in desktop browser) and get rid of that rubbish logout icon

(this required a lot of kludges to make it work as best I could)

- improve the mobile puller: it looks clearer, subtly changes colour when not in use, and changes to a fat red x when open.  Hopefully makes it easier for users.

mobile puller

Thanks as always to Ester Muñoz Aparicio for her invaluable tips.  I could not have done this without her help


# Changes in 2.02.

- Fix the link colour in "good" receipt emails.  Students see this when they submit an assignment and can click on it to view their receipt.

- Further fixes for the course map pop out so that when instructors use it, the Control Panel is rendered correctly.

- Updated submit and cancel buttons.  Thanks to Ester Muñoz Aparicio for some suggestions on the code for this!

Demo of submit and cancel buttons.

- In desktop mode only: Larger avatar, and better logout button again thanks to Ester Muñoz Aparicio for suggestions.  Part of the code can be found in Ester's slides in our talk at TLC. This also fixes the avatar floating around in the mobile view global navigation area.  There are still tons of bugs in mobile global nav though :~(


-Container options bar better sized to account for the puller, and removed the 90's gradient effect from the user navigator.

- Make the login button that appears when accessing as a guest a button with a red outline.  We find sometimes students get themselves logged in as guests by mistake and then raise tickets saying all their courses disappeared.  This hopefully makes the login button more obvious.  This appears in desktop mode only.  The login button that appears to guest in mobile mode is totally broken (who tests this stuff at Blackboard!?!) 

- Add some text to the Users section to try to explain to instructors that the search box is not for finding people to add, but that they have to click on Find Users to Enrol (we get so many tickets about this).

- The text on the allow extra attempt for assignment area is incredibly small in 2016 theme, so a fix is added for that:





Older versions:


# Changes in 1.9 - updated for 2018 Q4 CU6 and fixes the issue that Nate Lison mentioned in the thread below, thanks to Ester Muñoz Aparicio for suggesting the fix


This is provided "as is", with no guarantee of support nor that it will work in your environment.  Backup your environment before testing and make sure to test in a development environment first.