Need your Digital Academy to look a little more like it's part of your brand? Not a problem.

Here you'll find some of the advanced configuration options available through CSS.

Below are just some of the key tags that can be updated.

Note: We suggest leaving these types of customizations to those familiar with CSS.

Navigation Bar

Navigation Bar Background

#academy-nav-bar{
  background: #000000 !important;
}

Logo

#academy-nav-bar #academy_logo {
}

Search Button

#nav_search .search-container #academy_search_btn {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 28px;
  width: 65px;
  background-color: #a6c532;
  color: #a6c532;
  margin-left: -65px;
  padding: 0 24px;
  border-radius: 0 5px 5px 0;
  border: 1px solid rgb(166, 197, 50, 0.67);
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  cursor: pointer;
}

Search Button Hover State

#nav_search .search-container #academy_search_btn:hover, #nav_search .search-container #academy_search_btn :active {
  background-color: #89a329;
  color: #89a329;
}

Catalogue

Category Title (e.g., Mobile Banking)

category-title .category-title-link{
  font-family: 'Helvetica Neue', sans-serif;
  font-size:25px;
  font-weight: 300;
  line-height: 45px;
  color: #a6c532 !Important;
  -webkit-font-smoothing: subpixel-antialiased;
}

Tutorial Titles

@media screen {
  .demo-card:not(.search-demo-card) .bottom .title {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #56;
    word-break: break-word;
    word-wrap: break-word;
    padding-right: 25px;
  }
}

Within a Demo

Play Again Button

#demo-play-again-btn {
  background-color: #a6c532 !important;
  border: 1px solid #a6c532 !important;
}

Guided Text

#guide_text_content {
  display: inline-block;
  vertical-align: middle;
  word-break: break-word;
  word-wrap: break-word;
  font-size: 15px !important;
  color: black!important;
  font-weight: bold !important;
}

Top Bar (e.g., Step 1 of 8 Mobile App Main Page)

@media screen {
  #page-module-demo-step.academy #demo-controls {
    background: #fff;
    color: #595959;
    padding: 22px 50px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 14px;
    font-family: inherit;
    height: inherit;
    right: initial!important;
    width: calc(100% - 69px);
  }
}