Hack CP Form: table to pure CSS solution

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
Post Reply
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Hack CP Form: table to pure CSS solution

Post 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?
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
juergen
Moderator
Posts: 4556
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Hack CP Form: table to pure CSS solution

Post by juergen »

did you try to replace <td.... with <span ... ?
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: Hack CP Form: table to pure CSS solution

Post 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">&nbsp;</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>
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: Hack CP Form: table to pure CSS solution

Post by Oliver Georgi »

Use the custom template!

But yes, I should enhanced that thing a bit.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Hack CP Form: table to pure CSS solution

Post 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?
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
Post Reply