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: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Hack CP Form: table to pure CSS solution

Post by santscho » Sun 22. May 2011, 10:21

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: 4553
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Hack CP Form: table to pure CSS solution

Post by juergen » Sun 22. May 2011, 10:36

did you try to replace <td.... with <span ... ?

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: Hack CP Form: table to pure CSS solution

Post by santscho » Sun 22. May 2011, 10:54

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: 9560
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Hack CP Form: table to pure CSS solution

Post by Oliver Georgi » Sun 22. May 2011, 13:14

Use the custom template!

But yes, I should enhanced that thing a bit.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: Hack CP Form: table to pure CSS solution

Post by update » Sun 22. May 2011, 14:58

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 webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Post Reply