Monday, April 6, 2009

New OPAC coming + more

•I've added some notices about what doesn't work off-campus to the databases by name page and subject pages, and moved the list to appear sooner on the off-campus access page. I used "*" to do this most often. Let me know if I missed anything:
http://www.ulm.edu/library/dbname.html
http://www.ulm.edu/library/subject/index.html (sub-pages)
http://www.ulm.edu/library/offcampus.html

• The new OPAC is coming along pretty well. I'm quite pleased that most of my design elements have made it into our current "training" version:

http://ulm.training.louislibraries.org/uhtbin/cgisirsi/OpHunLnJ4V/ULM/175150005/60/69/X

The logo is now a .GIF image after all, but I did find a way of making it look nice by added a maroon border that lets it blend in without the choppy edges.

However, the text displays dramatically differently in FF than in IE, and the text at the top wraps far too early. If you're not using IE, here's what that looks like:
http://www.ulm.edu/~niemla/h/ie6vff.jpg
This problem persists in not only our version, but in those of other libraries as well. So, finding a way to fix it would entirely be worth the time. I came up with a possible solution and emailed that to LOUIS:
Okay, I think I have something, now...

I can see that you've already made some good changes to the live training tempate that makes it work well in Firefox by not wrapping at all-- I did the same thing. I apologize if I mention other things you've already done. But the new one still looks all wrong in IE6, and likely IE7. I've made a new one that fixes that.

Here is my live test version:
http://www.ulm.edu/~niemla/h/elib-fin-final-2/search.html
I've only been able to test it in IE6 and Firefox, however, because I am now at home and not a work, where I have 7 browsers. Yet IE6 is the hardest to please, so that really means something.

Rather than apply these changes to the current files you have, I'll give it to you in pieces so that you may use it for other templates and so it will not interfere with the working parts of your current version. Just in case email formatting fouls up the code, here is a plain text version of this email:
http://www.ulm.edu/~niemla/h/banner-fix.txt

1)In the HTML of the page being displayed (which may mean the env files you were talking about):

1a) eliminate all heading tags such as

and

in the header and footer. (important)


{blogger won't display the HTML as tags, of course, so you can't see them here. I'm talking about "h2" and "h3" tags being used when they haven't been defined in the CSS, which forces the browser to sort of "guess" incorrectly --KN}



1b) "branding_container" repeats itself (it is place within another instance of itself). By removing one of those containers, it is better-behaved. I don't know what that has to do with the env file you were talking about, but fixing the containers is the key to getting the wrap to work right (!). So then the HTML for that part would be, starting from the beginning of "header_container" [ I anticipate that the words "Training System" won't be in the final product, but I've left them anyway]:










e-Library @
The University of Louisiana at Monroe

Training System

{blogger won't display the HTML as tags, of course --KN}



[Note that I didn't include the closing "
" that belongs to "
", that comes later.
...so " "branding_container" should only occur once within "header_container", and it has no other "div"s inside it, and it comes after "branding_image." I'm not yet sure how to make the env file work in this way, if it's the problem]

2) In elibrary.css:

2a) Now that those heading tags are gone, we can use the CSS to define the text appearance and the container's behavior. I have made it so that the container the text is in is sized properly and won't wrap until it has to. In Firefox, the text doesn't wrap at all and just stays stationary. I also increased the top margin for the text so that it's not so close to the top.

That's a lot of stuff, so to keep it simple, here is the CSS for the entire "Header" section of "elibrary.css," with your new image URLs already added, so it may be pasted in:

/*--- Header -----------------------------------------------------------------*/
.header_container {
color:#ffffff;
background-color:#5F0000;
border-bottom:2px solid #5F0000;
background-image:url(/WebCat_Images/Dstyle/header_container.jpg);
background-position:top left;
background-repeat:repeat-x;
overflow: hidden
}

.header_container a {
color:#ffffff;
}

.branding_container {
margin-top: 0px;
margin-top: 20px;
background-image:url();
background-position:top left;
background-repeat:no-repeat;
font-size: 1.7em;
color:#ffffff;
font-weight: bold;
vertical-align: middle;
overflow: hidden
}

.branding {
float:left;
display:inline;
display:none;
}

.branding_subheading {
margin-top:24px;
margin-left:20px;
font-style:italic;
display:none;
}

.login_button {
background-color:#45bddb;
border:1px solid #066b7d;
background-image:url(/WebCat_Images/Dstyle/login_button.jpg)
background-position:bottom left;
background-repeat:repeat-x;
color:#ffffff;
}


.module_language_choices {
float:right;
width:20%;
color:#ffffff;
}

.vreference {
float:right;
width:20%;
color:#ffffff;
}

.login_container a {
float:right;
text-align:right;
margin-top:8px;
}

2b)
There is also a small color error on our page; In "elibrary.css", the color #870101 should be changed to #5F0000. But I've already done that in the CSS code shown above.

3) In "sirsidynix.css" [This is the only change I've ever suggested for this file] the margin of "branding_image" should be reduced from 10 TO 4, because the logo is already big enough (line 266):

.branding_image {
display:inline;
float:left;
margin:4px;
}

4)
And that should do it, I think. My CSS/HTML validator is complaining of some things, and I'll fix those if I can but it seems to display right.

[ I spent a lot of time at home on Friday doing all of this, so again, if my venomous hatred of IE ever seems personal, that's because it is personal! :-P ]

• BTW, our catalog and EZproxy aren't getting along today. It is a mystery for now.

•I also today added a notice about the "American History in Video" database trial Mike posted about in the reference blog.

2 comments:

Dr. Karen J. Cook said...

Karen,
Nice job with the asterisk notations of databases not available from off campus; the notation is clear but not obtrusive. (And thanks for testing these, too.)

One comment: I would suggest that you lose the phrase "with our apologies" from the remote access page notation about the lack of connectivity. The apology suggests that (a) it is our fault and (b) that we could fix it if we really tried--to my knowledge, neither is true. We may wish that the situation were different, but I don't think we need to be assuming blame or inviting blame for something beyond our control.

I think that the graphics on the training page look good.

Karen N. said...

I was unsure about using the phrase "with our apologies," but at the time I actually was sorry, yet for no good reason. I'll soon remove it.

Thanks very much also for your compliments.