Evergreen DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== 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 ===

<code>
#header-wrap {
    background-color: #ced42c;
    background-image: none;
}
</code>
Turns the color of the background above the link bar a dark yellow.

=== Links Bar Background ===

<code>
#gold-links-holder {
    background-color: #ced42c;
}
</code>
Turns the color of the background of the links bar a dark yellow.

=== Footer Background ===

<code>
body {
    background-color: #ced42c;
}
#footer-wrap {
    background-color: #ced42c;
    background-image: none;
}
</code>
Turns the background of the footer and the page that continues past it a dark yellow.

==== Font and Text Changes ====

=== Bottom Links on Front Page ===
<code>
#footer a {
    color: #ced42c;
    text-shadow: none;
}
</code>
Changes links on the bottom of the front page to a dark yellow.

=== Footer Text on Front Page ===
<code>
#copyright_text, #footer_logo {
    color: #ced42c;
}
</code>

==== Button changes ====

Button classes beginning with ''.btn-'' are [[https://getbootstrap.com/docs/4.1/components/buttons/|Bootstrap's built-in button colors]]. 

{{ :library:bootstrap4-buttons.png?direct |}}

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

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