Jeremy Smith's blog

Entry Is Labelled

CSS-ing Case Round 6: In Technicolor

<DISCLAIMER>

Do not use the markup and CSS found in this post in any official way associated with Case Western Reserve University. These are not official; not endorsed by ITS (my employer, as is the University in general); and not endorsed by University Marketing & Communications. These are all experimental and are being shown for learning purposes only. Again, do not use them. They were created by someone who is most definitely not a professional web designer. As a matter of fact, small animals may have been harmed in the making of these templates; they are not FDA approved; and no oversight committee was employed to guarantee the sanity of this endeavor. If you are looking for templates to create your Case Western affiliated web site, you should be over at the Web Toolkit and not here.

</DISCLAIMER>

Round 6

The colors were easy. I just pulled all of the changing colors out of the original set of CSS files and created a CSS file for each color: cranberry, forest, lime, navy, olive, purple, rust, teal, and turquise. (See the directory listing here.) Each file looks basically the same:

#masthead {
background: rgb(124, 42, 51) url("../images/casecranberry.gif") no-repeat left;
}
#masthead div {
background: rgb(124, 42, 51) url("../images/mast_cranberry_campus.gif") no-repeat right;
}
#headline {
background: rgb(124, 42, 51) url("../images/img_feature_photo.jpg") no-repeat right;
}
h2 {
background: rgb(136, 56, 62);
}
#sitenav, #headline p, #right_side_box h3 {
background: rgb(124, 42, 51);
}

The only tricky part was the headline area. If you are doing one of the basic templates (i.e. it doesn't include the "headline" area), the masthead should follow the overall color scheme. However, if you are using the advanced templates, the masthead must be grey. To make this happen, in the headline.css file, it overrides the color setting for the masthead setting it back to grey with the rules:

#masthead {
background: rgb(92, 104, 113) url("../images/casegray.gif") no-repeat left;
}
#masthead div {
background: rgb(92, 104, 113) url("../images/mast_grey_computer.gif") no-repeat right;
}

What this means is that the headline.css file must always come after the color-defining CSS file. I don't really think that's a big deal. I thought about resorting to Javascript to enforce this, bet *eh*, I don't really think it matters too much.

Rather than resorting to what I did in Round 5's description with all of the linking to html files that were exactly the same sans different stylesheets loading, I stuck some simple form controls at the top of the page and used some Javascript to enable/disable the appropriate stylesheets depending on the selection. All of the Javascript does is loop through the <link> elements whenever a change occurs to the form, and enables the stylesheets that are checked and disables the rest. This Javascript, which again relies on the prototype library, is simple and is located at http://blog.case.edu/jms18/examples/mockups/css-case/round6/javascript/change_css.js.

So... I still need to fix IE (again). And I need to push some pixels around to get everything lined up more like the real templates. Then I need to develop the canned "good" styles (i.e. the styles that just have a right sidebar don't actually follow the official templates). And there's probably some other stuff in there like coming up with a print stylesheet and handheld stylesheet. That kind of stuff.

Comments

  1. gravatar

    The JS selector doesn't work in Konqueror. Works fine in Operate and FF on Linux though. Not that this is mission critical or anything...

  2. gravatar

    It isn't mission critical, but just to satisfy my curiousity, does Konqueror throw a Javascript error?

  3. gravatar

    Error: http://blog.case.edu/jms18/examples/mockups/css-case/round6/javascript/prototype.js: ReferenceError: Can't find variable: HTMLFormElement

  4. gravatar
    The only tricky part was the headline area. If you are doing one of the basic templates (i.e. it doesn't include the "headline" area), the masthead should follow the overall color scheme.

    It seems to remain gray for the “forest” color scheme in your latest revision.

    Is there just one masthead image for each color, or should those be independent?

  5. gravatar
    It seems to remain gray for the “forest” color scheme in your latest revision.

    Whoops. Fixed that.

    Is there just one masthead image for each color, or should those be independent?

    Which image; the one on the left (the logo with background coloring) or the one on the right (pictures of the campus/pictures of students in the library or on computers) that is "toned" ("blended," maybe?) to the color scheme.

  6. gravatar
    or the one on the right (pictures of the campus/pictures of students in the library or on computers)

    Yeah, that one. For maximum flexibility, each image could be available in each color. Just another knob to twiddle.

    What do you think about the order of the markup? In my CSS-ification, I put the left side bar below the main content in the markup, and repositioned everything in the stylesheet, so lynx users don't have to skip past too much navigation to get to the good stuff.

    Also, your personal blog stylesheet has a typo ("diplay") on line 231, and the top-level /styles.css has a stray double quote on line 245.