Changing the accent color

The following elements in the DLC theme using the “Red and Gray” swatch use MIT red, or #A31F34, for the accent color:

  1. 1px page border
  2. 6px top page border
  3. link color
  4. h1, h2, and h3 heads
  5. menu bar
  6. 2px footer border

To change the color of these elements to, say, #ed7b03, create a new style sheet containing these rules:

#page {
border: 1px solid #ed7b03;
border-top-width: 6px;
border-top-style: solid;
border-top-color: #ed7b03;
}

a {
color: #ed7b03;
}

a:visited {
color: #d16b00;
}

a:hover {
color: #d16b00;
}

a:active {
color: #d16b00;
}

h1, h2, h3 {
color: #ed7b03;
}

#site-name a {
color: #ed7b03;
}

#site-name a:visited {
color: #ed7b03;
}

#site-name a:hover {
text-decoration: none;
color: #d16b00;
}

#primary-menu-bar, #menu-bar #block-system-main-menu.block-menu .menu-wrapper {
background-color: #ed7b03;
}

#primary-menu-bar nav .menu .menu, #menu-bar #block-system-main-menu.block-menu .menu .menu {
background-color: #ed7b03;
}

.responsive-menus.responsified span.toggler, .responsive-menus.responsified .responsive-menus-simple li a {
    background-color: #ed7b03;
    color: #FFF;
}

#page > footer {
border-top: 2px solid #ed7b03;
}