Styling forms you didn't write

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Post Reply
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Styling forms you didn't write

Post by calguy1000 »

often times you didn't write a form (especially if it's provided by one of cms's modules), after some research, I found a technique that can help you style them:

basically:  wrap the entire form in a , then use cascading stylesheets to handle the basic types of elements, you can also use fieldset and label attributes to do it.

Here's an overly simplified example.

Code: Select all

<__html>
<head><title>test</title>
<style type="text/css">
div.test input {border:solid 1px #cccccc; background-color: lime; color: red; }
div.test input[type="text"] {border:none; background-color: yellow; color: red; }
</style>
</head>
</__body>
<form action="#">
<input type="button" value="default">
<input type="text" value="stuff" size="20">
</form>
<div class="test">
<form action="#">
<input type="button" value="custom">
<input type="text" value="stuff" size="20">
</form>
</div>
<__body>
</__html>
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
horus
Forum Members
Forum Members
Posts: 25
Joined: Mon Jul 24, 2006 8:05 am

Re: Styling forms you didn't write

Post by horus »

Nice, but attibute selector doesn't work on IE so this way is only a partial solution. For future maybe will be possible to replace input type="[button|submit|reset]" with button element (better way in my opinion) or add a default css class for buttons in cms core and modules to help users to customise layout.

Anyone knows if there are other possible solutions for present days?
tsw
Power Poster
Power Poster
Posts: 1408
Joined: Tue Dec 13, 2005 10:50 pm
Location: Finland

Re: Styling forms you didn't write

Post by tsw »

IE support for even basic css techniques is very poor.

assigning class="button" to all buttons and so on would be a working solution. Its easy enough to change in the api, but then all module developers would have to check their forms... (which might not be such a bad thing afterall ;)

Also someone pointed out SmartyValidator yesterday which looks like a clean solution for showing submit errors (still have to dig into it better)
Post Reply

Return to “Tips and Tricks”