Table of Contents

Evergreen 3.5+

As of Evergreen 3.5 it supports an org unit setting for adding CSS directly to the OPAC. This page will act as a repository for community members to share CSS code for customizing the OPAC.

Background Elements

Header Background

#header-wrap {
    background-color: #ced42c;
    background-image: none;
}

Turns the color of the background above the link bar a dark yellow.

#gold-links-holder {
    background-color: #ced42c;
}

Turns the color of the background of the links bar a dark yellow.

body {
    background-color: #ced42c;
}
#footer-wrap {
    background-color: #ced42c;
    background-image: none;
}

Turns the background of the footer and the page that continues past it a dark yellow.

Font and Text Changes

#footer a {
    color: #ced42c;
    text-shadow: none;
}

Changes links on the bottom of the front page to a dark yellow.

#copyright_text, #footer_logo {
    color: #ced42c;
}

Button changes

Button classes beginning with .btn- are Bootstrap's built-in button colors.

To override them in your custom styles, specify their normal, hover/focus, and disabled states:

.btn-success {
    background: #007a54;
    color: white;
}
.btn-success:focus,
.btn-success:hover {
    background: #00593d;
    color: white;
}
.btn-success:disabled {
    background: #52635E;
    color: white;
}