Theme Gallery: University of Southampton theme

Document created by mdeeprose on May 13, 2019Last modified by mdeeprose on Jun 5, 2019
Version 8Show 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:
    • 28 Colour change sections
    • 28 Layout change sections
    • 6 Help text customisations
    • 3 Text formatting customisations
    • A section making changes to buttons
    • 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.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.