Custom Text boxes
Learn how to edit the look of all your textboxes, or have the code generated for you with the new tool...
1
Do your Text boxes stick out like a sore thumb?
Using CSS its possible to totally transform those boring gray tex boxes to more lively ones that go with the design of your site.
In Dreamweaver:
OK first up, press SHIFT and F11 together to open up the "CSS Styles" palette.
Next click the add css button at the bottom of the palette, this creates a new style Sheet. You have some options here, click the point where it says "Redefined HTML tag". Then in the top box enter input:
Tag: Input
Define in: This document only
What this has done is said apply style to all "INPUT"s in this document. When you have filled this in you simple click OK... Now you can edit how you want them to look...
Using CSS its possible to totally transform those boring gray tex boxes to more lively ones that go with the design of your site.
In Dreamweaver:
OK first up, press SHIFT and F11 together to open up the "CSS Styles" palette.
Next click the add css button at the bottom of the palette, this creates a new style Sheet. You have some options here, click the point where it says "Redefined HTML tag". Then in the top box enter input:
Tag: Input
Define in: This document only
What this has done is said apply style to all "INPUT"s in this document. When you have filled this in you simple click OK... Now you can edit how you want them to look...
2
What now?
TYPE: The first category is "TYPE", this is where you enter how you want your text to appear inside the text box (when someone types in it).
You do not have to fill in everything, just the parts you want to.....
Background: The second category is background, click it to enter your info. You can choose to just have a BG colour or you can use an image as the background although the image option will not work in Netscape. Again, only fill in the parts you want/understand. ;)
One..Two.. Skip a few....
Border: As you see I have now gone straight down to the "border" category. I don't really need to fill in any of the other categories. In the border category you can define the colour of your border, as well as the thickness and style, its very simple to figure out. Try using style: dashed, that looks very spiffy!
TYPE: The first category is "TYPE", this is where you enter how you want your text to appear inside the text box (when someone types in it).
You do not have to fill in everything, just the parts you want to.....
Background: The second category is background, click it to enter your info. You can choose to just have a BG colour or you can use an image as the background although the image option will not work in Netscape. Again, only fill in the parts you want/understand. ;)
One..Two.. Skip a few....
Border: As you see I have now gone straight down to the "border" category. I don't really need to fill in any of the other categories. In the border category you can define the colour of your border, as well as the thickness and style, its very simple to figure out. Try using style: dashed, that looks very spiffy!
3
That's actually about all you need to fill in, so, once you are happy click OK.
Now for the test, put the cursor where you want your text box to appear and go to: Insert>Form Objects>Text Field.
It will look boring, but if you preview your site , you will see how mega cool it looks!
(HIT F12)
If you want to change the look of your text box, just click the and select "input" then click EDIT.
Pretty simple eh? So I never wanna see those ugly gray text boxes again got it?
Try applying your CSS to other html element... you can edit lots of things using CSS, text boxes are just one of them.
Now for the test, put the cursor where you want your text box to appear and go to: Insert>Form Objects>Text Field.
It will look boring, but if you preview your site , you will see how mega cool it looks!
(HIT F12)
If you want to change the look of your text box, just click the and select "input" then click EDIT.
Pretty simple eh? So I never wanna see those ugly gray text boxes again got it?
Try applying your CSS to other html element... you can edit lots of things using CSS, text boxes are just one of them.
4
Code generator:
OK, here I have set up a VERY simple code generator that will do it for you and give you the code. Fill in all option below to get the code, then paste the code inside your <HEAD> tags before your <BODY> tags.
You must fill in all fields. Click submit to get the code.
OK, here I have set up a VERY simple code generator that will do it for you and give you the code. Fill in all option below to get the code, then paste the code inside your <HEAD> tags before your <BODY> tags.
Name
Value
Textbox BG colour:
Textbox Border width (pixels):
Textbox Border colour:
Textbox Border style:
(solid, dashed ...)
Textbox font size:
Textbox Font colour:
You must fill in all fields. Click submit to get the code.
Your code:
This tutorial was brought to you by Robouk, please post any questions in the forum. Thank you.