Firstly I would like to say that I am extremely impressed. It has been an incredibly frustrating 1st day with Chronoforms but at 05:43 and some hours behind me now I feel as though I have learned something. Very well done on a fantastic piece of work! Now, I have created a simple form, learned css at the same time and so far doing ok. The screen shot [attachment=1]Screen shot 2010-10-26 at 05.48.10.png[/attachment] is of my form rendered in Firefox directly from within Dreamweaver. As you can see, there are four fieldsets which sit two abreast which is what I was hoping to achieve.
The second screen shot [attachment=0]Screen shot 2010-10-26 at 05.59.02.png[/attachment] is of the very same (only it's not actually) once it has had the Chronoforms treatment. Notice the lack of two abreast fieldsets. My code is as follows and I know it may not look pretty, and is perhaps a little wrong ? but I am chuffed with my first effort. That said, I am open to criticism/suggestion/steering/etc.... Note: there is a ref to #rightMain in the css - this is a div tag in the actual joomla index.php file for the site. Also, the sharp eyed among you will spot the trouble I am having with 'legends'. Apparently I am not alone, which is refreshing to hear 😀 Can anyone help me get this working? And is so would you be kind enough to share with me, before I do damage, the solution. With tired eyes, great anticipation, not to mention excitement I thank you in advance.
Regards
Chris
############## CSS ################
The second screen shot [attachment=0]Screen shot 2010-10-26 at 05.59.02.png[/attachment] is of the very same (only it's not actually) once it has had the Chronoforms treatment. Notice the lack of two abreast fieldsets. My code is as follows and I know it may not look pretty, and is perhaps a little wrong ? but I am chuffed with my first effort. That said, I am open to criticism/suggestion/steering/etc.... Note: there is a ref to #rightMain in the css - this is a div tag in the actual joomla index.php file for the site. Also, the sharp eyed among you will spot the trouble I am having with 'legends'. Apparently I am not alone, which is refreshing to hear 😀 Can anyone help me get this working? And is so would you be kind enough to share with me, before I do damage, the solution. With tired eyes, great anticipation, not to mention excitement I thank you in advance.
Regards
Chris
<div class="full">
<fieldset><strong><legend><span>Company Details</span></legend></strong>
<p>
<label for="regconame">Registered Company Name:</label>
<input name="regconame" type="text" class="text" id="regconame" tabindex="10" />
</p>
<p>
<label for="trdname">Trading Name if Different:</label>
<input name="trdname" type="text" class="text" id="trdname" tabindex="20" />
</p>
<p>
<label for="creditlimit">Credit Limit Required:</label>
<input name="creditlimit" type="text" class="text" id="creditlimit" tabindex="30" />
</p>
<p>
<label for="invaddress">Invoice Address:</label>
<textarea name="invaddress" id="invaddress" cols="45" rows="5" tabindex="40"></textarea>
</p>
<p>
<label for="telno">Telephone Number:</label>
<input name="telno" type="text" class="text" id="telno" tabindex="50" />
</p>
<p>
<label for="faxno">Fax Number:</label>
<input name="faxno" type="text" class="text" id="faxno" tabindex="60" />
</p>
</fieldset>
</div>
<div class="clear"></div>
<div class="full">
<fieldset><strong><legend>Accounts Contact</legend></strong>
<p>
<label for="acctcontact">Accounts Contact:</label>
<input name="acctcontact" type="text" class="text" id="acctcontact" tabindex="70" />
</p>
<p>
<label for="pos">Position:</label>
<input name="pos" type="text" class="text" id="pos" tabindex="80" />
</p>
<p>
<label for="natofbus">Nature of Business:</label>
<input name="natofbus" type="text" class="text" id="natofbus" tabindex="90" />
</p>
<p>
<label for="trddate">Date Started Trading:</label>
<input name="trddate" type="text" class="text" id="trddate" tabindex="100" />
</p>
<p>
<label for="bank">Name of Bank:</label>
<input name="bank" type="text" class="text" id="bank" tabindex="110" />
</p>
<p>
<label for="acctno">Bank Account Number:</label>
<input name="acctno" type="text" class="text" id="acctno" tabindex="120" />
</p>
<p>
<label for="bankaddress">Bank Address:</label>
<textarea name="bankaddress" id="bankaddress" cols="45" rows="5" tabindex="130"></textarea>
</p>
</fieldset>
</div>
<div class="clear"></div>
<div class="full"><div class="halfleft">
<fieldset><strong><legend>Trade Reference(s) 1</legend></strong>
<p>
<label for="refonename">Full Name:</label>
<input name="refonename" type="text" class="text" id="refonename" tabindex="140" />
</p>
<p>
<label for="refoneaddress">Address:</label>
<textarea name="refoneaddress" id="refoneaddress" cols="45" rows="5" tabindex="150"></textarea>
</p>
<p>
<label for="refonetelno">Telephone Number:</label>
<input name="refonetelno" type="text" class="text" id="refonetelno" tabindex="160" />
</p>
<p>
<label for="refonecontact">Contact:</label>
<input name="refonecontact" type="text" class="text" id="refonecontact" tabindex="170" />
</p>
<p>
<label for="refonepos">Position:</label>
<input name="refonepos" type="text" class="text" id="refonepos" tabindex="180" />
</p>
</fieldset></div>
<div class="halfright">
<fieldset><strong><legend>Trade Reference(s) 2</legend></strong>
<p>
<label for="reftwoname">Full Name:</label>
<input name="reftwoname" type="text" class="text" id="reftwoname" tabindex="190" />
</p>
<p>
<label for="reftwoaddress">Address:</label>
<textarea name="reftwoaddress" id="reftwoaddress" cols="45" rows="5" tabindex="200"></textarea>
</p>
<p>
<label for="reftwotelno">Telephone Number:</label>
<input name="reftwotelno" type="text" class="text" id="reftwotelno" tabindex="210" />
</p>
<p>
<label for="reftwocontact">Contact:</label>
<input name="reftwocontact" type="text" class="text" id="reftwocontact" tabindex="220" />
</p>
<p>
<label for="reftwopos">Position:</label>
<input name="reftwopos" type="text" class="text" id="reftwopos" tabindex="230" />
</p>
</fieldset></div></div>
<div class="clear"></div>
<div class="full">
<div class="halfleft">
<fieldset><strong><legend>Shareholder Information 1</legend></strong>
<p>
<label for="shareonename">Full Name:</label>
<input name="shareonename" type="text" class="text" id="shareonename" tabindex="240" />
</p>
<p>
<label for="shareoneaddress">Address:</label>
<textarea name="shareoneaddress" id="shareoneaddress" cols="45" rows="5" tabindex="250"></textarea>
</p>
<p>
<label for="reftwotelno">Telephone Number:</label>
<input name="reftwotelno" type="text" class="text" id="reftwotelno" tabindex="210" />
</p>
</fieldset></div>
<div class="halfright">
<fieldset><strong><legend>Shareholder Information 2</legend></strong>
<p>
<label for="sharetwoname">Full Name:</label>
<input name="sharetwoname" type="text" class="text" id="sharetwoname" tabindex="270" />
</p>
<p>
<label for="sharetwoaddress">Address:</label>
<textarea name="sharetwoaddress" id="sharetwoaddress" cols="45" rows="5" tabindex="280"></textarea>
</p>
<p>
<label for="sharetwotelno">Telephone Number:</label>
<input name="sharetwotelno" type="text" class="text" id="sharetwotelno" tabindex="210" />
</p>
</fieldset></div></div>
<div class="full">
<fieldset><strong><legend>Credit Applicant</legend></strong>
<p>
<label for="creditappname">Name:</label>
<input name="creditappname" type="text" class="text" id="creditappname" tabindex="300" />
</p>
<p>
<label for="creditapppos">Position:</label>
<input name="creditapppos" type="text" class="text" id="creditapppos" tabindex="310" />
</p>
<p>
<label for="creditappdate">Date:</label>
<input name="creditappdate" type="text" class="text" id="creditappdate" tabindex="320" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Apply Now" tabindex="330" />
</p>
</fieldset>
</div>
############## CSS ################
#full{
width:100%;
}
#halfleft{
width:50%;
}
#halfright{
width:50%;
}
#clear{
clear:both;
}
#rightMain form{
font:normal 0.9em Georgia, "Times New Roman", Times, serif;
color:white;
width:100%;
}
#rightMain fieldset{
/* T R B L */
width:100%;
padding:40px 0px 0 0;
/* T RL B */
margin:0 0 2em;
background-color:#28397f;
border:1px solid #630;
position:relative;
float:left;
}
#rightMain form#frm30 .full fieldset label{
width:180px;
}
#rightMain form#frm30 .full .halfleft fieldset label,#rightMain form#frm30 .full .halfright fieldset label{
width:139px;
}
#rightMain form#frm30 .full .halfleft fieldset{
width:50%;
}
}
#rightMain form#frm30 .full .halfright fieldset{
width:50%;
}
#rightMain form#frm30 .full .halfleft fieldset textarea,#rightMain form#frm30 .full .halfright fieldset textarea{
width:150px;
background-color:#FFC;
}
#rightMain form#frm30 .full .halfleft fieldset,#rightMain form#frm30 .full .halfright fieldset{
width:338px;
margin-right:10px;
}
#rightMain fieldset legend{
padding:0;
margin:0;
color:#CCC;
}
#rightMain fieldset legend strong span{
display:block;
position:absolute;
margin-left:20px;
margin-top:10px;
font-size:1.2em;
}
#rightMain form p{
color:#ccc;
margin:0 0 20px 20px;
}
#rightMain form label{
width:100px;
float:left;
clear:left;
margin-right:0.75em;
}
#rightMain form#frm30 label{
width:125px;
}
#rightMain form#frm30 input.text{
width:150px;
background-color:#FFC;
}
#rightMain form#frm30 textarea{
width:300px;
height:150px;
background-color:#FFC;
}
Hi Chris,
The biggest problem is that your CSS needs tweaking to match the ChronoForms Joomla! template structure.
The Dreamweaver CSS uses a structure like this
But in the Joomla! ChronoForms environment what you get is
If you wrap your Form HTML in a <div id='rightMain'> . . .</div> and remove all the form#frm30 references from the CSS then you will get your two columns back. There are still more problems to sort - mostly where you will need to over-ride the template CSS values to get the look you want.
Bob
The biggest problem is that your CSS needs tweaking to match the ChronoForms Joomla! template structure.
The Dreamweaver CSS uses a structure like this
<div id='rightMain'>
<form id='frm30' . . .>
<!-- more HTML -->
But in the Joomla! ChronoForms environment what you get is
<form id='ChronoContact_my_form_name' . . .>
So both the id attributes that your CSS depends on have been removed.If you wrap your Form HTML in a <div id='rightMain'> . . .</div> and remove all the form#frm30 references from the CSS then you will get your two columns back. There are still more problems to sort - mostly where you will need to over-ride the template CSS values to get the look you want.
Bob
Bob,
Many thanks for the response - and the efficiency!! I just had a flash back to an old chart we used to use - the progress / regress index - and immediately cursed the day I first set eyes on it. Essentially what the chart depicts is one step forward and two back, not to mention the lengthy and hazardous route to ones goal. I am now back to square one and about to embark yet again on what is quickly becoming an exhaustive quest - the trials of Hercules pale in comparison. Still, onwards and upwards...
Many thanks again - greatly appreciate the nudge in the right direction.
Regards
Chris
Many thanks for the response - and the efficiency!! I just had a flash back to an old chart we used to use - the progress / regress index - and immediately cursed the day I first set eyes on it. Essentially what the chart depicts is one step forward and two back, not to mention the lengthy and hazardous route to ones goal. I am now back to square one and about to embark yet again on what is quickly becoming an exhaustive quest - the trials of Hercules pale in comparison. Still, onwards and upwards...
Many thanks again - greatly appreciate the nudge in the right direction.
Regards
Chris
This topic is locked and no more replies can be posted.