Home » Blackboard » Blackboard Learn » How We’re Customizing the Learn 2016 Theme

How We’re Customizing the Learn 2016 Theme

As part of our Spring 2018 Blackboard Upgrade, we’re launching the Learn 2016 theme. Below are some code snippets on adjustments we made to our theme.

Theme Version: Q2 2017

100% Width

body {
 max-width: 100%

Customized the Accent Color when Reordering Content

.item .reorder {
 background: #f05023 !important

Customized the Background Color of Success Notifications

//Changed background color to green
.good {
 background: #388E3C !important;
 border-color: #388E3C !important
//Changed link color to white and made underlined
.good a {
 color: #fff !important;
 text-decoration: underline

Enlarged the font size of the “No Content” Message in Content Areas

//First Line "It's time to add content…"
.noItems.container-empty .main-message {
 font-size: 18px;
 font-weight: bold
//Second Line "Use functions above to add it."
.noItems.container-empty .secondary-message {
 font-size: 18px

Added Arrows to the Control Panel Menu

Thanks to GVSU for posting this code on the Blackboard Community site.

.controlpanel a.submenuLink {
 background: url(images/arrow_white.gif) no-repeat;
 background-position: left bottom
.controlpanel a.submenuLink:hover, .controlpanel a.submenuLink:active {
 background-position: left bottom

Made Top Frame Tabs Text Underlined Upon Hover

.appTabs a:hover {
 text-decoration: underline

Customized the “Drag and Drop” Border and Drop Zone

#globalNavPageContentArea .dropzone {
 border: 3px dashed;
 border-radius: 5px;
 border-color: #9B9B9B
#globalNavPageContentArea .dropzone.hover {
 color: #fff;
 background: #F05023;
 border: 4px dashed #F05023

Added our University Logo to Screens Smaller than 1024px

Thanks to GVSU for posting this code on the Blackboard Community site.

@media only screen and (min-width: 320px) and (max-width: 1024px) {
 .global-nav-bar-wrap {
 background-image: url("images/utrgv_logo_100px.png");
 background-repeat: no-repeat;
 background-position: 5px center
@media only screen and (min-width: 481px) and (max-width: 1024px) {
 .brandingImgWrap img {
 display: none

Allows instructors to customize their course menu color

//Sets default background color of the course menu list
#courseMenuPalette ul {
background-color: #646469
//Removes "frontmost layer" to show the customized menu color
.courseMenu {
background-color: rgba(100,100,105,0) !important
//Adds an underline to course menu items upon hover
.navPaletteContent a:hover {
text-decoration: underline

Bolded Grade Center Header Cells

.gbtable_header div {
 font-weight: bold !important

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Eric Silva

Eric is a Systems Analyst and Blackboard Administrator at The University of Texas at San Antonio, and a graduate from Boise State University. Learn more about me.


Add comment

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.