Blackboard Arc Boost

content.js

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
// add your custom font link down here 👇
link.setAttribute('href', 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
document.head.appendChild(link);

const home = document.querySelector('#Home')
link = home.children[0]
link.href = 'http://blackboard.usc.edu/webapps/portal/frameset.jsp?tab_id=_1_1'
const help = document.querySelector('#Help')
const course_eval = help.cloneNode(true)
link = course_eval.children[0]
course_eval.id = 'course-eval'
link.innerHTML = 'Course Evaluations'
help.after(course_eval)

link.href = 'https://blackboard.usc.edu/webapps/portal/execute/tabs/tabAction?tabId=_138225_1&tab_tab_group_id=_189_1'
const notif = course_eval.cloneNode(true)
link = notif.children[0]
notif.id = 'notif'
link.innerHTML = 'Notifications Dashboard'
link.href = 'https://blackboard.usc.edu/webapps/portal/execute/tabs/tabAction?tabId=_43_1&tab_tab_group_id=_128_1'
course_eval.after(notif)

styles.css

/* This is injected after a web page loads */

/* This boost is built on the default Blackboard UI */

/*
KEY
w: warning
i: important to the experience
n: nitpick
s: suggestion
sp: specific to school
*/

/* VARIABLES */
:root{
  --modulebg: #ddd5b0; /* e8e8e8 */
  --pagebg: #d8d8d8; /* f4f4f4 */
  --schoolcolor: #994a00; /* 990000 */
  --extraelement: #dadada;
  --darkbg: #2b3439;
  --fontname: "Lato";
  --text: #000; /* black */
  --topMenuBar: #d8ae3a; /* white */
}

/* HOME PAGE */
/* w hides the pretty much useless link button*/
#quick_links_wrap{
  display: none !important;
}
/* w hides the power button, also kinda useless */
.logout{
  display: none !important;
}
/* w hides the OPEN IN NEW WINDOW button */
.moduleDetachLink{
  display: none !important;
}
/* w hides ADD MODULE, PERSONALIZE PAGE, REORDER */
/* s set up your page how you like it and then add this code */
.actionBar{
  display: none !important;
}
/* w hides the HOME, COURSE EVALUATIONS, NOTIFICATION DASHBOARD menu */
.paneTabs{
  display: none !important;
}
.main-nav-open #paneTabs{
  display: none !important;
}

/* i sp */
* {
  /* mention the custom font here */
  /* I've used Lato because that is what USC uses on their myUSC portal */
  font-family: var(--fontname), sans-serif !important;
}

/* i sp unifies the background and module borders and background colors */
body{
  background: var(--pagebg) !important;
}
.container{
  border: none !important;
  background-color: var(--pagebg) !important;
}
.locationPane{
  background: var(--pagebg) !important;
}
#moduleTitle, .portlet h2{
  /* changes background color of the module boxes */
  background-color: var(--modulebg) !important;
  /* changes font size of module boxes */
  font-size: 1.25rem !important;
  padding: 1rem 2rem !important;
}
.moduleTitle {
  /* changes the color of the titles */
  color: var(--text) !important;
}
.portlet {
  /* makes boxes have rounded edges */
  border-radius: 0.25rem !important;
  border-color: var(--modulebg) !important;
}
.portlet .reorder{
  border-color: var(--modulebg) !important;
}
.reorderableModule:hover{
  border-color: var(--modulebg) !important;
}

/* i fixes the position of the arrows and reorder buttons */
.edit_controls a.moduleToggleLink.expand {
  margin-top: 0.5rem;
}
.edit_controls a.moduleToggleLink{
  margin-top: 0.5rem;
}
.reorder{
  padding-top: 2px;
}

/* i sp match the top menu layout on myUSC's homepage */
.global-nav-bar-wrap{
  display: flex;
  flex-direction: row-reverse;
  top: 120px !important;
}
.global-nav-bar{
  margin: -10px 10px !important;
}
.topTabs{
  background-color: var(--topMenuBar) !important;
}
#topTabActive, .appTabs .active a, .appTabs .active a:hover, .appTabs .active a:focus {
  color: var(--text) !important;
}
.appTabs a {
  color: var(--text) !important;
}
.appTabs a:hover, td:hover{
  color: var(--text) !important;
}
.nav-link{
  color: var(--text) !important;
  background-color: transparent !important;
}
.global-nav-bar a.logout-link, .global-nav-bar a.logout-link:hover, .global-nav-bar a.logout-link:focus {
  /* changes the color of the power button if you don't want to remove it */
  filter: invert(100%) !important;
}
#appTabList td {
  padding-bottom: 0px !important;
}
.appTabs .active a span, .appTabs .active a:hover span, .appTabs .active a:focus span, .appTabs a, .appTabs a span {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}
.tabWrapper-right{
  display: flex !important;
  flex-direction: row !important;
  left: 0 !important;
  padding: 2rem 1.2rem !important;
}
table.bouncer{
  border: none !important;
}
.brandingImgWrap {
  /* changes the size of the top menu bar */
  height: 70px !important;
  display: flex;
  flex-direction: row-reverse;
  background-color: var(--schoolcolor) !important;
}
.brandingImgWrap img {
  /* changes the size of the image in the top menu bar */
  left: -15rem !important;
  max-height: 3rem !important;
  max-width: 15rem !important;
  top: 10px !important;
}
#global-nav .global-top-avatar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 25px !important;
  width: 25px !important;
}
#global-nav-link{
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  padding-right: 20px !important;
}
#global-toggle-img{
  display: none !important;
}
.appTabs td.active {
    border-bottom: none !important;
}

/* i removes the weirdly positioned blue border around everything */
input:focus, button:focus, select:focus, a:focus {
    outline: 0px !important;
}

/* i changes the purple module change confirmation message */
.good, .adding{
  background: var(--schoolcolor) !important
}
.good a:link{
	text-decoration: none !important;
}
.good a.close:before, .adding a.close:before {
  color: var(--extraelement) !important;
}

/* i side menu that pops up on clicking your name */
.bottom-buttons{
  display: none !important;
}
.flyout-menu, .flyout-menu .mybb-tools {
  background-color: var(--darkbg) !important;
}
.flyout-menu .accordion-wrapper {
  background-color: var(--darkbg) !important;
}
.iframe-wrap{
  border: none !important;
}
.side-nav{
  background: var(--darkbg) !important;
}
.accordion_content .course-list li a, .accordion_content .accordion-list li a {
 border: none !important;
}

.stepcontent, .container>form, .steptitle, div[id*="step"], div[id*="Step"], #dataCollectionContainer, .container  {
  background-color: var(--pagebg) !important;
}
#stepcontent1, #stepcontent2, #stepcontent3 {
  background-color: var(--pagebg) !important;
}
.submitStepBottom{
  background: var(--pagebg) !important;
}

/* OTHER PAGES */
/* w hides breadcrumbs on certain settings pages */
.breadcrumbs{
  display: none !important;
}
/* w hides completely sudden and unnecessary blackboard copyright */
.newCopyright .logo, .newCopyright .legal, .newCopyright .additionalInfo{
  display: none !important;
}
/* w hides institution/course tab */
.localViewToggle{
  display: none !important;
}
/* w hides useless home button next to course name */
#courseMenu_link:before {
  display: none !important;
}
/* hides useless folder icon at the top of the course */
#courseMapButton{
  display: none !important;
}
/* i sp for general page looks */
#pageTitleText{
  /* changes header */
  font-size: 1.8rem !important;
  font-weight: 600 !important;
}
.container{
  /* removes excessive padding and margin */
  padding: 20px 10px !important;
  margin: 0px 30px !important;
}
.landingPageColumn ul li a {
  text-decoration: underline dotted #1874a4 !important;
}
a, .portlet .subCategories li a, .blockGroups .itemHead, .blockGroups .itemHeadOpen {
  color: #000 !important;
}
li ::marker{
  content: '•  ' !important;
}
.contentPane .shadow {
  background-color: var(--pagebg) !important;
}
.contentPane{
  background: var(--pagebg) !important;
}
.contentPane .shadow{
  border: none !important;
}
div.localViewToggle+div.pageTitle {
  padding-top: 20px !important;
}
#pageTitleDiv{
  margin-top: 0px !important;
}
#courseMenuPalette a:hover, #controlPanelPalette_contents a:hover, #courseMenuPalette span:hover, #controlPanelPalette_contents span:hover {
  color: var(--text) !important;
}
.menuWrap, .menuWrap-inner, #courseMenuPalette ,#courseMenuPalette_contents li, #courseMenuPalette div.navPaletteContent, #courseMenuPalette_paletteTitleHeading h3, .actionBarMicro{
  background-color: var(--modulebg) !important;
}
.secondaryButton>a, .mainButton h2>a, .secondaryButton h2>a {
  background: var(--extraelement) !important;
  border-radius: 10px;
  margin: 10px 10px 0px 0px !important;
}
#courseMenuPalette ul{
  background-color: var(--modulebg) !important;
}
#courseMenuPalette div.navPaletteContent ul li a, #courseMenuPalette h3 a, #previewCourseMenu h3 a, .navPaletteContent h3 a.submenuLink:before, .navPaletteContent h3 a.submenuLink_active:before, #courseMenuPalette div.navPaletteContent ul li a span, #courseMenuPalette .navPaletteContent .subhead {
  color: var(--text) !important;
}
/* changing the color for side menu expander on course page */
#puller a:hover, #puller a:focus {
  background-color: var(--modulebg) !important;
}
#puller a {
  background: var(--modulebg) !important;
  box-shadow: none !important;
  border: none !important;
}
#puller a:after {
  background-color: var(--extraelement) !important;
  border-color: var(--extraelement) !important;
}

.liItem:hover, .buildList>li:hover {
  border-color: var(--extraelement) !important;
  border-radius: 20px !important;
}
.contentList > li, .buildList > li, .contentListPlain > li, .announcementList > li, .contentPageItem {
  border-top-color: var(--pagebg) !important;
}
#puller.pullcollapsed a:hover:after, #puller a:hover:after, #puller.pullcollapsed a:focus:after, #puller a:focus:after {
  color: var(--text) !important;
  background-color: transparent !important;
}

/* MOBILE FIXES */
/* i */
@media only screen and (min-width: 320px) and (max-width: 1037px){
  /* MAIN PAGE */
  /* fix overlapping power and menu button */
  .global-nav-bar.logout {
      position: fixed;
      top: 4px !important;
      right: 20px !important;
      height: 20px;
      width: 30px;
      left: auto;
      overflow: hidden;
  }
  .global-nav-bar{
    top: 10px;
    left: 20px;
  }
  /* fix profile menu position - mobile */
  .global-nav-bar-wrap{
    margin-top: 30px !important;
  }
  .mybb-shell .global-nav-bar-wrap {
    background-color: transparent !important;
  }
  .main-nav-open div[class^="topTabs"] div[class^="tabWrapper"] {
    height: 400px !important;
    max-height: 400px !important;
    background: var(--modulebg) !important;
  }
  .brandingImgWrap{
    background-color: var(--modulebg) !important;
  }
  .topTabs{
    background-color: var(--modulebg) !important;
  }
  caption, th, td:not([data-mce-style]) :not(.vtbegenerated) {
    display: flex;
    flex-direction: column;
  }
  .appTabs td.active {
    background: var(--modulebg) !important;
  }
  .tabWrapper-left, .tabWrapper-center, .tabWrapper-right {
    background: var(--pagebg) !important;
  }
  .global-top-avatar{
    left: 2rem !important;
    right: auto !important;
    margin-top: 7px !important;
  }
  /* OTHER PAGES */
  .actionBarMicro{
    border: none !important;
  }
  .actionBarMicro ul li {
    float: right !important;
  }
  .menuWrap{
    border: none !important;
  }
  #puller a, #puller a:hover, #puller a:focus, #puller.pullcollapsed a, #puller.pullcollapsed a:hover, #puller.pullcollapsed a:focus {
    background: transparent !important;
  }
  #puller.pullcollapsed a:after {
    color: var(--text) !important;
    background-color: transparent !important;
  }
}
.hideoff{
  display: none !important;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  background-color: var(--text) !important;
}


/* WARNING SCREEN */

/* screen after pressing power button */
.warning_content{
  color: var(--text) !important;
  font-weight: 300;
}
#warning_message_logo{
  background:var(--schoolcolor) !important;
  border: 10px var(--schoolcolor) solid;
}
.end_sso_session{
  background-color: var(--modulebg) !important;
  box-shadow: none !important;
  border: var(--modulebg) !important;
  border-radius: 0.25rem;
}