Color Form Elements with CSS


Here we go.
Let's color up our form elements the easy way,
not a lick o code.



Step One - Set up



First, you will need to drag some form elements onto your page.
Grab them from the form objects pallet



Next we need to open up our CSS panel to specify the colors.
Do so by clicking on the stair-case looking icon in the upper right of your window.



We want to define a new .class for our form elements. Do this by clicking on
the bullet icon and it will create a '.class' for you.


Next, we need to switch to the inspector pallet while we
have the new '.class' selected.
In the inspector pallet, select and rename the '.class' text
and name it to whatever you want. I named mine 'textarea1'.



Now we need to go to the checker-board looking button.
This is where we assign the color to our buttons or text field backgrounds.



Great, let's keep moving. Now select the 'F' button.
(wish I had one of these in my car)
This is where we set the preferences for our text.
I set my color dark, told it to be 12pixels, and then selected
a default font family in the font assignment pop-up at
the bottom of the inspector window.



Now if you check out your CSS window again, it will have
your new definitions listed. After I made my first set, I went back
and added a second text field color class and then added a
button color class as well. You can see in the pic below.




Step Two - Assign Classes to our form elements



:) And here's a nice fat image for you to download.
Back in your layout page, right click on your form elements one at a time.
In the pop-up, select 'Apply CSS Style to <>'. In the next pop-up, you will see
the different classes we made earlier. Now select which one you want for
this element. Do this for all the form fields and buttons you want to color.



WOOT! And we're done. Note that in the GoLive preview, it does not display
the newly assigned colors. View them by previewing in your browser.
This is what mine looks like.



Thanks for joining us again for another overly graphic-heavy tutorial.





Back to Main Page.
Visit «sad.ark»

©jeffseal