• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Form using css

Form using css 16 years 11 months ago #310

  • oleman
  • oleman's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
This form uses css built directly in the field style option. I have tabled it to get the desired look and column widths are changable.
View My form

Here is the code i used simply place this in the field style area
<style type=\"text/css\">
<!--
.fielddescclass {
	font-size: 14px;
	color: #FFFFFF;
	background: #333333;	
}
.fieldtitleclass {
    font-size: 14px;
	color:#0099CC
}
.fieldvaliclass {
    font-size: 12px;
	color: #FF0000
}
 
-->
</style>
 
<table width=\"100%\" border=\"0\">
  <tr>
    <td  colspan=\"4\"  class=\"fielddescclass\"><div align=\"center\">{fielddesc}</div></td>
  </tr>
  <tr>
    <td width=\"10%\" height=\"27\"> </td>
    <td width=\"40%\"><div align=\"center\"><span class=\"fieldtitleclass\">{fieldtitle}</span></div></td>
    <td width=\"5%\"><div align=\"right\"><span class=\"fieldvaliclass\">{validationsign}</span></div></td>
    <td width=\"45%\"><span class=\"fieldclass\">{field}</span></td>
  </tr>
</table>

although once i added the backgrond color to the feild description I also got dividing lines that i can not seem to get rid of without taking out the background color. Possibly because it calls for a field description for every field. until a new selection is incorporated for a sectionheader, Thats what i come up with.

I'm having alot of fun with this component......Its great...<br><br>Post edited by: oleman, at: 2007/05/14 02:38
The administrator has disabled public write access.

Re:Form using css 16 years 11 months ago #314

  • alex
  • alex's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 443
  • Thank you received: 3
hm, for the divisions, try changing
&lt;table width=\&quot;100%\&quot; border=\&quot;0\&quot;&gt;
into
&lt;table width=\&quot;100%\&quot; border=\&quot;0\&quot; cellspacing=\&quot;0\&quot; cellpadding=\&quot;0\&quot;&gt;
The administrator has disabled public write access.

Re:Form using css 16 years 11 months ago #426

  • oleman
  • oleman's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
I've changed attributes and still the same. The way that the form style reads the form field is why its showing a line. the form style is picking up that theres something in the form field desc even though its only a background color. Do you think if a new field style were added like {fieldsection) would work? still not sure if you can make it not see the background color though.
The administrator has disabled public write access.

Re:Form using css 16 years 11 months ago #453

  • ag2simal
  • ag2simal's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 11
I had the same problem with my form. Even I've solve it, I've left the line 'couse I like it that way.

Solution is to move class=\"fielddescclass\" from table into div.

Reason is quite simple. There is difference how table and div display content. Table will display class setings allways, but div only if it has value inside. If div is empty then it visualy does't exists.

After that add paddings into css. That way you can control field distances.

hope it helped


p.s. move css into template css file.<br><br>Post edited by: ag2simal, at: 2007/05/18 08:30
The administrator has disabled public write access.

Re:Form using css 16 years 11 months ago #563

  • oleman
  • oleman's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 8
Thanks ag2simal that worked. But like you, I liked it better with the dividing lines. But I didnt want them to appear as dark or the same color as the section header so I added a new style to the table.
also by moving the css attributes to a template file takes away the ability to change attributes right with the forme, So I opted to leave it there. the only thing is you can not set a height for the fielddesc or the background color will be picked up by the div tag. and over each id.

heres the new style.
&lt;style type=\&quot;text/css\&quot;&gt;
&lt;!--
.fielddescclass {
    font-size: 14px;
    color: #FFFFFF;
    background: #333333;
    text-decoration: none;
 
}
.fieldtitleclass {
    font-size: 14px;
    color:#0099CC
}
.fieldvaliclass {
    color: #FF0000;

}
.line {
	border-bottom: thin #c0c0c0 solid;
}
 
--&gt;
&lt;/style&gt;
 
&lt;table class=\&quot;line\&quot; width=\&quot;100%\&quot;&gt;
  &lt;tr&gt;
    &lt;td  colspan=\&quot;4\&quot;  &gt;&lt;div class=\&quot;fielddescclass\&quot; align=\&quot;center\&quot;&gt;{fielddesc}&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td width=\&quot;10%\&quot; height=\&quot;27\&quot;&gt; &lt;/td&gt;
    &lt;td width=\&quot;40%\&quot;&gt;&lt;div align=\&quot;center\&quot;&gt;&lt;span class=\&quot;fieldtitleclass\&quot;&gt;{fieldtitle}&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td width=\&quot;5%\&quot;&gt;&lt;div align=\&quot;right\&quot;&gt;&lt;span class=\&quot;fieldvaliclass\&quot;&gt;{validationsign}&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td width=\&quot;45%\&quot;&gt;&lt;span class=\&quot;fieldclass\&quot;&gt;{field}&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

I havent done anything with the padding yet but the % can be changed easily to create the effect needed.

Thanks again for the help.<br><br>Post edited by: oleman, at: 2007/05/19 04:16
The administrator has disabled public write access.

Re:Form using css 16 years 11 months ago #606

  • ag2simal
  • ag2simal's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 11
You wellcome.

btw. I like it much better now. Well done.
The administrator has disabled public write access.

Re:Form using css 16 years 10 months ago #833

how do you get the text into the black bars?
The administrator has disabled public write access.

Re:Form using css 16 years 10 months ago #834

oh nevermind, i see now that you put it in field description
The administrator has disabled public write access.

Re:Form using css 16 years 3 months ago #1647

  • vdm13
  • vdm13's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
I love what you did here. I tried to copy the code into my form, and it didn't work!

Am I missing something? Should I be setting some permission somewhere? It seems any changes I make to the field styles just don't work.

Any help is appreciated.

The site in question is www.coveragereplycard.com.

Many thanks.

Vin
The administrator has disabled public write access.

Re:Form using css 16 years 2 weeks ago #2659

  • gvag
  • gvag's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 5
Hi

Nice work! Could you please tell how did you make the pop up for the empty mandatory fields work?

Thanks
The administrator has disabled public write access.

Re:Form using css 15 years 7 months ago #4605

i want to change the form with css layout, like you! mnM Webs, how i do that? i have Rform Pro.

Thanks

Maribel
The administrator has disabled public write access.

Re:Form using css 15 years 5 months ago #5400

  • LekeFly
  • LekeFly's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 1
Could you please describe how i would go forward with customize my form its made in RSForm Pro?
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!