New OPAC design!

I heard from Chuck today that another page design is needed for the new OPAC that's coming (looks like "Enterprise" to me, but I don't think that's what it is... not that it matters). It is also needed very soon, he says. The current version still looks like regular "Enterprise" and needs to be customized for ULM:
http://ulm.training.louislibraries.org/uhtbin/webcat (this "works")

So, this is what I've done (this won't "work" because it's on my no-script-having webspace: this is all about looks);
Search page: http://www.ulm.edu/~niemla/h/elib-test2/X2.html
Result page: http://www.ulm.edu/~niemla/h/elib-test-result/y.html

(I've also made another with another gradient background for the "go back / logout" bar:
http://www.ulm.edu/~niemla/h/elib-test/X2.html
Frankly I don't like it as much, but if you-all do, we can use it)

I won't move on to tweaking the results page template (which has a bunch of blue-colored text and images I'll need to change also; do a search in the working OPAC and you'll see what I mean) if the main design is all right with you-all.

Here's a detailed explaination of what I've done (good gravy this is long; try downloading this text file):

0) All test pages and their CSS have been modified for design testing, including changing image URLs. They are not meant to be final products as-is. To see what has been changed if this guide does not suffice, here is the URL to the CSS:

http://www.ulm.edu/~niemla/h/elib-test2/elibrary.css


1)
In the file "elibrary.css" :

a)
The bottom border of the containter called ".header_container" should be changed FROM #2D4C85 TO #870101

The background color of ".header_container" should be changed FROM #ffffff TO #870101

b)
In ".buttons_container" the background color should be changed FROM #a7ef8e TO #a39058 and this line should be added to create a new background image ("buttons_container-ulm.jpg"):

background-image:url(buttons_container-ulm.jpg);

(If the background image is unacceptable, just using the container background color works also)


c)
The link color (around line 17) should be #660000

d)
All instances of the color "#3662E0" should be changed TO "660000"
All instances of the color "#2860d0" should be changed TO "#cfad46"
All instances of the color "#0465A3" should be changed TO "#a39058"

e)
In "input.button," the text color should be changed FROM #ffffff TO #000000 to be read clearly with the new color version of the search buttom ("buttom-ulm.jpg"). Its border should also be changed FROM 0465a3 TO #8C8C8C

f)

Simiarly, #ffffff should be changed TO #000000 in all other buttons using the new button color. These are:

.itemdetails_button
.keep_button
.hold_button, .buynow_button, .reqorder_button
.tab


g)This line should be added to the top of the CSS file. It will make the background color the same as our home page:

body { background-color: #ececdb; }

h)
In "input:focus" (line 42), the border color should be changed FROM #8ef084 TO #FEA3A3 and the background color should be changed FROM #eaffe8 TO #FFE8E8

i) In ".branding_container" (about line 117) add this line to make a little bit more room in the container:

margin-top: 0px;


2)
In the html of the PHP form page (or whatever you're using) that is displayed:

a) for the text "training system," or anything else that is supposed to be light gold, the color "#cfad46" must be used, or the code won't work at all (also, this is official ULM gold)

b) Added "The" to our institution's name and a carriage return so that the name fits on one line. The markup is:

e-Library at
The University of Louisiana at Monroe

(Blogger will likely not display markup. Try downloading this text file)

Also changed e-Library's "at" to "@". This can be changed back to "at" if it is not appropriate.


3) Some images have been changed and given new names to indicate that they are different:

header_container.jpg --> header_container-ulm.jpg

searchsum.jpg --> searchsum-ulm.jpg

ulm.gif --> ulm.gif (Branding image. New file, same name for this one)

button.jpg --> button-ulm.jpg

buttons_container-ulm.jpg --> (a new creation)

The URLs in the files in which they appear will need to point to them wherever they are, obviously.


4)
sirsidynix.css was not changed

5 [Trivial])
I noticed an empty image URL in ".branding_container" (in elibrary.css) for a brand image, which is instead currently in the html reading the CSS instead. It is possible to add the ULM logo ("ulm.gif") as a non-repeating background image in one of the header containers. However, I am in no position to change something like that. It may display differently in different browsers. Such a change is likely not necessary.

Thanks,
Karen Niemla