As promised several months ago, the Pacoima Ranch webdevelopers have developed easy to follow instructions for controlling colors in navform substitutes, and all buttons EXCEPT those used in true dropdowns. True dropdowns are scrolling menu dropdowns with the arrow on them. There is no known way to control true dropdowns, not even in Internet Explorer. This is an example of a true dropdown (in this case, a true navform):
The problem 'til now has been that any CSS2 that made the Generation 7 (or 6) browsers (Internet Explorer 5.5x+, NS6.x+, Mozilla 0.9x+, Opera 5.x+, Konqueror 1.x+, and WebTV) see colored buttons would break Netscape 4.x browsers. Since 2-20% (site dependent) of the 'Net's surfers still use the very old NS4, this is a real problem. Most webdevelopers want to use the newer colored buttons, but are reluctant to lockout NS4 surfers. When a colored button breaks in NS4, NS4 usually locks up. The Pacoima Ranch webdevelopers have found a method that causes all Generation 7 (or 6) browsers to see the colored buttons AND allows NS4 to ignore the color instructions so that a plain button is seen which will not break in NS4. Such a colored button looks like this:
The plain version of this same button looks like this (NS4 surfers will see both examples as the same):
To achieve this colored button effect, place a special inline style statement above the </head> tag in your webdocument. This inline style statement should be separate and should be placed in the <head> </head> section no matter how you usually use CSS. This is how NS4 can ignore the statement. Do not add the statement to your regular CSS, it breaks. Do not CSS validate the special style statement, CSS validators object to some portions of it - if a validator changes the internal spacing, the style statement will break. Do not put the separate border elements nor the separate font elements in single tag style, it breaks. Rearranging the special style statement via Pretty HTML (HomeSite text and HTML editor) is OK, it doesn't break the statement. The special style statement used to create the colored button above looks like this:
<style>
.form {
border-right: #cccccc 1px solid; border-top: #cccccc 1px solid;
font-size: 10pt; border-left: #cccccc 1px solid;
border-bottom: #cccccc 1px solid; background-color: #ffffef;
color: #E0B37C; font-weight: bold; font-family: arial, sans-serif;
}
.formbutton {
border-right: #cccccc 1px solid; border-top: #cccccc 1px solid;
font-size: 9pt; border-left: #cccccc 1px solid;
border-bottom: #E0B37C 1px solid; background-color: #ffffef;
color: #cccccc; font-weight: bold; font-family: arial, sans-serif;
}
</style>
The code for the colored button looks like this:
<form method="POST" action="buttoncolorsjanuary2003.html">
<input type="submit" value=" reload this page " class="formbutton">
</form>
The class="formbutton" statement causes the special style statement to color the button. Removing it causes a plain button. Similarly, the text typein and textarea portions of an input form (formmailer and similar) can be colored by adding a class="form" statement to the various elements. This looks great in most browsers and will be ignored in those incapable of rendering colored buttons.
There's nothing special about any of the names assigned to things in the above samples (form, formbutton, the colors used). Experiment at will with the code. It usually looks best if buttons, text typein (or textarea) and scrollbars are all similar color schemes. Be sure to get some contrast in the colors, colorblind people need a little contrast to see things.
Now for that promised navform substitute in colors. The sample near the top of this article is a true navform, boring, and can't be made to match colored buttons and scrollbars no matter what you do. The web browser API simply has no interaction with any exposed stub in HTML, XML nor CSS to do it. You can't paint what isn't there. But you can use a JS, CSS, and DHTML substitute that looks and acts like a navform dropdown. This substitute colors beautifully. Here's how they look (do a mouseover to see them in action):
The first sample is primarily horizontal and the second vertical. Though they look and act like a navform, they're really JS, CSS and DHTML. To use them, copy this arrow  file and this blank.gif file. Also copy and save the header tag (place in the <head> </head> part of your webdocument):
<script type="text/javascript" language="JavaScript1.2" src="stm31.js">
</script>
Copy the stm31.js file and place in a convenient directory. Be sure to save as a JS Script File (text file), NOT binary. Long or short URL's work equally well. The navform substitutes work as either embedded JS (use script exactly as written) or an external JS (erase <script type="text/javascript" language="JavaScript1.2"> from the top and </script> from the bottom). The script is called like this:
<script src="name_you_picked.js">
</script>
You can align it, put it in a table, use an SSI or PHP Include of it, it's very versatile.
The handy thing about using an external JS as a navform substitute is that by updating a single file an entire site, no matter how large, is given fresh navigation updates simultaneously. Here's a link for both types in a text file. Use and modify as you would any complex JS.
The special code was originally developed via SoThink's DHTML MenuMaker. A trial version is available to play with to get even more ideas. Unlike the many other DHTML menu programs currently offered, this one actually works in most browsers, not just IE5, IE6, NS6, and NS7. This publication has no relationship with SoThink, nor is the link above an affiliate link - we just really like how the DHTML MenuMaker works.
One thing to remember when using colored buttons, they still have to look like buttons and colored forms and navforms still have to look like what they are. As a rule, a lighter (or darker) border and contrasting (yet complimentary) backgrounds and text colors allow the eye to find them. Now get out there and color something!
|
