Skip to main content
Request a Photo Shoot | Request Digital Files | Digital Model Release

You can apply WVU's branding to your SmugMug site. Before you get started customizing your theme, you first get set up with a SmugMug account. If you need help with this, contact UR - News. Next, you should familiarize yourself with the SmugMug documentation.

In order to apply WVU branding to your SmugMug site, there are three things you need: a website masthead (including a word mark and search box), a site navigation, and a footer (like the one we use on all WVU websites).

In order to do this, you must provide CSS code for the overall theme, as well as HTML for each of these elements. This is done through SmugMug’s CMS (content management system). The general process is to create a theme, style the overall theme, and add content blocks.

Create a New Theme

  1. Log into SmugMug at smugmug.com
  2. Go to your website. You should see the SmugMug toolbar at the top of your site

Style Overall Theme

  1. In the toolbar, Click Customize > Content and Design
  2. In the right-hand panel, click the "THEME" tab
  3. Scroll to the bottom, click "CREATE THEME"
  4. In the "Name" field, give your theme a name e.g. "My Theme"
  5. Pick a "Primary Color" for your background (dark gray works well)
  6. Under "BASIC," set the Heading and Body Font to "Open Sans" and the Heading Font Weight to "Normal 400"
  7. Click the "ADVANCED" tab
  8. Scroll to the bottom, under Custom CSS, click "Edit"
  9. Copy and paste the following code: 
    body { line-height: 1.5; }
.sm-page-footer { display: none; }
.sm-page-layout-region-top { background-color: #002855; }
.sm-user-ui .sm-form-field-text-input, .sm-user-ui .sm-form-field-textarea { 
  background-color: white; color: black !important;
}
.sm-user-ui .sm-form-field:focus, .sm-user-ui .sm-form-field.sm-focus { 
  background-color: white; color: black; 
}
.sm-user-ui .sm-button[disabled], 
.sm-user-ui .sm-button[disabled]:hover, 
.sm-user-ui .sm-button[disabled]:active { 
  border-color: white; color: white; 
}
.sm-page-widget-search .sm-form-field-text-input { 
  margin: 2em 0; 
}
.sm-page-widget-12619107 { padding: 1em; background-color: #413F3E; }
.sm-page-widget-12619107 a:link { color: #EAAA00 }
.sm-tile-content { border: 1px solid #ccc; }
.sm-gallery-description p { margin-bottom: 1em; max-width: 39em; }
.sm-form-field-text-input { color: black; }
@media (min-width: 768px) {
  .sm-page-widget-12619107 { text-align: right;  }
}
.sm-page-layout-region-body a, footer a { text-decoration: underline; }
.sm-page-layout-region-body pre { overflow-x: scroll; }
a:focus { outline: 5px dotted red !important; }
.wvu-skip-nav {
  background: white;
  color: #002855;
  left: -99999em;
  padding: 0.5em;
  position: absolute;
  text-decoration: underline;
  z-index: 10; 
}

.wvu-skip-nav::focus { left: 0; }

.wvu-masthead { float: left; width: 100%; padding: 0 2em; box-sizing: border-box; }

.wvu-masthead fieldset {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

.wvu-masthead__logo:hover {
  text-decoration: none;
}

.wvu-masthead__title {
  font-size: 0.85em;
}

@media (min-width: 21.25em) {
  .wvu-masthead__title {
    font-size: inherit;
  }
}


.wvu-masthead__container {
  padding: 0 1em;
}

@media (min-width: 75em) {
  .wvu-masthead__container {
    padding: 0;
  }
}

.wvu-masthead__logo {
  font-family: "HelveticaNeueW01-55Roma", "Helvetica Neue", Helvetica, "Helvetica LT Std", "Helvetica CY", Arial, "Lucida Grande", sans-serif;
  text-decoration: none;
  position: relative;
  padding: 1em 0 1.6em 2em;
  font-size: 1.2em;
  overflow: hidden;
  border: 0;
  background-color: transparent;
  width: 100%;
  background: url(../images/flying-wv.png) no-repeat top 1.2em left;
  background-size: 1.8em;
  float: left;
  color: white;
  box-sizing: border-box;
}

.wvu-masthead__logo:hover {
  color: #ddd;
}

@media (min-width: 21.25em) {
  .wvu-masthead__logo {
    font-size: 1.5em;
  }
}

@media (min-width: 48em) {
  .wvu-masthead__logo {
    font-size: 1.75em;
  }
}

@media (min-width: 60em) {
  .wvu-masthead__logo {
    font-size: 2em;
  }
}

.wvu-masthead__college {
  position: absolute;
  top: 1em;
  font-size: 0.8em;
  text-transform: uppercase;
}

.wvu-masthead__logo:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

.form-search__field {
  color: #2C2A29;
}

.wvu-masthead__search-bar {
  padding-top: 2.1em;
  font-size: 0.8em;
  padding-bottom: 4em;
}

@media (min-width: 48em) {
  .wvu-masthead__search-bar {
    padding-bottom: 0;
  }
}

.wvu-masthead__search-bar input[type="checkbox"], .wvu-masthead__search-bar input[type="radio"] {
  margin-right: 0;
}

.form-search__label {
  width: 82.94039%;
  margin-right: 2.35765%;
  float: left;
}

input[type="submit"].form-search__submit {
  width: 14.70196%;
  margin-right: 0;
  float: left;
}

.wvu-masthead__college-link {
  position: relative;
}

.wvu-masthead__college-link a {
  font-size: 0.8em;
  line-height: 1.08333333em;
  padding: 0.4em 0.5em;
  margin-bottom: -2em;
}

@media (min-width: 48em) {
  .wvu-masthead__college-link a {
    position: absolute;
  }
}

.wvu-masthead__link {
  color: white;
  font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue", Helvetica, "Helvetica LT Std", "Helvetica CY", Arial, "Lucida Grande", sans-serif;
  display: inline-block;
  margin-bottom: .5em;
  float: left;
  margin-right: .5em;
}

@media (min-width: 48em) {
  .wvu-masthead__link {
    margin-bottom: 3px;
  }
}

.wvu-masthead__link:hover {
  color: white;
  text-decoration: underline;
}

.wvu-masthead {
  background-color: #002855;
  color: white;
  -webkit-font-smoothing: antialiased;
}

.wvu-masthead__logo {
  color: white;
}

.wvu-masthead__logo:visited {
  color: white;
}

.wvu-masthead__link {
  color: white;
}

.wvu-masthead__link:visited {
  color: white;
}

.wvu-masthead__link:hover {
  color: white;
}

.wvu-masthead__college-link:hover {
  color: #002855;
}

.wvu-masthead__college-link:visited {
  color: #002855;
}

.wvu-masthead__college-link a {
  background: #EAAA00;
  color: #002855;
}

.wvu-masthead__logo {
  background-repeat: no-repeat;
  background-position: top 1.2em left;
  background-size: 300px;
  padding-left: 54px;
  padding-bottom: 1em;
}

.wvu-masthead__logo--mini {
  background-size: 250px;
  background-position: top 0.5em left;
}

.wvu-masthead__title {
  padding-top: 46px;
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
}

@media (min-width: 35.625em) {
  .wvu-masthead__title {
    font-size: 14px;
    line-height: 16px;
  }
}

@media (min-width: 48em) {
  .wvu-masthead__title {
    font-size: 16px;
    line-height: 18px;
  }
}

.wvu-masthead__university-name {
  position: absolute;
  left: -99999em;
}

.wvu-masthead__logo {
  background-image: url("https://patterns.wvu.edu/images/flying-wv-w-signature.png");
}

.wvu-masthead__logo--mini {
  background-size: 250px;
  background-position: top 0.6em left;
  padding-bottom: 1.6em;
}

@media (min-width: 48em) {
  .wvu-masthead__logo--mini {
    background-position: top 0.5em left;
    padding-bottom: 1em;
    font-size: 2em;
  }
}

.wvu-nav { width: 100%; }
.wvu-nav__items li a { box-sizing: border-box; }
.wvu-nav__items, .wvu-nav ul { margin-bottom: 0; }

@media (min-width: 35.625em) {
  .wvu-nav__items, .wvu-nav ul {
    padding: 0 20px;
  }
}

@media (min-width: 75em) {
  .wvu-nav__items, .wvu-nav ul {
    padding: 0;
  }
}

@media (min-width: 48em) {
  .wvu-nav__items, .wvu-nav ul {
    margin-left: -1em;
  }
}

.wvu-nav__items li, .wvu-nav ul li {
  margin-bottom: 0;
  margin-top: 0;
  float: left;
  width: 100%
}

.wvu-nav__items li a, .wvu-nav ul li a {
  float: left;
  color: white;
  margin-right: 0;
  padding: 1em;
  width: 100%;
  text-decoration: none;
}

.wvu-nav__items li a:hover, .wvu-nav ul li a:hover {
  background: #EAAA00;
  color: #002855;
}

.wvu-nav__items > li, .wvu-nav ul > li {
  border-right: 1px solid #444;
}

.wvu-nav__items.nav-collapse, .wvu-nav ul.nav-collapse {
  clear: both;
  overflow: visible;
}

@media (min-width: 35.625em) {
  .wvu-nav__items.nav-collapse li, .wvu-nav ul.nav-collapse li {
    width: auto;
    float: left;
  }
}

.nav-toggle {
  float: left;
  width: 100%;
  padding: 1em;
  text-align: center;
  color: white;
}

@media (min-width: 48em) {
  .nav-toggle {
    margin-left: 10px;
  }
}

.nav-toggle:visited { color: white; }

.nav-toggle:hover {
  text-decoration: none;
  background-color: #EAAA00;
  color: #002855;
}

.wvu-nav__items,
.wvu-nav__items ul,
.wvu-nav ul,
.wvu-nav ul ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wvu-nav {
  color: white;
  background-color: #2C2A29;
  -webkit-font-smoothing: antialiased;
}

.wvu-nav h1, .wvu-nav h2, .wvu-nav h3, .wvu-nav h4, .wvu-nav h5, .wvu-nav h6, .wvu-nav a {
  color: white;
}

.wvu-nav .button { border-color: white; }

.wvu-nav a:hover { color: #2C2A29; }

@media (min-width: 35.625em) {
  .wvu-nav__items, .wvu-nav ul {
    padding: 0 20px;
  }
}

@media (min-width: 35.625em) {
  .wvu-nav__items, .wvu-nav ul {
    padding: 0 20px;
  }
  .wvu-nav__items li, .wvu-nav ul li {
  width: auto;
}
}

@media (min-width: 75em) {
  .wvu-nav__items, .wvu-nav ul {
    padding: 0;
  }
}

@media (min-width: 48em) {
  .wvu-nav__items, .wvu-nav ul {
    margin-left: -1em;
  }
}

.wvu-nav__items li, .wvu-nav ul li {
  margin-bottom: 0;
  margin-top: 0;
  float: left;
}

.wvu-nav__items li a, .wvu-nav ul li a {
  float: left;
  color: white;
  margin-right: 0;
  padding: 1em;
  width: 100%;
  text-decoration: none;
}

.wvu-nav__items li a:hover, .wvu-nav ul li a:hover {
  background: #EAAA00;
  color: #002855;
}

.wvu-nav__items > li, .wvu-nav ul > li {
  border-right: 1px solid #444;
}

.wvu-nav__items.nav-collapse, .wvu-nav ul.nav-collapse {
  clear: both;
  overflow: visible;
}

@media (min-width: 35.625em) {
  .wvu-nav__items.nav-collapse li, .wvu-nav ul.nav-collapse li {
    width: auto;
    float: left;
  }
}

.nav-toggle {
  float: left;
  width: 100%;
  padding: 1em;
  text-align: center;
  color: white;
}

@media (min-width: 48em) {
  .nav-toggle {
    margin-left: 10px;
  }
}

.nav-toggle:visited { color: white; }

.nav-toggle:hover {
  text-decoration: none;
  background-color: #EAAA00;
  color: #002855;
}

.wvu-nav__items.nav-collapse li ul li, .wvu-nav ul.nav-collapse li ul li {
  width: 100%;
}

/* Dropdowns */
.wvu-nav__items ul, .wvu-nav ul ul {
  display: none;
  background: #2C2A29;
}

@media (min-width: 48em) {
  .wvu-nav__items ul, .wvu-nav ul ul {
    display: block;
    position: absolute;
    top: 3em;
    left: -9999px;
    z-index: 9999;
    opacity: 0;
    -webkit-transition: 0.1s linear opacity;
    width: 200px;
  }
}

.wvu-nav__items li, .wvu-nav ul li {
  float: left;
  position: relative;
}

.wvu-nav__items li:hover ul,
.wvu-nav__items li:focus ul,
.wvu-nav ul li:hover ul,
.wvu-nav ul li:focus ul,
ul.show-menu {
  left: 0;
  opacity: 0.99;
}

.wvu-nav__items li:hover ul ul,
.wvu-nav__items li:focus ul ul,
.wvu-nav ul li:hover ul ul,
.wvu-nav ul li:focus ul ul,
ul.show-menu ul {
  left: -99999em;
}

.wvu-nav__items ul li:hover ul,
.wvu-nav__items ul li:focus ul,
.wvu-nav__items ul ul.show-menu,
.wvu-nav ul ul li:hover ul,
.wvu-nav ul ul li:focus ul,
.wvu-nav ul ul ul.show-menu {
  top: 0;
  left: 195px;
}

.wvu-nav__items ul li:hover ul ul,
.wvu-nav__items ul li:focus ul ul,
.wvu-nav__items ul ul.show-menu ul,
.wvu-nav ul ul li:hover ul ul,
.wvu-nav ul ul li:focus ul ul,
.wvu-nav ul ul ul.show-menu ul {
  left: -9999em;
}

.wvu-nav__items ul ul li:hover ul,
.wvu-nav__items ul ul li:focus ul,
.wvu-nav__items ul ul ul.show-menu,
.wvu-nav ul ul ul li:hover ul,
.wvu-nav ul ul ul li:focus ul,
.wvu-nav ul ul ul ul.show-menu {
  top: 0;
  left: 195px;
}

.wvu-nav__items ul ul li:hover ul ul,
.wvu-nav__items ul ul li:focus ul ul,
.wvu-nav__items ul ul ul.show-menu ul,
.wvu-nav ul ul ul li:hover ul ul,
.wvu-nav ul ul ul li:focus ul ul,
.wvu-nav ul ul ul ul.show-menu ul {
  left: -9999em;
}

.wvu-nav__items ul li, .wvu-nav ul ul li {
  float: none;
  position: relative;
  width: 100%;
}

.wvu-nav__items ul a, .wvu-nav ul ul a {
  float: none;
  display: block;
  width: 100%;
}

.wvu-nav__items ul a:hover,
.wvu-nav__items ul a:focus,
.wvu-nav ul ul a:hover,
.wvu-nav ul ul a:focus {
  background: #EAAA00;
  color: #2C2A29;
}

.wvu-nav__items li.more, .wvu-nav ul li.more {
  padding-right: 0;
}

.wvu-nav__items li.more > ul > li:first-child a, .wvu-nav ul li.more > ul > li:first-child a {
  padding-top: 1em;
}

.wvu-nav__items li.more a, .wvu-nav ul li.more a {
  margin-right: 0;
}

.wvu-nav__items li.more > a, .wvu-nav ul li.more > a {
  padding-right: 1.5em;
}

@media (min-width: 48em) {
  .wvu-nav__items li.more > a:after, .wvu-nav ul li.more > a:after {
    position: absolute;
    top: auto;
    right: 0.5em;
    content: '\25BE';
  }
}

.wvu-nav__items li.more li.more, .wvu-nav ul li.more li.more {
  padding-right: 0;
}

@media (min-width: 60em) {
  .wvu-nav__items li.more li.more > a, .wvu-nav ul li.more li.more > a {
    padding-right: 1em;
  }
}

@media (min-width: 48em) {
  .wvu-nav__items li.more li.more > a:after, .wvu-nav ul li.more li.more > a:after {
    content: '›';
    font-size: 1.2em;
    position: absolute;
    right: 0.5em;
  }
}

.wvu-nav__container {
  padding: 0 2em;
}

.wvu-nav__container::after {
  clear: both;
  content: "";
  display: table;
}

.ie9 .wvu-nav__search-toggle.inactive-search {
  display: none;
}

.ie9 .wvu-nav__search-toggle.active-search {
  display: none;
}

.ie9 .nav-toggle {
  float: left;
  width: 100%;
  height: 56px;
}
.wvu-footer {
  float: left;
  font-size: .8em;
  padding: 0 2em;
  box-sizing: border-box;
}

.wvu-contact {
  margin-bottom: 18px;
}

.wvu-contact p {
  margin-top: 0;
  margin-bottom: 0;
}

.wvu-credits {
  clear: left;
}

.wvu-credits ul, .wvu-credits p {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}

.wvu-credits li {
  list-style-type: none;
  display: inline;
}

.wvu-links li {
  list-style-type: none;
  display: inline;
}

.wvu-credits li:before, .wvu-links li:before {
  content: '|';
  padding-right: 3px;
}

.wvu-credits li:first-child:before, .wvu-links li:first-child:before {
  content: '';
  padding-right: 0;
}

.wvu-u-fake-link {
  color: #000;
  text-decoration: none;
}

.wvu-u-fake-link:hover, .wvu-u-fake-link:visited {
  color: #000;
}

.wvu-u-fake-link:hover {
  text-decoration: underline;
}

.wvu-icons ul {
  clear: both;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.wvu-icons li {
  display: inline;
  margin: 0;
}

.wvu-social {
  padding: 3px 0;
  float: left;
}

.wvu-social li {
  float: left;
}

.wvu-social a {
  height: 24px;
  margin: 0;
  float: left;
  width: 24px;
  padding-left: 0;
  padding-top: 5px;
  overflow: hidden;
  *text-indent: -9999px;
  border: 0;
  background-color: transparent;
}

.wvu-social a:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
}

.wvu-social li:last-child a {
  margin-right: 0;
}

.wvu-credits, .wvu-icons, .wvu-contact {
  float: left;
  padding-bottom: 13px;
}

.wvu-tech-flickr {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOTJCMEM0RDkxNjNCOUM5MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCMDE5RTRGMDc0NTcxMUUyQUY0MEZFMEI2QkFDQUJBNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCMDE5RTRFRjc0NTcxMUUyQUY0MEZFMEI2QkFDQUJBNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzODAxMTc0MDcyMDY4MTE5MkIwQzREOTE2M0I5QzkwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE5MkIwQzREOTE2M0I5QzkwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+8RLF3wAAAydJREFUeNp0VEtPWlEQHuDyKCoXkEcF09q02lBJGmgMPiMLdy4aTOrSpLbpH1BIbNJ203TTjXELhMTu6MINrtzYaiBINTQuUIs2FWjEWN7yhttzjkCvpT3J3HPuNzPfzL0zcygOhwPNxTAM2VUqlWB2dtY8NDQ0jvR3GrrvgUBg2+12fzo/Py9hjO1LXtjA4uLi41gs5mf+s5AuYLVaLW3+TRIulwsul+stNq7Vakw0EmG+HR4yB6EQkSN0jiCsWq0RQmT7Dvs0yXhNIrvd/mp+fv5NMpmE6OkpVKtVoCgK+Hw+2bFduVSCxK8LFJQHIyMjExqNprK+vr5FyPBjenra5PF4tjLpNP9nLAYCoZAQsD8b/z8slUqFEGq0WpDQdHVmZmZybW3Ny8WGS0tLC8iWH4/Hr0hQBjhtHo93TTCGddgmfhbH/NQCWiSgXq/vDQaDX7OZjBwTff4hBNcOQzKxTglh/J6AZERtx0D8fpdklXl6HxITClCrb0KXpCtpMBgeUkqlcgBFk+dyOfgS48ELd61VQYs9D8GXAujLXgJt8bRwpe8Myh/MkJvsAKlMKlMoFAP40yRYWa/XYSfC6ovGiqYYoKK5NlwcuIB6rU7OMplMSqFUy83y99KYiLnmQIs4wNDCNqKqtgP5XAXOZrMlbiaTiaBzQSQSgUVfh+fDvJaxbUoED3q4UB6UQ8H6qIXnnukgbbkNN8Ri/FpMJBIRDiqzcG9vb1On0w2fhMMgQIQUq0rs8uPPR81Kegy3wN3+fgiFQn6j0Wjmor4oLS8v27GjTC6HcrFIjIlDw4lIA8NSQiSy7m4SaGVlxVkul4uks/f39w/HxsYMg3p9PwIhn8+3NSLOBhNiEolEAiq1GjY2Njw2m+010lVaDmji+7xe7zaeo1QqxRyHw8zRwcEfQbN2cnzMpNNpMms+n8+LWudW6xZgjwFN0xqHw2FHkfPYGO1MoVAgUkPnBpZ3Op0OqVSqZU8/5x/3Ec9kMpnn5uaejI6OGjs7O3tIpXK5M5Tx7urq6ke/37+JoBrb9xoR+3JrDLQM/dCORsNeoi3ZbLS//X4LMACP68lQ/L8negAAAABJRU5ErkJggg==) no-repeat center center;
}

.wvu-tech-instagram {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNDgwMTE3NDA3MjA2ODExOTJCMENENDY4QkU3Njc5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMDE2QkQ3NDFGOUIxMUUzOUNCOUUzNzRFQUE4RDkxMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMDE2QkQ3MzFGOUIxMUUzOUNCOUUzNzRFQUE4RDkxMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA0ODAxMTc0MDcyMDY4MTE5MkIwQ0Q0NjhCRTc2Nzk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA0ODAxMTc0MDcyMDY4MTE5MkIwQ0Q0NjhCRTc2Nzk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+mRDwMAAAA7RJREFUeNpsVEtoY1UY/u4jz+Zxc9Mm6WTaRQKlJHYydOO0FsZx5WpWs3OhjONqEBQUXAiuFRzBpSADoqthZFBaZBBEBB1K6Ghp2o5k2k76SK7ppGnavHPv9Ts3RTrgOZyc3HPO/5/v+/7/P9LS0hLON9u2vaZpvun1em/5/f6Mqqpeia3f73fYtlqt1gNZlu9w1M7bqec/LMu66na7v06lUul4PI5gMAg6cvYGg4Gv2Wxmq9VqtlQqvUWHHymK8u0LjsbGxlAul29Fo9HPs9lsiEjQ7XZhGAYscyBQQmKHLCMWiyGRSCQ3Nze/oc21mZmZtzc2NoaOaPCyrut3ZmdngwIBKeCkfox+ryfIOt1ppoSTkxOEQiHkcjmJF9xcW1v7icjuyfzwk853mUwmSN4gZNSPamhztq2hAweNGETW4frzahW9bg/T09MIBAJfUpKkyp83kslk2ufzcbOLVrOJL77PIxnTHErch8/rph8JxW0DmWQYpmnh+qseaBENk5OTifX19Q9URuc2aaFHGoJKh44uTSXxSi6N/sCCi1SfbO2iSbrlgA8rfxvOBa/PdXhpC8J2ZGTkhkxHU3okAo/b7Whj8lD64igmEqOI6WGkxnX89ngDDx+tQg950Gi1nWHZlsOA+oA+LqgiTxRVQbtNJ6bpaFGp1oliD3892cajxwVcvXIZUS2E3/8sOuILrcQ0YERFdKmxrNpni//N7AdGFTs7W+hJXvyyWsLcbAZbOyXS61Iqii4N4yhsbGoomkwUPbEsIMqKDJkHxf+flzcR8Cj45J3rWF4t4o+1bXhcqmM4zCtAkWS4KAn1tWWR9vV6HYosUViXc2jE58G1ucswnh8xUQ1IsoLXruScgHQ6fWeI5vG4nYvp41Alx/vPnpU+1hnKWCzhiPjDw2WkJ3QKDxSPT+Fn+PMrBRQPjrFwaQrmYMDgeKB6PfiHOcXcuy8tLi7GXS7XSiqdvqDy5omLSezv76PVbrPOFOpBuiKfgDOBTYrrQjQ6im6vC+ZQ6/T09CUikwxCfs+oVJzkPSLNxPg4RqNR0lWErsMCEbqQhqZpiOgCrQUWL+jkK1bEtizO5PP5e7Va7e7e3p593GjgoFyGRME1LYIwwx4Khx0Hmq5BpIoI+dNiEZVK5cHCwsL7LzwjhULhJiv/Vwr3aSQSifPZAEvHiY4oD4Goz7Xd3V0cHh42G43G3fn5+Xets/BL//OwxTk+ZLbeYKJNUD/57D2yiaTCi37k52ek8/S83b8CDABITOpS8ZToxAAAAABJRU5ErkJggg==) no-repeat center center;
}

.wvu-facebook {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njc0QURBQzY4Mjc2MTFFMkJDM0Q5ODQzMUM5RDAwNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njc0QURBQzc4Mjc2MTFFMkJDM0Q5ODQzMUM5RDAwNTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NzRBREFDNDgyNzYxMUUyQkMzRDk4NDMxQzlEMDA1NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NzRBREFDNTgyNzYxMUUyQkMzRDk4NDMxQzlEMDA1NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvtWQkIAAAUTSURBVHjajFZbTFxVFN33MTAzDI9CKaU8WkgpkBKgBak14sQ+MCU2xuePP5rYiP7wYSJq+OtHQ2Kk0ZCSGIKJaZr6YS0pHwb4wIQYSKwtCO3wpgww5TXvue973edy7njFaePJrNwL55y19t5n730uA88fTApYw0iBlATP+j+L4PbBEiFkOkJFaBT684TsgxA7EO7p6elLoVDoe1EU76uqGkAEJUlajEQiIz6f78uOjo6TuC4X4UGk24x4pgeEnB8dHT3e2Nh41e12v7GwLnAzK3HYiaig6wa40lgoPeyEmmMZ4OS1dTTiekNDw03cl0BICIV6ZOwXMMknJydfrKqq6t+NGuV3xzZh1p8wl3E4qxsG4A8UzYAcDw/eugNw7lQuLC8v99fX118Nh8MRKpQUYWye8ENDQxVer/fe41Wx7NbIOgiSDpluDskZ03qPmwd8BQ2jHYoqEBVUaDiRDe9fLIJZ30xPTU3N18jzLxGOCpBnWm9vb892xDh7484iqKoGHieyockKvp9ryIN3vEeguTYXaso8MD6zAzxrwNxqDCRZA+8L5adKS0sfDAwMbNgO32Cp9dzU1NTL6U7X5dvDT0AQZEjjCbEKoiSDG4+vuS4PnBj/7ZAIC2sxUBQFDF2DLBcDQ+MbMLUQcbS2tl5paWkpRD4XTRQ2KVBSUvLe3EqEm5nfQSI0QVHRCxUSogwJFCRhIuPGz7Pw3U+PQJFVcw0RYdDYkfF1yM8/1NjW1tacUsDpdDb++WgbZLRM11R8InFChKOHnPDamcJkNrzaUACtZ4+Y87Ism0+e02F+ZRfCMcVVWVnZSAXSCG9SgOf5w0+3okiuYGhkMwTxhARlRzLAe7oAGGZPorm+AJpO5oEoyqYxZJ2OXoQiAoSjEng8nmJK7jB5bdWZLkpkA9nImlnM4SGOPVzDuMfh47dq0F8G+u7OwNyTEGgaqQvaM3CtLEmgYnqlOzhCztO0Z3grTTVNC7rTmRzFFOFMAaIa2JIwFEqy/qfnt8H/NAouJ58sIB3rgkEvnA4W4vF42N67WKtxYQtYPn40GzNIgD0RJXkeLOi20tfxYFVz3kIsLkBuNg/5eW7w+/1Ltt6ks1bjCgQCI2fqiiAHCysWEzBDcLO8B5JN1tDwXZb/mSMIB6NwtrYQ94gbWAfjtMhUu4DW19f3S2YGv/HmxRMQCobNQyTEpBZMARojlf5tIRSKQfFBJ1y+UAkTExO/9vT0+Gw9KSmgdnV1BbDYut9trYXzTaWwubmL4RL3skTTgOP2sohkjEK9CwYjwGoSfH6lGXQ1Md/e3n4HRWP2VsFbHhBV7KA3l5aWqr/45NyHBw+44NbgQ1DRBgdm07c//o4nxsDGVhjrA1NSlKC8KAe++vQ8lJVkbXV2dn6DnTWAPERAQMiEl9l/B2RnZ+eMjY19Vl1d/dH9v/zpt+/9AZO+ABJHMTUNPEwXFB/OggsvnYC3L9VjesZmr127dh3HA9wfRISoiEgNT3ZTjlZgHuJYf3//B2tra79hOOJPt8KGbyFgzMyuG4srW4YgSEYwGPQPDw//UFFR8Tqub0JUIUgfyqSFxu6/DywRBxXykMaFveUVJDmdlZVVwnFcGuZ5aHV1dWlwcHCiu7v7Ma6LU4tj9F2yMijVjWaJ8PQKdNlgVShDXVdoGAQK0ZaeRqobLdWF76CwyK0717rwFQrZZrX+f74qrINn931dMDYBC5rtDv7PF8XfAgwASmnGo/y0fPgAAAAASUVORK5CYII=) no-repeat center center;
}

.wvu-twitter {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njc0QURBQzI4Mjc2MTFFMkJDM0Q5ODQzMUM5RDAwNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njc0QURBQzM4Mjc2MTFFMkJDM0Q5ODQzMUM5RDAwNTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NzRBREFDMDgyNzYxMUUyQkMzRDk4NDMxQzlEMDA1NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NzRBREFDMTgyNzYxMUUyQkMzRDk4NDMxQzlEMDA1NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PheqJZoAAASvSURBVHjajFZbTBxVGP5nZ3e5uLBt6QUoraDB3h5MkJj2QQyJEkw1UWMfNLbRPuGLQduGmOgLD5ioEY2YmAjSJvbBmLYRQ2kCNGJKr5S07K7tpizLZTfsAu0uLAt7//3O7hkYyIJO8mXmnDnn+2/f+WcU2vxSskC7OAuyEmw0bwDUddCMCLIUkACSEqnNDOkvQWwC8h0Ox2vBYPDnSCQynEgkfEAgGo2OLSws9Dudzs+ampoOYd02wALk6JzYlNw8MDBwMBwOX2DmxGCY+fMZ5mNe5rc8zCenmdsDzNNxZhj23r07dAZ7SoEtQB5g3MhImnxkZKQmFou5nBHmtyeZlQfMJPBQB4zLHjF/N8fpy+12/2K1Wiuwv2gjI2Jg6u3tPQjysZ555tJ/QGTXkTolpAFyACPMJyYQSYrZbre3gaNcpixXpmvlEoN8pOWSbYl5631svi8NrIMC4ioX86FRjG3AMPMnU8zJZDLW3t5+HDx7AavIhsiKVhSjzWar2VW6u/mEiwyO5UzCduDtFtxDUakNaObTHUS/7yFawHN/MLP7Ju5HLIr6UkXJdvDccLlcYamwlJb7PKil/VoQHg7CqyHgDvNz8Ph6iPkUPFQwLkZUwUQm75Ek88eYp1vAdeajiAwqW7p48cJp8FXIopu1Yqi5ubnVlz1wNCETBo+nEUkYCv+mjKi+kGgmjthlZnPg1he7iG7PE41h3eATIn9czdu3b381Xl8GRBRRg2bAaDQWuxbxFJeAoTA29jzJEL4CA+8VrZXddpyWnv1EzyDbwSU4EMOBsFjKZP7FWVINutOZE5XEaeA5hfvVOaLzfhzVLOdzDmuO2YlGApn1cUSrqqpZyjTNbdBkChUEioQZeGHCwgIxGyG6N030hz/7yfl6nKjPS7QEEZhQzgKkD0qc1/cuo9a40ALGD1vNFR1jMI/Z4xBbMdQcgmdvINeGdRYuwej3o3KAVD6LRrE3H4ryeNy63pQyaI3L5/P1H8WB3wkvlpHPc1gWQgQf7iY6bF0lngTZl4+I3r+DCsZkOlHOd4rBuhya7urqurVaRUopUjO5aFzlzc3NvT84zSWnhzHzVMa0imiehmfbkNkEfJqCgcfLurYWyXh/rZ7IcaP/bH19fQfkOoM3j4VpRdc9LUNDQyerql746t2rRL+NSyOGdU1Y0c1FMrW6UkdUqc6O1tbWnkIHnhT1BxZE8rSlImfR6urq8xMT453nXiY6cwBOiiUhGXBK9wUQCodyDsCtK68SPV8Qnm1pafkW5D68WcxURcglzbvSSUU/3yq6ot1ua4OqIn+hm775J/PODpzWH4E2ZtNP6EO/MjffZJ5FK/f7fc7GxsaPsPcIgFNBxfL7sKajarXIky23vLOz8wOv1/t3PB4Pe9Bd7/mZh/EteIAWvRRjDgQCnr6+vrOVlZWvY/2LkryEMlkzS6fXyFszYpKGLHV1dSUNDQ01IKkqLCzcIw4RdB6cmppyd3d3325tbX0oE7YokW4P+kanZPkWqzK8HGlIg1kXdlJWJiLzvSyfNXmuyEL5jw++SUIj18SZWm0oacR0Xqf+z1+FVnjDur8LRWdAg/ZXkfWP4l8BBgDyPYa2BW2NowAAAABJRU5ErkJggg==) no-repeat center center;
}

.wvu-youtube {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEZGMkJDNDU4Mjc4MTFFMkJDM0Q5ODQzMUM5RDAwNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEZGMkJDNDY4Mjc4MTFFMkJDM0Q5ODQzMUM5RDAwNTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NzRBREFDODgyNzYxMUUyQkMzRDk4NDMxQzlEMDA1NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRkYyQkM0NDgyNzgxMUUyQkMzRDk4NDMxQzlEMDA1NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Phr6zLQAAAU5SURBVHjajFZbbBRVGP7nstvdZdm2gLUUSlhD7SYQKLASSJRGLjUlIkUTQ8QHoy81PLRvRBNeBKqJSjHaSKJhjYQY76QBEimkqVgRwqX0Qilr24V229126V66l5mdy/E/0zN1LIU4yZfZ2Tnn+/77GQ6efHHzwLzIPJiX4HH/8whhDkwRSqYjVITGoD9JyHpRYhvC1dfXV5tIJL6SJOmmqqoRRFyW5aFUKnVpYGDgvYMHD67GdYsQbkSBxYjHekDJxY6OjlV+v/+wy+XaIwXvCNnu66BOjgPRVOBdbijwVoKrahNozgVjaMTxjRs3nsZ9WYSMUJhHZK6AQd7d3b3Z5/MFSCz6TOzHkyDduYFLNeAEwVhNCAGiqCAUl0Dh9j1Q/NJeCIVCgaqqqsPJZDLFhGZFOIsnYltbW0V1dfVZqe+WNxJoBj09BYLHM0NuzS4VkSRQM1nwbN4JZW83wp1gsGXNmjWf4Ov/iJg76d1+4sSJFjIxtmX42CHQpBRwCxYYZFpeBh3vuqbNQNeB8OiwzQbT/bfxfR6822rXr1ixoqu1tXXcknxiJkXs6enZWlZa+sFQSxOfGw1irF0zZPiadxeCPDUJGn3GyNK7xoRAFCHRcxPcq1YL3g3PLUGeK4ODgxkmovNMQCgvL389dbdHiHX9BaSgABS0Kk/DgJZ7G45A2f4DwBctgVwyDnImbbynUHUNoUL4/E9Q8lSJv76+/gXkc7JK5EVTwOFw+Eeu/QH5XAZ4h20m1rhZ4HjMQxGU7HwVFm3ZAdH2sxC58AvkwiHg7Q7g0ANd4GGqvwuU+ENnZWWlH7eeR1Av5FkBURRLp8cegEJLES2bFUAbiKoYz6LbA8t2vwFPb9sNE5d/gwe/fgtSLIIMAno2CXJyCtxu93KaT+aBIFq6s0CWcoCNBJwsWzwQMNFzmsVmB2LDMGIe8hKuxSqj4dQUBQSnQMlFVvacaJYpJi3OudxFVIDHqqFtQgVE9MAsU03KwkhbK4TOnILUYL8hxIk27AsFFDREcDghk8kkrbPLFCBIHCryrfXe++EkLmQhQguJzQFKOgVjly9A8PuvIRHsAx4d5+0FWElYRZoMCnpuL8fuLl0Go1euDFtmky6agysSiVxa/vy2F68vLoVscgJsWEm0B3SsmPaG/ZAavgcczxmJpRs0M0+I6XgS1r5ZA5KqjmMfXGVNZpSp2QcCzp3Ijtpde3WOXxi80EqzbgioSJSNRY10EawonfWAiUwyCY6VlVB96GO4evPWzw0NDW3YH7Sb04j87Aju7OzM19XVyetrX9kZux+CUSxZAWNPjPkDRlP928kz5GkkV50e2PX5KdA9xX/v27fvs2g0Ool8NA85KsAzL2nMZJygpx/cvx+o+bAF1h14H+I5GaZiMchls5CnjafkscokmMaZFpt4CLaVPqg7eQaKnl092dTUdAwna4RZbpAz3tlJSud5cWFhobe3t/cLtFAa+rODfPfOa+TTqjJytFwkR8o48tEqN/ly+zrSfvwoST+MEbR4oLGx8V3cuwXhQ5Sy80G0TmuODTza4osRKwOBwFvhcPh3RVEyifEwCfd2kdHbN0g02E/kXJbE4/HRixcvflNRUfEyrt/EyJciFrJG4+eeB6aIjQm5a2pqluJs2YokGzweTznmxI51nhgZGRk+d+7ctebm5rtsJKQZMuzQUVmZPnKimSIiC5nTArvFbY2VosTinWO/zfIk851o8x34NgaT3Kw688BXGPIWq/X/81VhJp6f83XBWQRMaJYz+JEvin8EGAC8v7igs0rpyAAAAABJRU5ErkJggg==) no-repeat center center;
}

@media (min-width: 48em) {
  .wvu-footer {
    width: 100%;
  }
  .wvu-contact {
    width: 100%;
    float: left;
  }
  .wvu-credits, .wvu-icons {
    margin-left: 0;
    margin-right: 0;
    width: 50%;
  }
  .wvu-credits {
    float: left;
  }
  .wvu-credits ul, .wvu-credits p {
    margin-bottom: 0;
  }
  .wvu-icons {
    float: right;
  }
  .wvu-icons ul {
    float: right;
  }
}
  10. Click "DONE"

Add Content Blocks for Masthead, Navigation, Content, and Footer

You will need to add content blocks for the masthead (including your unit’s word mark and a search box) and the navigation.

Masthead

Your masthead consists of your unit’s wordmark and a search box.

Wordmark
  1. In the right-hand panel, make sure "ENTIRE SITE" is selected
  2. Click the "CONTENT" tab
  3. Scroll to the very bottom and click the "HTML & CSS" button
  4. Drag the "HTML" panel to the top of your page
  5. Click "HTML" tab.
  6. In the "HTML" tab, copy and paste the following code: 
    <a class="wvu-skip-nav" href="#wvu-main-content">Skip to main content</a>
<div class="wvu-masthead">
  <div class="wvu-masthead__container">
    <a class="wvu-masthead__logo" href="/">
      <span class="wvu-masthead__university-name">West Virginia University</span>
      <span class="wvu-masthead__title">[Your Site Name]</span>
    </a> 
  </div>
</div>
  7. Swap out the placeholder text [Your Site Name] with your own unit’s name in the HTML code.
  8. Hover over your wordmark. It should turn red. Click the "Dimensions" icon (2nd from the left). Enter 50% for the "Container Width"
  9. Click "DONE"
Search Box
  1. In the right-hand panel, make sure "ENTIRE SITE" is selected
  2. Click the "CONTENT" tab
  3. Scroll down until you see the "Add Content Blocks" section
  4. Click "DISCOVERY"
  5. Drag and drop the "Search Box" after your wordmark block in the masthead
  6. Hover over your new search content box. It should turn red. Click the Settings (wrench icon)
  7. Make sure "Display Search Button" is set to "ON"
  8. Set "Alignment" to "Right"
  9. Click "DONE"
  10. Hover over your search element. It should turn red. Click the "Dimensions" icon (2nd from the left). Enter 50% for the "Container Width"
  11. Click "DONE"

Navigation

To see how to organize your pages, see the SmugMug documentation. We recommend organizing your pages by year and month. See photos.wvu.edu for an example.

  1. You will need to add another HTML block. Follow the same instructions as for the HTML block you added for the wordmark in your masthead. Copy and paste the following code: 
    <div class="wvu-nav">
  <div class="wvu-nav__container">
    <ul class="wvu-nav__items nav-collapse">
      <li><a href="/">Home</a></li>
      <li><a href="/second-link">Second Link</a></li>
      <li><a href="/third-link">Third Link</a>
      	<ul>
          <li><a href="/third-link/first-second-level-link">First Second-Level Link</a></li>
          <li><a href="/third-link/second-second-level-link">Second Second-Level Link</a></a></li>
        </ul>
      </li>
      <li><a href="/fourth-link">Fourth Link</a></li>
	</ul>
  </div>
</div>
  2. Substitute your own link titles and URLs. To find the URL for the page you want to link to, navigate to that page, copy the URL, and paste it into the href property on the corresponding navigation item.
  3. Hover over your new region, click the Settings (wrench icon). Set the top, bottom, left, and right margins to 0px.
  4. Click "DONE"

Content

Anything in between the header and footer i.e. gallery indexes, slideshows, etc. is done through SmugMug’s CMS/theme builder. See SmugMug’s documentation on adding content blocks for more info.

When customizing these areas, for example when defining text and link color, make sure to follow WVU’s accessibility guidelines.

Footer

  1. In the right-hand panel, make sure "ENTIRE SITE" is selected
  2. Click the "CONTENT" tab
  3. Scroll to the bottom, click the "HTML & CSS" button
  4. Drag and drop the "HTML" panel after your content
  5. In the HTML tab, copy and paste the following code: 
          <footer class="wvu-footer wvu-footer--533 wvu-blue background">
  <div class="wvu-footer__container">
    <div class="wvu-contact">
  
</div> <!-- /.wvu-contact -->
    <div class="wvu-credits">
  <ul>
    <li><a href="https://about.wvu.edu/wvu-facts">Accreditations</a></li>
    <li><a href="https://webstandards.wvu.edu">Web Standards</a></li>
    <li><a href="mailto:web_services@mail.wvu.edu">Questions or Comments?</a></li>
  </ul>

  <p>© 2018 West Virginia University. WVU is an EEO/Affirmative Action employer — Minority/Female/Disability/Veteran.
    <span class="wvu-credits__last-edited">Last updated on June 19, 2017.</span>
  </p>
</div> <!-- /.wvu-credits -->

    <div class="wvu-icons">
  <ul class="wvu-links">
    <li class="first"><a href="https://www.wvu.edu/SiteIndex/">A-Z Site Index</a></li>
    <li><a href="https://campusmap.wvu.edu">Campus Map</a></li>
    <li><a href="https://careers.wvu.edu/career-opportunities">WVU Careers</a></li>
    <li><a href="https://directory.wvu.edu">Directory</a></li>
  </ul>
  <ul class="wvu-links">
    <li><a href="https://give.wvu.edu/">Give</a></li>
    <li><a href="https://careerservices.wvu.edu/students/mountaineertraklogins">MountaineerTRAK</a></li>
    <li><a href="https://alert.wvu.edu/">WVU Alert</a></li>
    <li><a href="https://wvutoday.wvu.edu">WVU Today</a></li>
    <li><a href="https://portal.wvu.edu">WVU Portal</a></li>
  </ul>

  <ul class="wvu-social">
    <li><a class="wvu-facebook" href="https://www.facebook.com/wvumountaineers">WVU on Facebook</a></li>
    <li><a class="wvu-twitter" href="https://twitter.com/WestVirginiaU">WVU on Twitter</a></li>
    <li><a class="wvu-youtube" href="https://www.youtube.com/user/westvirginiau">WVU on YouTube</a></li>
  </ul>
</div> <!-- /.wvu-icons -->

  </div>
</footer>
  6. Click "DONE"

Publish your theme

Once you have it styled, you need to publish your theme.

  1. In the green bar at the top of the page, click "DONE"
  2. Click "PREVIEW"
  3. If the theme looks correct, click "PUBLISH." If not, click "EXIT" and make sure you’ve styled the theme correctly.
  4. After making any changes to correct any mistakes, repeat steps 1-3.

Editing Your Existing Theme

If you need to go back and edit your theme later, see the SmugMug documentation.