Today is . Page created 10/30/05, updated 06/04/06

Style Player

T his script allows you to play with CSS Style configurations for Buttons and TextBoxes. You can customize the background color, text color, text size, and border style. This script really helps if you want to have you own unique buttons & textboxes for your site. What this generator does in reality is to generate the code for either form buttons or text boxes and show a generated example besides the generated copy and paste code for the effect.

S ince this generator is of such a size as to limit text on this page, just grab the above button (which was made by the "Style Player") to access it.
**     We did generate this form button with the "Style Player Generator" and as we are going to explain further down the page, we had to modify it to have it function as a link.
See Note of Importance ~ in reference to the generating of either the textarea form box ot button.

W e have tested the code in IE6.0, Firefox1.0.7, Opera8.50, Netscape7.02, Netscape8.0.4 and AOL Explorer1.1. This script worked well in all platforms with no variations observed*.

*     The only variation observed was with the [ Color Chart ] which we added for your convenience and is not part of the generator. The variation was observed in Opera8.50 where it would not give HEX or RGB color codes, just text words for the color. For this generator this is fine because you can enter either HEX or word colors and it will work.

D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document with no reconfigurations other than cosmetic (in the <BODY> section) to blend with your site.

T he first reconfiguration would be that of the <BODY> tag itself. It is not a complete tag.

Default <BODY> Tag

<body bgColor="white">

Reconfigured Complete <BODY> Tag

<body bgcolor="#?" text="#? " link="#? " alink="#? " vlink="#? ">

  • Just replace the ? with the colors of your choice.
Default <TABLE> Tag

<form>
<table border=5 bordercolor="lightseagreen" bgColor="snow">
<tr>
<td><span id="d1" style="filter:glow(Add=1,direction=90,strength=30,color=blue);width:100%;color:gold;">
<center><h1>The Style Player</h1>
<h6 align=right> By Aaron Connelly</h6>
</center></span></td></tr>
</table>

The Style Player

By Aaron Connelly

Reconfigured <TABLE> Tag

<form>
<table border=5 bordercolor="#ba55dc" bgColor="snow">
<tr>
<td><span id="d1" style="filter:glow(Add=1,direction=90,strength=30,color=black);width:100%;color:#ba55dc;">
<center><h1>The Style Player</h1>
<h6 align=right> By Aaron Connelly</h6>
</center></span>* </td></tr>
</table>

The Style Player

By Aaron Connelly
*     If you notice in the above, the <span id tag </span>. This is basically an IE filter only. Most other browsers will not see this effect. If you are viewing this in IE and/or AOL Explorer1.1.4234.1043, then you will be seeing the color surrounding the text. This is what this filter does. It degrades well and you will not get any error messages from the other platforms.

Y ou can play around with the above reconfigurations until it fits the look and feel of your site.

T he last cosmetic reconfiguration that you can make are that of the textarea form box at the bottom of the generator. You can change the rows, cols, background-color of form, font color and font-weight.

<tr><td>
<table border=0>
<tr><td>
<b>Behind the scenes Code Box: Just copy the code and use it.</b>
<BR>
<textarea name="code1" rows=8 cols=50 wrap="virtual" style="background-color:black;color:lightseagreen;font-weight:bold;">
The Style Player Was created By Aaron Connelly

Note Of Importance Note of Importance ~ in reference to the generating of either the textarea form box ot button. These are what are called "Stand Alone" and have no function as they are.It is up to you to modify them to make them work inside a functional form or link for the button. You must have a working knowledge of forms to incorporate these items into your forms. All this generator does is make the code for the stand alone items.

I f you took notice of our links that we have opening in a "New Browser" window, (ie Color Chart & Style Player) they both have at the bottom of the page a "Close Window" button".

Warning Logo     Note Of Professionalism    in reference to the level of professionalism your site attains. It elevates your site's level of professionalism by adding the little "Close Window" button or link on the linked-to page. It may not seem like much but little things such as this stick in people's minds as a little convenience not required but done anyway. Below are the codes for the link, button and a linkto another page for the effect of closing the page by clicking on a graphic. These buttons are placed anywhere in the <BODY> section of your document you want it to appear. Do not overdo the use of these little buttons. we just add them into our pages when we have as we do here Pop up windows that need to open in a new window to keep focus on the main page.

CLOSE WINDOW FORM BUTTON

<form>
<input type=button value="Close Window" onClick="javascript:top.window.close();">
</form>

CLOSE WINDOW LINK

<a href="javascript:window.close();">Close Window</a>

[ Close Window ]

[ Linkto Close Window By Clicking Graphic ]

O n a final note. On the site you will be getting the copy and paste code, (see the code link) the code is not correct and if you copy and paste it, you will probably wonder why it is not functioning correctly. At the bottom of the code in the <BODY> section, there are a few lines of code missing. It is to close the </table> and </textarea> form. See the below examples.

Default Part Of Code With Part Missing

<tr><td>
<table border=0>
<tr><td>
<b>Behind the scenes Code Box: Just copy the code and use it.</b>
<BR>
<textarea name="code1" rows=8 cols=50 wrap="virtual" style="background-color:black;color:lightseagreen;font-weight:bold;">
The Style Player Was created By Aaron Connelly

Default Part Of Code With Missing Part Added

<tr><td>
<table border=0>
<tr><td>
<b>Behind the scenes Code Box: Just copy the code and use it.</b>
<BR>
<textarea name="code1" rows=8 cols=50 wrap="virtual" style="background-color:#ffffff;color:#000000;font-weight:bold;">
The Style Player Was created By Aaron Connelly
</textarea>
</td></tr></table>
</td></tr></table>

A ll we actually did was to close the textarea form and close the table. Because without closing it, what you would see in the form box at the bottom would be a whole bunch of HTML code and you may possibly wonder why.

B esides adding the "Color Chart" into the generator, we also added next to the check boxes for selection of either text box or button a "Text Size Example". Reason we added these is quite simple. When we first received this script and started to use it, we put text size "3" into the generator and what a surprize we got. It was so small it could hardly be seen: ( ). So....... to make life a little simpler for anyone who makes use of it, they have a little guide to a text size they can gauge by.

</center></span></td></tr>

<tr>

Check the type of form to play with
Button             
Text Box        

</td></tr>

<tr><td>What's your Background Color: [ Color Chart ]
</td><td>

I f you would like to add these little conveniences into the script, just replace the default part of the code with our reconfigurations.

Default Part Of <BODY> Section

</center></span></td></tr>

<tr>
<td><b>Check the type of form to play with</b>
<BR>
<input type="checkbox" name="ButtonCheck" onclick="javascript:document.forms[0].TextCheck.checked = false;document.forms[0].border.value='outset';"> Button
<BR>
<input type="checkbox" name="TextCheck" onclick="javascript:document.forms[0].ButtonCheck.checked = false;document.forms[0].border.value='inset';"> Text Box</td></tr>

<tr><td>What's your Background Color:</td><td>
<input type="text" name="bgColor">
</td></tr>

Reconfigured Part Of <BODY> Section

</center></span></td></tr>

<tr>
<td><b>Check the type of form to play with</b>
<BR>

<input type="checkbox" name="ButtonCheck" onclick="javascript:document.forms[0].TextCheck.checked = false;document.forms[0].border.value='outset';"> Button &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="button" name="buttonsName" value="Text Size 12" style="background-color:#ba55dc;color:#A52A2A;font-size:12;border-style:outset;">
<BR>

<input type="checkbox" name="TextCheck" onclick="javascript:document.forms[0].ButtonCheck.checked = false;document.forms[0].border.value='inset';"> Text Box &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="textBoxName" value="Text Size 12" style="background-color:#ba55dc;color:#A52A2A;font-size:12;border-style:inset;">

</td></tr>

<tr><td>What's your Background Color:<font color="#ba55dc"><b>
[&nbsp;<A HREF="javascript:popUp('Path To Color Chart')"title="Opens HEX/Word Color Chart"><font color="#ff0000">Color Chart</font></A>&nbsp;]</b></font>
</td><td>
<input type="text" name="bgColor">
</td></tr>

I n reality, all we are basically doing is inserting the "Color Coded Parts" into the script to add the little conveniences.

I f you are going to add these little additions into the script, there are a few little things you must also do in order to have them word as we have them work.

  • In order for the color chart pop up window to work, you must besides putting the javascript popup code in the body section as we have showed you, add a section of code into the <HEAD> section to activate the pop up without receiving an error message.
  • Copy & paste below code in <HEAD> section for pop up color chart:
  • You must make a new separate HTML document and paste the code into it for the color chart. This will be a complete HTML document code so just copy/cut and paste the below into a blank document and then call that path from the javascript in the <BODY> section of code

<tr><td>What's your Background Color:<font color="#ba55dc"><b>
[&nbsp;<A HREF="javascript:popUp('Path To Document You Made For Color Chart')"title="Opens HEX/Word Color Chart"><font color="#ff0000">Color Chart</font></A>&nbsp;]</b></font>

w e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the below link and you are there. If you have any problems with this or anything else feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]

Talk Live To A Support Technician

Search Our Site By Individual letter

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
[ M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

Little Tips Directory

[ Page 1  ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5  ] [ Page 6  ] [ Page 7  ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-