Customizing Arctos headers with CSS

* IMPORTANT *

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.
* IMPORTANT *

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.
  1. 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.
  2. Create a background image of height=1px less than the logo you created in (1).
  3. 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{
        color:white;
    }
    // and the links at the top-right
    #headerLinks, #headerLinks a {
        color:white;
        size:small;
    }
    // add hover behavior to differentiate the links from text
    #headerLinks a:hover {
        color:red;
    }