Hi,<br />
<br />
How do you change the font/colour of text in forms? For instance on this website, you can type into the fields in blue, bold text, rather then the standard black text. So how can you make inputs into the forms appear coloured and not generic? Is this html or java? Thanks for any help.<br />
<br />
Also, anyone know how to create coloured tool bars, again like this website has<br />
---------------------------------><br />
They are very smart and quick loading and would be a perfect addition to my site.<br />
<br />
Any ideas much appreciated as always,<br />
<br />
Martyn<!--content-->Sure thing! Check out the easy tutorial I made at my site:<br />
<br />
Making colorful forms (<!-- m --><a class="postlink" href="http://www.dark-street.com/tutorials/html/html_4.html">http://www.dark-street.com/tutorials/html/html_4.html</a><!-- m -->)<br />
<br />
To make colorful scrollbars, then add the following code into your CSS document:<br />
<br />
body {<br />
scrollbar-3dlight-color: gray; <br />
scrollbar-arrow-color: white; <br />
scrollbar-base-color: silver; <br />
scrollbar-darkshadow-color: black; <br />
scrollbar-face-color: gray; <br />
scrollbar-highlight-color: white; <br />
scrollbar-shadow-color: gray <br />
}<!--content-->If you use forms on your site, you should know that there is a very simple method to<br />
change the "default" appearance of your form elements. Using CSS, we can assign <br />
attributes to the various form elements on our pages to conform to an overall design. <br />
Just about every element can be assigned styles for fonts, background colors, etc.<br />
<br />
Here's an example ( style in the form) :<br />
<br />
<form><br />
<input type="text" style="font-family:verdana; font-size:12px; color:blue; background-<br />
color:ffffcc;" value=" Choose below "><br><br />
<select style="font-family:verdana; font-size:12px; color:blue; background-color:ffffcc;"><br />
<option>option 1</option><br />
<option>option 2</option><br />
<option>option 3</option><br />
</select><br />
<input type="submit" value=" Go! " style="font-family:verdana; font-size:12px;<br />
color:blue; background-color:ffffcc;"><br />
<form><br />
<br />
And used in a style sheet<br />
-----<br />
/*default input*/<br />
input {<br />
font-family:verdana;<br />
font-size:12px;<br />
color:blue;<br />
background-color:ffffcc;<br />
}<br />
<br />
/*green input*/<br />
input.green {<br />
font-family:verdana;<br />
font-size:12px;<br />
color:blue;<br />
background-color:00ff00;<br />
}<br />
------<br />
<br />
At the top of your .htm file, add the following line:<br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"styles/main.css"><br />
Take note of the href area and make sure it matches where the .css file is.<br />
<br />
Inside of your .htm file when you need an input box, all you have to do is<br />
<br />
<input type="text"><br />
<br />
And it will automatically take the attributes of your defined input class inside of your<br />
.css file.<br />
<br />
If you want to use the green input, just type<br />
<br />
<input type="text" class="green"><br />
<br />
This creates cleaner code. Plus if you use your green text box 30 times and decide<br />
you want it to be red instead, all you have to do is change the attributes <br />
in your .css file and all 30 boxes will take on the new atrributes.<br />
<br />
<!-- w --><a class="postlink" href="http://www.bradsoft.com">www.bradsoft.com</a><!-- w --> has an excellent free .css editor called Top Style for help in creating<br />
the .css file.<br />
<br />
===============<br />
Scrollbars: this in the head<br />
<br />
<style type="text/css"><br />
<br />
body{scrollbar-3d-light-color:#000000;<br />
scrollbar-arrow-color:#000000;<br />
scrollbar-base-color:#E09999;<br />
scrollbar-track-color: #E0E0E0;<br />
scrollbar-dark-shadow-color:#660000;<br />
scrollbar-face-color:#B99999;<br />
scrollbar-highlight-color:#E0B9B9;<br />
scrollbar-shadow-color:#BB9999;}<br />
<br />
</style><br />
<br />
==============<br />
:rocker:<!--content-->
<br />
How do you change the font/colour of text in forms? For instance on this website, you can type into the fields in blue, bold text, rather then the standard black text. So how can you make inputs into the forms appear coloured and not generic? Is this html or java? Thanks for any help.<br />
<br />
Also, anyone know how to create coloured tool bars, again like this website has<br />
---------------------------------><br />
They are very smart and quick loading and would be a perfect addition to my site.<br />
<br />
Any ideas much appreciated as always,<br />
<br />
Martyn<!--content-->Sure thing! Check out the easy tutorial I made at my site:<br />
<br />
Making colorful forms (<!-- m --><a class="postlink" href="http://www.dark-street.com/tutorials/html/html_4.html">http://www.dark-street.com/tutorials/html/html_4.html</a><!-- m -->)<br />
<br />
To make colorful scrollbars, then add the following code into your CSS document:<br />
<br />
body {<br />
scrollbar-3dlight-color: gray; <br />
scrollbar-arrow-color: white; <br />
scrollbar-base-color: silver; <br />
scrollbar-darkshadow-color: black; <br />
scrollbar-face-color: gray; <br />
scrollbar-highlight-color: white; <br />
scrollbar-shadow-color: gray <br />
}<!--content-->If you use forms on your site, you should know that there is a very simple method to<br />
change the "default" appearance of your form elements. Using CSS, we can assign <br />
attributes to the various form elements on our pages to conform to an overall design. <br />
Just about every element can be assigned styles for fonts, background colors, etc.<br />
<br />
Here's an example ( style in the form) :<br />
<br />
<form><br />
<input type="text" style="font-family:verdana; font-size:12px; color:blue; background-<br />
color:ffffcc;" value=" Choose below "><br><br />
<select style="font-family:verdana; font-size:12px; color:blue; background-color:ffffcc;"><br />
<option>option 1</option><br />
<option>option 2</option><br />
<option>option 3</option><br />
</select><br />
<input type="submit" value=" Go! " style="font-family:verdana; font-size:12px;<br />
color:blue; background-color:ffffcc;"><br />
<form><br />
<br />
And used in a style sheet<br />
-----<br />
/*default input*/<br />
input {<br />
font-family:verdana;<br />
font-size:12px;<br />
color:blue;<br />
background-color:ffffcc;<br />
}<br />
<br />
/*green input*/<br />
input.green {<br />
font-family:verdana;<br />
font-size:12px;<br />
color:blue;<br />
background-color:00ff00;<br />
}<br />
------<br />
<br />
At the top of your .htm file, add the following line:<br />
<link rel="stylesheet" type="text/css" href=http://www.htmlforums.com/archive/index.php/"styles/main.css"><br />
Take note of the href area and make sure it matches where the .css file is.<br />
<br />
Inside of your .htm file when you need an input box, all you have to do is<br />
<br />
<input type="text"><br />
<br />
And it will automatically take the attributes of your defined input class inside of your<br />
.css file.<br />
<br />
If you want to use the green input, just type<br />
<br />
<input type="text" class="green"><br />
<br />
This creates cleaner code. Plus if you use your green text box 30 times and decide<br />
you want it to be red instead, all you have to do is change the attributes <br />
in your .css file and all 30 boxes will take on the new atrributes.<br />
<br />
<!-- w --><a class="postlink" href="http://www.bradsoft.com">www.bradsoft.com</a><!-- w --> has an excellent free .css editor called Top Style for help in creating<br />
the .css file.<br />
<br />
===============<br />
Scrollbars: this in the head<br />
<br />
<style type="text/css"><br />
<br />
body{scrollbar-3d-light-color:#000000;<br />
scrollbar-arrow-color:#000000;<br />
scrollbar-base-color:#E09999;<br />
scrollbar-track-color: #E0E0E0;<br />
scrollbar-dark-shadow-color:#660000;<br />
scrollbar-face-color:#B99999;<br />
scrollbar-highlight-color:#E0B9B9;<br />
scrollbar-shadow-color:#BB9999;}<br />
<br />
</style><br />
<br />
==============<br />
:rocker:<!--content-->