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
}