Customizing Arctos headers with CSS

[ copied from ]


You will want to try this out in TEST before moving to production!

You must coordinate loading all images with the development team, or host them on your own site.


To customize the header for your collection, you may simply supply the required values under Manage Collections.

To customize beyond the defaults, you’ll need to create a CSS file, coordinate loading it with the developers, and select it under STYLESHEET on the Manage Collection form.

Example: Use a dark background image for the header, and change the header links to be white for contrast.

Create a transparent-background logo approximately 100px in height. Load to Arctos (you’ll need developer assistance), and select the image in HEADER_IMAGE. Set HEADER_COLOR to “white” or it will override your image with gray.
Create a background image of height=1px less than the logo you created in (1).
Create a CSS file. (// signifies a comment below. This is not valid CSS comment syntax!)
// header_color is the ID of Arctos header
#header_color {
// this is the background image
background:url(“/images/DMNSHeaderBg2.png”) repeat-x scroll 0 0 #1C3664;
// change the color for the large text
.headerInstitutionText, .headerCollectionText{
// and the links at the top-right
#headerLinks, #headerLinks a {
// add hover behavior to differentiate the links from text
#headerLinks a:hover {