Logo

Links, Tutorials And Scripts


How To Dye Buttons, Textareas And Inputs With CSS

You do this with CSS, which is not quite a pc-language similar to HTML, it is responsible only for stylings.
HTML is the Format of a site, CSS 'makes' the design.

Post and Preview
Network54 uses INPUT tags for the POST and PREVIEW option.
Input fields may look like this one, to include some text:
or they can appear as button:

N54 won't let you go directly into the source-script to change the style of these input buttons,
but we can put a CSS-command to the Forum's Header which would change the INPUT color.
Unfortunately it changes all input-fields, not only the Prev/Post buttons!
If you can live with it here is my solution for IE browsers:

Tell your browser about the 'to translate' language :
<style type="text/css">
<!-- 

-->
</style>
Now to the contents to write within these tags: 
<!--
 --> 
input {
 font-family:Verdana;
 font-size:10pt;
 color:blue;
 background-color:gold;
 border-bottom:2px solid black;
 border-right:2px solid black;
 cursor:pointer;
  }
will look like this:

________________________________

or with a graphic background:

input {
font-family:Comic Sans MS,Verdana;
color:#ffff00;
background-image:url(http://network54.com/Realm/n54_files/wolke.jpg);
border-color:red;
cursor:crosshair;
color:maroon;
font-size:11px;
}

_______________________________

Changing Colors. For Netscape, Mozilla, Opera users only : 
input:focus, input:hover  {
font-family:Verdana;
color:teal;
background-color:lime;
border-color:red;
cursor:pointer;
}
This effect shown for IE-user (IE does not know HOVER for inputs):

_____________________________

Set the type of array, depending on attribute:
This one is based on CSS2, modern browser showing it correctly, yet IE don't. 

input[type=submit] { color, background, border, font... ; }

_____________________________

So finally your script may look like this:

<style type="text/css">
<!--
input { font-family:VERDANA,ARIAL,HELVETICA; font-size:10px;
color:#840084;
background-color:#FFFF00;
border-color:black;
cursor:pointer; }
-->
</style>


Copy and paste it to an editor and change colors, font-size, border or whatever you prefer as design, then paste it to your forum's Header. That's it.
CSS (CascadingStyleSheet) language is a nice and mighty scripting tool for web-design.
It makes a lot possible with design without using JavaScript or something.

_____________________________

Some other CSS examples:
Textarea with graphic-background:

<style type="text/css">
<!--
textarea {
background-image:url(http://www.network54.com/Realm/n54_files/space.jpg;
}
-->
</style>

____________________________

InternetExplorer (and newer Opera) can have colored scrollbars. As you can see right here on this page.

the code: 
body
{
  scrollbar-face-color:gold;
  scrollbar-highlight-color:white;
  scrollbar-3dlight-color:maroon;
  scrollbar-darkshadow-color:blue;
  scrollbar-shadow-color:yellow;
  scrollbar-arrow-color:red;
  scrollbar-track-color:palegoldenrod;
  }

______________________________

Hyperlinks
 a:link, a:visited, a:focus, a:hover, a:active {
 background:  yourColor ;
 color:  YourColor ;
 border-bottom: /*(-left, -right, -left, -top, or just border:,
  solid, dotted, dashed, double...)*/ 1px solid YourColor ;
text-decoration: none or underline and/or overline;
 }
tEst LINK TEsTLinK 2

______________________________

Those were just examples. For more information search the web, please.
There are plenty sites out there with excellent CSS tutorials.

______________________________

    1/2004 © Ed Home/BilgeRat

Top