Page 1 of 1
Hack CP Form: table to pure CSS solution
Posted: Sun 22. May 2011, 10:21
by santscho
Trying the whole day to hack "cnt23.article.inc.php". I would like to replace the table based standard form with a CSS form. So far, I was able to create a CSS form but some stuff does not work out.
- Fieldset: Not possible, because a fieldset has to be opened and closed. between open and close are fields.
- Line breaks of checkboxes and radiobuttons. Works only if the checks/radios are on a single line. If not, they start below the label innstead with an indent below the form fields.
- Class Error. Works not for checkboxes and radiobuttons. phpwcms is wrapping label and checks/radios in a div with class error.
Anybody successfuly modified cnt23.aticle.inc.php for forms without tables?
Re: Hack CP Form: table to pure CSS solution
Posted: Sun 22. May 2011, 10:36
by juergen
did you try to replace <td.... with <span ... ?
Re: Hack CP Form: table to pure CSS solution
Posted: Sun 22. May 2011, 10:54
by santscho
Here the rendering. Very clean so far...
Code: Select all
<div class="form_defaultmessage">default</div>
<form name="phpwcmsForm2" id="phpwcmsForm2" action="index.php#jumpForm2" method="post"><div class="fieldcontainer">
<label class="formLabelRequired">Text Single*</label>
<input type="text" name="singlline" id="singlline" value="" />
<br />
<div class="form_break">Breakone Breakone Breakone Breakone Breakone Breakone Breakone Breakone Breakone</div>
<label class="formLabelRequired">Text Multi*</label>
<textarea name="mlt_line" id="mlt_line" cols="20" rows="3"></textarea>
<br />
<label class="formLabelRequired">Select*</label>
<select name="slect" id="slect">
<option value="">Select</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
<br />
<label class="formLabelRequired">List Menu*</label>
<select id="lst_men" size="1" name="lst_men">
<option value="Select-|-">Select-|-</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
<br />
<label class="formLabelRequired">Check Box*</label>
<input type="checkbox" name="chkbox[]" id="chkbox0" value="value 1" /><label for="chkbox0">value 1</label> <input type="checkbox" name="chkbox[]" id="chkbox1" value="Value 2" /><label for="chkbox1">Value 2</label> <input type="checkbox" name="chkbox[]" id="chkbox2" value="Value 3" /><label for="chkbox2">Value 3</label>
<br />
<label class="formLabelRequired">Radio Button*</label>
<input type="radio" name="radbut" id="radbut0" value="Option 1" /><label for="radbut0">Option 1</label> <input type="radio" name="radbut" id="radbut1" value="Option 2" /><label for="radbut1">Option 2</label>
<br />
<label class="formLabel"> </label>
<input type="submit" name="submitIt" id="submitIt" value="Send" />
<br />
</div>
<div><input type="hidden" name="cpID2" value="2" /><input type="hidden" name="1106373d8467fcd2ef21015ccc8b9406" value="181" /></div>
</form>
Re: Hack CP Form: table to pure CSS solution
Posted: Sun 22. May 2011, 13:14
by Oliver Georgi
Use the custom template!
But yes, I should enhanced that thing a bit.
Re: Hack CP Form: table to pure CSS solution
Posted: Sun 22. May 2011, 14:58
by update
santscho wrote:Here the rendering. Very clean so far...
Yes, indeed. Is there any css available to have a look what you are doing with it?