TUTE: Styling your RSForms

Ok, I've prepared a little tutorial to show you my technique for styling forms with DIVs and CSS.

This method doesn't require any re-writes of the core at all.
In fact, the ONLY file outside of RSForm that needs editing is your template's template_css.css file.

I've provided all the code you'll need to make the transition to DIVs.

Since we can't upload PDF files, I've had to zip it. Enjoy and let me know what you think.

<br><br>Post edited by: dniezby, at: 2008/02/05 16:43

Thanks dn for your hard work, much appreciated.

Not a problem.

The tutorial here is great.
I have made the new css file........... which directory do i save it in?.....the same folder as the ccs file?..........

I'm glad you like the tutorial. So, it was easy to follow? I was going to make it a video tutorial but my kids kept distracting me and I couldn't get it done without hearing me have to yell at them...LOL.

Anyway, if you've made your new CSS file and you've gone to your template's css file and linked them, then all you have to do is upload your new css file to the same directory as your template's css file.

It really doesn't matter where you upload it, but you'd have to change the link in your template's CSS.

Thank You for that great tutorial!

I was looking a very long time for a solution like that. Now it

I'm glad you liked it.
I noticed one spot where I have a typo and that may be your problem. The typo is mentioned below.
Look for the section in my CSS where it says:

The part that changes the position of the text is the:
left: 60%; Change that to whatever works best for your website. I had a typo here it said 560%...It's supposed to be 60%. and I would adjust it accordingly.

The width:200px; setting is the width of the actual display box. I set it at 200 because it seems the most graphically pleasing. If you remove that setting the box will no wrap.

Anyway, all of the settings you need to tweak to get your display box looking the way you want are in this Class.

Here is the corrected tutorial. There was a typo that might cause some problems with the placement of the help text display.

Thanks,

that solved it!

I would prefer the inputfields with a thin border (1px) instead of the default style.
Do i need to define a new class? Or just add a line in the fieldset?

I'm sorry, forgot to address the input box question.

Yes, create a attribute set. You don't need a class (so to speak) this one will change ALL of the input boxes within your rsform ID..

Is this supposed to be added to the style-sheet?
If yes, the submit-button will also look like the input-fields, and should be excluded.

Is it possible to choose, if the description appears on mouse-over or if is integrated in the fieldset.

Yes, you add it to your rsform.css file. If you followed the tutorial correctly, it will be a simple addition. Only one file to edit.

If you want to target only specific inputs just get a little more specific with the class.

Instead of all inputs:


Use:


As for the Helper Text, it should already be appearing like you described. You just hover over the field labels at it pops up.

If it's not working correctly, check out this form on my site. Hover over the field labels and see what happens. If that doesn't happen, something is wrong with your code. Check your syntax.<br><br>Post edited by: dniezby, at: 2008/02/21 16:44

Nice job. It is a very good thing. I thought I followed your instructions but apparently I goofed somewhere. Everything seems to be working okay except for one thing: Neither the field names or descriptions appear on the form. So any help will be greatly appreciated.

Thanks,
Mac

Follow Up: I have solved the above problem but now have discovered a new one. Radio buttons and Checkboxes are not aligning correctly. For example, with three Radio buttons, the buttons are all together and the labels are pretty much everywhere. Any ideas?

Thanks<br><br>Post edited by: Mac, at: 2008/02/25 04:24

Thanks for this dniezby, it's just what I needed to get me started with styling my forms

Hi dniezby,
Can you tell me how do you create the \&quot;instruction\&quot; class and \&quot;Section\&quot; with RSform?
I noticed the form you created on your website has 2 \&quot;instruction\&quot; and \&quot;Section\&quot;. But I could not
find in rsform anywhere to add or create such classes. Also, I read and followed your tutorial carefully.
However in my form, I got some problems.
1) I could not find out how to create the \&quot;instruction\&quot; class and \&quot;Section\&quot; by rsform which has no such classes
, like you did for the forms on your wesite. Your tutorial has css for \&quot;instruction class\&quot; but did not mention how to create.
2). The descriptions appear on the form, left to the field titles.
3). All fields (or boxes) are not aligning correctly and just closely follow the field titles, but the texts of titles
cannot not equally in length.
4). All stars \&quot;*\&quot; (indicate required field) have the same colour with their title texts, and also all title texts have
a underline which makes the field title look not clean. where can I find the codes to get rid of the title underline,
make the stars \&quot;*\&quot; be different colour with their title texts?

Any help will be greatly appreciated indeed.

Since I can't see what you're talking about, I'll have to assume that you mean you're seeing this:

If this is the case, and you're looking at your form field in the preview of the admin area, you're fine. You won't see your styles parsed in the admin area. You need to look at the live form to be sure.
IF however you're seeing the same thing in the live site, check your field's syntax.

Remember, you have to add the styling to EACH form field. You can't try to cheat the system by entering the styling that I showed you in the FORM STYLE box.


Change the width of your labels.




You couldn't have followed the tutorial correctly. It doesn't sound like you've entered any of the classes into the fields. Please double check your syntax.


If you've double checked your syntax, post you FORM STYLE code and one of your field's code in a reply and I'll take a look at it here.<br><br>Post edited by: dniezby, at: 2008/02/25 14:32

This has been very helpful thankyou, especially that I am not a CSS pro!

If you have the time and inclination, I have a couple of layout bugs with my form, using your styles and was hoping you could help.

The form is here http://www.holiday-gite-france.co.uk/index.php/Booking.html and the problem only exists with IE (v 7.0), not Firefox.

I have implemented the RSform as a mambot in a Static Content Item. (I tried it not as a mambot (www.holiday-gite-france.co.uk/index.php/...ion,com_forme/fid,1/) and the 1st problem does not exist but the 2nd does.)

There are two things:

1. Empty rectangular object with round cornered border appears above the form. This should not appear.
2. The last field on the form, 'Security Code' is positioned incorrectly but when you hover on the previous field name, it aligns correctly.

I have spent alot of time trying to work this out and am resigned to the fact that my CSS skills are not good enough!! Even using the IE Developer Toolbar and Firebug to investigate the CSS.

Another cool addition to your CSS styles would to prevent displaying an empty tooltip box when the RSform! Description field is empty.

Any help is appreciated.

Post edited by: biltong, at: 2008/02/25 17:15

Post edited by: biltong, at: 2008/02/25 17:17

Post edited by: biltong, at: 2008/02/25 17:19

Post edited by: biltong, at: 2008/02/25 17:21<br><br>Post edited by: biltong, at: 2008/02/25 17:25

I tried the tutorial but but onluy half of it styled properly........The css is the same for all... any ideas???........
thanks

irelandcomputertraining.com/index.php?op..._forme&amp;fid=2
irelandcomputertraining.com/index.php?op...br><br>Post edited by: mrwild, at: 2008/02/25 17:44

Ok, for your problem, to get rid of the the pop up box with empty text just remove the &lt;span&gt;&lt;/span&gt; tags. There won't be any box at all then.

As for the security code. You won't be able to fix. Even on my form, I can't fix this...though I've never really tried. Check out the Screenplay Submission form on my site. You'll see mine is the same way.

mrwild wrote:


I took a look at your code and your syntax is wrong. Double check your syntax.

There is a space between div and class.

You need to be carefull of your syntax. Coding is case sensitive and space sensitive. Remove a space or put a space in the wrong place and your code won't work correctly.

Hi dniezby, really appreciate your kind answer and I am a css newbie. I will try to correct my forms according to your instructions.
The FORM STYLE code is:
&lt;div id=\&quot;myform\&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;{formtitle}&lt;/legend&gt;
&lt;form name=\&quot;{formname}\&quot; id=\&quot;{formname}\&quot; method=\&quot;post\&quot; action=\&quot;{action}\&quot; {enctype}&gt;
&lt;div&gt;
{formfields}
&lt;/div&gt;
&lt;/form&gt;
&lt;/fieldset&gt;
&lt;/div&gt;

The field's code for each field is:
&lt;div class=\&quot;links\&quot;&gt;
&lt;a href=\&quot;#nogo\&quot;&gt;&lt;label&gt;{fieldtitle}&lt;font class=\&quot;required\&quot;&gt;{validationsign}&lt;/font&gt;&lt;/label&gt;
&lt;span&gt;{fielddesc}&lt;/span&gt;
&lt;/a&gt;
{field}
&lt;/div&gt;

BTW, I am trying to build a site with joomla 1.5. The link field of a menu item cannot be changed (uneditable). So I am wondering rsform can only work with a External Link type menu item at the moment? I tried to use two new menu items to click rsfrom in the menu type list and It didn't expand to show forms. I also tried to give menu items the id numbers created from rsform but couldn't make them work. The only way for rsform I found is to use a extenal link type menu item. Do you have any better idea for this?

Thank you very much indeed.

Hi dniezby, really appreciate your kind answer and I am a css newbie. I will try to correct my forms according to your instructions.
The FORM STYLE code is:
&lt;div id=\&quot;myform\&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;{formtitle}&lt;/legend&gt;
&lt;form name=\&quot;{formname}\&quot; id=\&quot;{formname}\&quot; method=\&quot;post\&quot; action=\&quot;{action}\&quot; {enctype}&gt;
&lt;div&gt;
{formfields}
&lt;/div&gt;
&lt;/form&gt;
&lt;/fieldset&gt;
&lt;/div&gt;

The field's code for each field is:
&lt;div class=\&quot;links\&quot;&gt;
&lt;a href=\&quot;#nogo\&quot;&gt;&lt;label&gt;{fieldtitle}&lt;font class=\&quot;required\&quot;&gt;{validationsign}&lt;/font&gt;&lt;/label&gt;
&lt;span&gt;{fielddesc}&lt;/span&gt;
&lt;/a&gt;
{field}
&lt;/div&gt;

BTW, I am trying to build a site with joomla 1.5. The link field of a menu item cannot be changed (uneditable). So I am wondering rsform can only work with a External Link type menu item at the moment? I tried to use two new menu items to click rsfrom in the menu type list and It didn't expand to show forms. I also tried to give menu items the id numbers created from rsform but couldn't make them work. The only way for rsform I found is to use a extenal link type menu item. Do you have any better idea for this?

Thank you very much indeed.

For a menu item to open a form, you need to create a NEW&gt;LINK URL&gt;link to form (available in your admin page.)

As for your code, it looks fine. I believe it was you that was asking about the helper text box? Just remove the &lt;span&gt;{fielddesc}&lt;/span&gt;

if you won't be using any helper text.

Hi .
Id like to be able to put a border around the input fields.
Also to have an orange colour in the background of the input box.
but when the user clicks on the input box it changes to a very light grey.

I have no idea what is wrong with my code
I added this to the rsform css file
irelandcomputertraining.com/index.php?op..._forme&amp;fid=2


#rsform input {
border: 1px solid #EEEEEE; /* Whatever color you want */
color: #808080; /* This will color the text */
font-weight: bold;
font-family: \&quot;Lucida Grande\&quot; ,Verdana,sans-serif;
height: 1.1em;
padding-left: 30px;
padding-top:6px;
width: 300px;
font-size: 1em;
vertical-align: middle;
text-decoration: none;

Hi guys...

Stupid question alert!!!

I understand the CSS part of the tutorial but i cannot get the style sheet to link. to the new 'my_rsform_styles.css' The tutorial says to place this line @import url(my_rsform_styles.css); into the template_css.css and upload the file to the css directory.
&lt;Stupid question&gt;
@import url - do i use that exact phrase or do i use the url of the form (and if so do i use the @). Either way - I can't get it to work
&lt;/Stupid Question&gt;

Sorry for being daft.
Iain

+1 on this.

Also, do I put that import statement on any line of my template.css?

mrwild wrote:


I took a look at your form and you have more than one problem.

Save a copy of your CSS file as .txt and upload a copy here.

Then I need to see what you've put in your FORM STYLE BOX.

It should look exactly like this (and FOR EVERY FORM using my style technique) :




You have a setting for border, just change the width and colors as you see fit.

As for changing the background color when someone is in the input box, there are two ways.

Use an onFocus event
Use the focus sub-class. (may not work in IE) - Yet people still use IE??? Strange.

Either way, you need to create a new class.

If you're going to use the sub-class the attribute is written like this :


New versions of IE might not support it but I say, let those people suffer and miss out on the beauty of CSS.

To use a onFocus event you still need to create a new class but this would be a regular class.



Then enter this in the

TheFlyingKiwi wrote:


It's not a stupid question. Isn't it said that the only stupid question is the question that is not asked?

Now, for your answer:
It's my guess that you didn't upload YOUR my_rsform_styles.css file to the same directory as your template_css.css file.
If you didn't you need to. The problem seems to be that it can't find the file.
Your syntax is correct, that's what leaves me to this conclusion.
@import url(name_of_file);

HI Dave,

Many thanks for your quick response. I have placed the file in the same directory and placed this line at the bottom of the template_css.css file.
/*Rs FOrms*/
@import url(my_rsform_styles.css);

i checked the name and the file itself but nothing happens. No error message and no action.
Cheers
Iain

I think it has to be at the top of your template CSS file. I've never tried it anywhere else.

Seems strange.

There doesn't seem to be a reason. What is your website?
I see if I can find anything from the front end.<br><br>Post edited by: dniezby, at: 2008/02/27 16:21

Thanks for the reply.
Heres the css file::::


/* CSS Document */

/* This section will style the box where the form title appears. */
#myform legend {

}
#rsform input {
border: 1px solid #EEEEEE; /* Whatever color you want */
color: #808080; /* This will color the text */
font-weight: bold;
font-family: \&quot;Lucida Grande\&quot; ,Verdana,sans-serif;
height: 1.1em;
padding-left: 30px;
padding-top:6px;
width: 300px;
font-size: 1em;
vertical-align: middle;
text-decoration: none;
}
/* This section will style the form's framing. Also known as the fieldset. */
#myform fieldset {
width: 80%;
border: 1px solid ;
border-left: 8px #3366cc solid;
border-top: 1px #3366cc solid;
border-bottom: 1px #3366cc solid;
border-right: 1px #3366cc solid;
padding: 10px;
color: #ffffff;
background-color: #666666;
}
/* This section will style the field labels */
#myform label {
float:left;
color: #cccccc;
width: 100px;
margin-right: 12px;
text-align:left;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* This section will style any required text fields */
#myform .required {
text-decoration:none;
font-size: .9em;
font-weight: bolder;
color: #FFffff;
}
/* This section will style any instructions you wish to add to your form */
#myform .instructions {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: yellow;
line-height: 150%;
}
/* Add a little padding to the divs in general */
#myform div {
padding: 10px;
}
/* This section will create the help box display event */
#myform div.links a {
text-decoration: none;
color: #ffffff;
}
#myform div.links a:hover {
cursor: help;
color: #ffffff;
}
#myform div.links a:visited {
color: #ffffff;
}
#myform div.links a span {
display: none;
}
/* Here is our mighty help box display. Making changes here will change the look of the actual display of the
help text */
#myform div.links a:hover span {
display: block;
position: absolute;
left: 560%;
width: 200px;
border: thin #ff0000 solid;
padding: 8px;
margin: 8px;
z-index: 100;
color: Black;
background: #FEFF86;
font: .9em Verdana, sans-serif;
text-align: justify;
text-decoration: none;
top: auto;
bottom: auto;
}
Now save the file as my_rsform_

And here is the form style:

&lt;div id=\&quot;myform\&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;{formtitle}&lt;/legend&gt;
&lt;form name=\&quot;{formname}\&quot;id=\&quot;{formname}\&quot; method=\&quot;post\&quot; action=\&quot;{action}\&quot;
{enctype}&gt;
&lt;div&gt;
{formfields}
&lt;/div&gt;
&lt;/form&gt;
&lt;/fieldset&gt;
&lt;/div&gt;

Ok Ive implimented the changes...Great stuff. The backgrounds and borders can now change colour. The only problem now is that it seems the text area and the text box are not formated in the same way............. they seem to use the standard template file......

Syntax ....

Look at your input statement.

You have the wrong id name in your CSS file. You have #rsform and the the actual ID of your form is #myform.
Change #rsform to #myform

I have followed the TUTE and have the form showing on my site with the styling, but there are two issues:

1. the radio buttons are all in a line and the labels overlap each other on one line - how can I make them list down the page?
2. the help box does not appear - I just get a '?' in IE7 (and nothing at all in Firefox)

I have attached my css file

otherwise this is a neat change that makes the form look great <br><br>Post edited by: youngwilly, at: 2008/03/02 20:21

Nothing seems wrong with your CSS, it's my guess that you didn't enter the field codes correctly.
Look above this message and copy the code into EACH field you have listed.

Now, as for the checkboxes, I haven't worked with them to work out the CSS so you will have to experiment with the CSS to get it to what you want. I would work on it but I'm a little too tied up for a bit. You may even want to just leave the check box options alone so that it uses the default tables to align the boxes.

OK thanks for the reply. I have tried this code in the field style box (which I picked up from another post) and it has worked pretty well (the field Id is \&quot;type\&quot;) - also had more breaks to move following fields down the page.

dniezby wrote:
There doesn't seem to be a reason. What is your website?
I see if I can find anything from the front end.&lt;br&gt;&lt;br&gt;Post edited by: dniezby, at: 2008/02/27 16:21[/quote]

Hi dniezby,

You're a busy man on the forum. Thank you very much for your time and effort. I was testing RSForm on a local server and simply could not get the changes to take - this is a deal breaker for me if I can't get it too work so I replicated teh site and created a development area so other people could see if they could find a reason. COuld I trouble you to have a look at my test form here and see if you can see anything.

Many thanks
Iain

Hey, you did something I didn't even try before. A tabbed form? Cool.

That might be one thing that is hurting your form style.

Iain, to help you I would need access to your admin area. I will register there and you assign me the permission of Admin...Not superadmin just a regular admin. Then I should be able to look at your form set up and see what's going on.

Which form are you trying to style cause you have a few forms with the same name?

I looked at all of them and none of them are coded with code from my tutorial.
I don't see any classes in any of your form fields.

You need to create add my code to each of the form fields.

Ha Ha!!! got it to work. Boy what a muppet - it's amazing what can be achieved when you read the instructions The problem was that I hadn't added the for code to the actual form!!!

diezby, you are a gentleman and a scholar and I am most grateful for all your help. THank you very much (and you are totally right - it is important that I fixed the problem to so I could understand it).

Thanks again
Iain

Is their a way to align two fields on a row.
Now it is all verticaly aligned but in some cases i need to have 2 fields on a row.

How do i have to do that? Any suggestions??

Leo wrote:

It's tricky, but do-able.

What you need to do is open the div tag that encloses your row (in the case of dniezby's example it is the links class) at the beginning of your first field's Field Style code, and close that div at the end of your second field's Field Style code.

Then, you would have to enclose both of those fields in either spans or left-floating divs, so they sit side-by-side on the same row, rather than jump to the row below (like a line break would).

Hope that helps,
Cheers

I'm updating this post, having resolved one major issue in the course of posting and then editing it .

The person I am doing this for is running Joomla 1.03
rsforms 1.0.4
Apache version 2.2.6 (Unix)
PHP version 4.4.7
MySQL version 5.0.45-community-log

I trying to dress up a simple contact form so that it approximates this earlier contact form.
intemarket.com/index.php?option=com_contact&amp;Itemid=3

I'm on my second try, having already gotten the basic form functionality working the first time with no problems, but wanting to dress it up so so I went through your tutorial and discussions. But the fields were not lining up in the right order or aligning properly on the page, and the hovering help didn't work. So I gave up and tried zANavAShi's tutorial thinking I might have more luck. But that didn't work either, which we decided might be because it was written for 1.5.

So today I uninstalled RS Forms, reinstalled it and and started over, following your directions (I thought) very carefully)

Per your tutorial I have created a file called my_form_styles.css, (your original file with a couple of size and color changes, to which I (later) added input boxes (per one of your posts) which I uploaded it to the same directory where template_css.css is located, and referenced with from within the latter as follows:

@import url('my_form_styles.css');

I replaced the code in the form style box on the form in question with your code - later adding instructions as well as I worked my way through your posts in search of answers.

I left the general field style box on that page alone as you indicated the individual pages would override it, but later deleted it and allowed it to recreate itself with the same results in both cases. In the meantime I had pasted your field style code into each one of the individual field style boxes.

I will attach a zip with two text files with code from my css pages, and a screen grab of what I am currently seeing

Since my original post I found and corrected one naming convention error and solved part of my problem. But as you can see from my picture, the stuff that that should be at the top of the page is inside the box at the bottom of the page, and the titles and fields are not lining up properly.

Any help you can provide would greatly be appreciated.
Lee

attachments are in a zip file in a subsequent post as I'm afraid this will time out on me again.

Post edited by: leeonardo, at: 2008/03/11 23:34

Post edited by: leeonardo, at: 2008/03/11 23:35<br><br>Post edited by: leeonardo, at: 2008/03/11 23:58

trying again on the file uploads putting all three files into a zip file
Lee

correction. I did just find one freshman error in the course of editing my posting. I had a naming error on my css reference which I have now corrected, which has made a difference. I will now continue to work with the program.

What I still don't understand however, is why things are in the wrong order.

I don't understand why are things I moved up to the top when I ordered the items showing up at the bottom.

Here is a revised screen grab. <br><br>Post edited by: leeonardo, at: 2008/03/11 23:48

First, you're about 10 updates behind if your Joomla is 1.0.3
The current release is 1.0.14
You should update your files.

Now, for the CSS stuff...

If it's not working check your syntax. It took me about two seconds to find your syntax errors.

Make sure there are no spaces between attribute:value;

sorry I meant 1.0.13
I will update but I don't think that's the issue.
where should I look for this attribute error? on the css pages or on the form or both? I did find one before, but have already looked pretty carefully

I have attached a revised zip file. Am not very proficient with css (learning as I go) so stuff you take for granted I may need explained.

Thanks very much for the quick reply and your willingness to help people like me.
Lee <br><br>Post edited by: leeonardo, at: 2008/03/12 00:11

look in you
#myform input statement

if you mean here I don't see anything

&lt;div id=\&quot;myform\&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;{formtitle}&lt;/legend&gt;
&lt;span class=\&quot;instructions\&quot;&gt;complete this form ONLY for consideration submissions. Coverage service sumbmissions please use out coverage service form.&lt;br&gt;&lt;br&gt;
Mouse over the field label for help.
&lt;br&gt;
&lt;form name=\&quot;{formname}\&quot; id=\&quot;{formname}\&quot; method=\&quot;post\&quot; action=\&quot;{action}\&quot; {enctype}&gt;
&lt;div&gt;
{formfields}
&lt;/div&gt;
&lt;/form&gt;
&lt;/fieldset&gt;
&lt;/div&gt;

No, in your CSS file.
Look at your #myform input statement.

thanks! I did find some garbage (breaks) that somehow got pasted in there that I missed, and opened up some attribute spaces like you said, and can now see the test message I added to the form style, so I'm making progress. I'm sure I can make some more color and space adjustments based on what has just been fixed. But I still don't understand why the free text I wanted to put at the top is showing up in the box instead of the text fields, and why that is at the bottom of the page. That's not the way I have them ordered.

that's funny my last quick update didnt go thru

??actually I'm seeing a space between all my attributes and values on the my_form_styles.css, which is surprising because I copied and pasted. But I will go through and adjust them all and see what that does.

well I took out all the spaces but don't see anything else change. Will keep noodling with it and see if I can figure out anything else.<br><br>Post edited by: leeonardo, at: 2008/03/12 00:58

Well, it's probably your editor.
What did you use to create the CSS file?

no css editor per se. I tightened it up by hand, and created it originally just copying and pasting text from your pdf and then from this forum into the text document. I'm trying to remember if any of it passed through a word processing program, as that might have mucked it up. Just to be sure I'm going to pull it down, save it as raw text, and put it back up.

ok, did that, which unfortunately made no difference.<br><br>Post edited by: leeonardo, at: 2008/03/12 01:37

getting rid of the instructions code in the css resolved some of my issues.

I resolved the rest by just killing all the freetext blocks and adding the info in them to the file style block. I see there are additional posts re working with free text that may be relevant but I was out of time. Will look further at some point. Also noted they were written by Alex so I don't know if they reflected the approach here of using cms for layout.

still wondering why as I added more text some items dropped out of the bottom of the fieldset. I see how to control width but not height.

I appreciate the efforts of those who have contributed documentation for this extension. I hope eventually there will be a more comprehensive guide for formatting, and more capabilities built in.
Lee

Hi folks - Any help gretaly appreciated just to get the sample working-

brianflemingllc.com/contact-us-mainmenu-3.html

/ templates / rt_synapse / css / is where I created the file

template/css is where I dropped in the link to the file

created three fields

this is what I am seeing - do I have the files correct? are they in the right place?

Any help appreciated. Thanks

Brian

You have some of it correct but not all of it.

Read the tutorial carefully. I have yet to see anyone have a problem other than typos.

Since some of the styling is appearing, I would say that it's safe to say that you have linked the file correctly.

The problem you're having is that you've most likely got a syntax error in your form field's style. Specifically, the \&quot;label\&quot; attribute.

Hello,

I am a noob so please excuse in advance any questions I may ask which are probably common knowledge for Joomla developers. I have managed to work my way around issues developing a site here at www.parosproperties.com and implemented RS Form and was looking a way to fix the style it generates. I was having a crowding issue which I tried to find in the css but could not.

When I found your tutorial, I followed it I believe and uploaded the stylesheet to the css folder where template_css.css is located, then added the line of code of @import url(my_rsform_styles.css); to template_css.css and tried to see if it changed the form and it did to some extent. You can see below the fields I applied the code to and the others I have not.

www.parosproperties.com/index.php/compon...com_forme/Itemid,74/

However, the spacing is not able to be mofied and it seems as though any changes I make to the my_rsform_style.css is not reflected other than the box around the fields.

Any ideas why? Is there something in my template that is making this happen from the template_css.css file? or human error?

Any help is appreciated.
Thales

The problem is in your syntax. I can't tell you for sure but that is ALWAYS the problem when someone's form ends up like yours.

You've got something out of place or not in there at all.

Double check your code.

Ahh,..I had the code for the template linking in the template_css.css in but not at the top like you suggested. Now it is working and I came across an issue with radio buttons and checkboxes as you can see here:

www.parosproperties.com/index.php/compon...com_forme/Itemid,74/

I noticed another posting where this is discussed and the following code was provided to fix the issue I believe. It was as follows:

&lt;strong&gt;{fieldtitle}&lt;/strong&gt;&lt;br&gt;

&lt;span class=\&quot;roomrequested\&quot; style=\&quot;white-space: nowrap\&quot;&gt;
&lt;style&gt;.radiotype{float:left;clear:both}&lt;/style&gt;

{field}{fielddesc}&lt;/span&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;

Is there an update in dealing with radio buttons and checkboxes with this template?

Thanks,
Thales

i am trying but i don't understand this at all.
What i have now is this www.jakobskruiskruid.com/website/index.p..._forme&amp;fid=1
but what i actually need to make is a form that looks more like this www.jakobskruiskruid.com/Enquete/enquete.html
i guess i need a little bit of help here

i stubled upon the same problem with checkboxes. Hope the is a solution for this before i buy a license i want to know i can have a nice lookin form.

For checkboxes, where I need more choices than 1 I use Select boxes instead. This will alleviate format issues for now.

I'm getting a but further now, but there is still one thing. There is a question on the form that is more a sentence if you know what i mean, problem now is it will put that under eachoter while it needs to be one line. I allready changed the margin-right: in the css to 300px; but that still doesn't solve it. How can i get that on one line. It's the last one on the form here www.jakobskruiskruid.com/website//index...._forme&amp;fid=1

thanks in advance

Nevermind, wasn't the margin but the width i needed to adjust. Need to wake up first i guess <br><br>Post edited by: Mannie, at: 2008/04/09 11:02

Has anyone had a problem with the mosforme mambot/plugin killing the style? When i test a form with a direct link to the form it displays perfectly. however when i \&quot;embed\&quot; the form in content using the mambot - all the styling disappears!!

any thoughts?

Thanks in advance
Iain

What about the nee for multiple selections? ie, I have a choice selection for \&quot;Ministries interested in servering: With the options of: Band, Choir, Tech, etc.

What if a person wants to choose more than one box? Is there a bug with this that cannot be fixed?

I haven't experienced this problem with the Mambot. Mine works fine.

For multiple selection items I use a select box.

dniezby wrote:


good to know Dave, cheers

Hi guys,

I have a very useful Joomla based site up and running - on top of this I wanted forms access, and so looked at RSFORMS, bought it and created my first form - all good - then I saw this trail and thought - cool !!

I am still learning and so am sure this is my mistake, but have the following issues:

1) help is not working correctly - see first field - help is next to field text.
2) fields are aligned incorrectly



What have I done wrong here ?

thanks

Steve

Post edited by: scouserman, at: 2008/04/23 18:39<br><br>Post edited by: scouserman, at: 2008/04/23 18:43

I could not tell you without looking at your Form's Style or your Field's Style.
From the looks of it, it would definitely appear that you've got a problem in your syntax. There are only two places where code goes in RSForm. In the Form's Style and the individual field's style. You have to add the styling in each individual field's style box as noted in the tutorial.

Thanks for trying to help with this.....I'm a bit flumoxed....

This is the field level code:

&lt;div class=\&quot;links\&quot;&gt;
&lt;a href=\&quot;#nogo\&quot;&gt;&lt;label&gt;{fieldtitle}&lt;font class=\&quot;required\&quot;&gt;{validationsign}&lt;/font&gt;&lt;/label&gt;
&lt;span&gt;{fielddesc}&lt;/span&gt;
&lt;/a&gt;
{field}
&lt;/div&gt;

in each field

and this is the form level code:

&lt;div id=\&quot;myform\&quot;&gt;
&lt;fieldset&gt;
&lt;legend&gt;{formtitle}&lt;/legend&gt;
&lt;form name=\&quot;{formname}\&quot; id=\&quot;{formname}\&quot; method=\&quot;post\&quot; action=\&quot;{action}\&quot; {enctype}&gt;
&lt;div&gt;
{formfields}
&lt;/div&gt;
&lt;/form&gt;
&lt;/fieldset&gt;
&lt;/div&gt;

and here is the file:

<br><br>Post edited by: scouserman, at: 2008/04/24 01:20

Hmm, try taking out the form ID=\&quot;{formname}\&quot;

I think it's getting confused. I noticed that I don't have the id=\&quot;{formname}\&quot; in any of my forms.

Hi,

I tried that and it has made no difference. It doesn't help I guess that I'm fishing a little bit in the dark here...I've worked in IT for 20 years but moved into sales and so am only good enough now to be dangerous when it comes to code

Would the global stylesheet be overriding any of the local settings for RSFORM ? It seems to me that a lot of the CSS settings are just not being applied eg your CSS includes the blue colour as here

border-left: 8px #3366cc solid;
border-top: 1px #3366cc solid;
border-bottom: 1px #3366cc solid;
border-right: 1px #3366cc solid;

just does not seem to be being applied, and yet it has put the frame around the form. Interesting....

Can I give you admin rights to review the code?

Steve

Hi,

I tried that and it has made no difference. It doesn't help I guess that I'm fishing a little bit in the dark here...I've worked in IT for 20 years but moved into sales and so am only good enough now to be dangerous when it comes to code

Would the global stylesheet be overriding any of the local settings for RSFORM ? It seems to me that a lot of the CSS settings are just not being applied eg your CSS includes the blue colour as here

border-left: 8px #3366cc solid;
border-top: 1px #3366cc solid;
border-bottom: 1px #3366cc solid;
border-right: 1px #3366cc solid;

just does not seem to be being applied, and yet it has put the frame around the form. Interesting....

Can I give you admin rights to review the code?

Steve

I can take a look at it. Yes, you can give me admin rights.
I need the url to your site so I can register. Then you need to change my user access to BackEnd Admin, NOT SUPER ADMIN

Take a look at plateau-europe.com then - this is a live site for our International partners.

Just gone back into the form and it has changed - maybe that last change did fix it a bit - however while the frame is better the data fields have now gone really strange as you can see:



Looks like the CSS updates have taken now - I'll look at the color code for the text - maybe it's just set to white on white background and now it's taken.....

Ok - getting there now - changed the whites to black in the CSS and it has got the text. However three issues remain:

1) Alignment is not right - you can see this in the last screen shot
2) More general - how can I increase the width of the data elements?
3) The submit and reset buttons have thier wording outside the button and button itself is not actually working correctly. I can try to delete and recreate these buttons.....

Steve

Ok, from the image I can tell you that the problem is definitely in your CSS.

Here are some settings you will want to change / add. In #myform label
make these changes:

change the width to 120px;
Change color: #ffffff; to color: #000000;

that should do it but make those changes and see what other issues may present.

Thanks for the continued help - I edited the CSS and changed the text colors and other stuff. I have attached what I am getting now...



So any idea what is causing the moving across the screen? It seems to have set properly with the \&quot;decision process\&quot; field?

Also I have issues with the buttons? They look like this:



Shouldn't the words be inside the buttons?

thanks

Steve

Post edited by: scouserman, at: 2008/04/24 20:34

Post edited by: scouserman, at: 2008/04/24 20:36<br><br>Post edited by: scouserman, at: 2008/04/24 20:37

As per other trail buttons are fixed - thx...

Just have to fix the sliding of the fields across the screen now.....I'll carry on testing tonight but any ideas what is causing this?

Thanks

Steve

Do you mean \&quot;thread\&quot; ? Where you're saying \&quot;Trail\&quot; ?

I also don't understand what you're trying to say with \&quot;sliding of the fields across the screen\&quot; . They look fine to me here.

Duh - thread......

This is what I mean.....by the fields....



Why do some field labels not start on the left ? Yet other text areas are correctly aligned ? The code is the same at field level as I copied and pasted the code from one to the other.

Thanks

Steve

I've fixed this last one with line breaks - however the line break spaces the data field lines out quite a lot.....I put this into the fieidl code and it fixed the problem - but obviously I have gaps now...

&lt;div class=\&quot;links\&quot;&gt;
&lt;a href=\&quot;#nogo\&quot;&gt;&lt;label&gt;{fieldtitle}&lt;font class=\&quot;required\&quot;&gt;{validationsign}&lt;/font&gt;&lt;/label&gt;
&lt;span&gt;{fielddesc}&lt;/span&gt;
&lt;/a&gt;
{field}
&lt;/div&gt;&lt;br&gt;

Regards

Steve

I think some of the problem is being caused by the long labels.

If 150px isn't working correctly, go to 200px width under the \&quot;label\&quot; attributes.
You may also want to check your form's width itself. I see it's at 80%... Change that to like 90% (before the label)

That did not fix it - as you can see the form is working - but if I do not use the &lt;br&gt; to break a line then the layout is as I showed you with the text for the next line appearing under the data element of the previous line. Really weird. I tried altering the field label width to 200, reducing the data element size, and no matter what I do it still has this issue unless I put a &lt;BR&gt;.

One other clue - the data area works fine - that does not need the &lt;BR&gt;. As you can see below.



Any other thoughts or anything I can supply?<br><br>Post edited by: scouserman, at: 2008/04/28 08:41

First of all I'd like to say thank you to dniezby for providing a great tutorial.

I've been working through the guide and have managed to produce a pretty decent looking form. However I'd now like to be able to display the field labels above the text fields and can't seem to find an easy way of doing it without affecting the form styling. I tried changing the float position of myform label, but it didn't have the desired effect, and likewise tried to configure the field style using some script I found on the forum, again without much luck.
I'd be grateful if someone could give me a steer as to where I'm going wrong and hopefully provide me with a solution.

Cheers
don

I would try adding a new set of divs.

Put your {label} in it's own set of divs and see if that works.

Hi dniezby,

First of all, many thanks for your great tutorial!

Can you please help with two little problems:

1. Captcha and Submit are not aligned. Submit button is weird.

I tried adjusting the input in CSS file per your other post.
Must have missed something, because it blew out the whole layout.

2. How do I create Sections like your Screenplay form?
The Contact Data and Material Data.

Here is our Form:

www.nannymama.com/index.php?option=com_c...14&amp;Itemid=20

Thank You!

Post edited by: michele, at: 2008/05/21 16:26<br><br>Post edited by: michele, at: 2008/05/21 18:17

michele wrote:


The submit button is weird most likely because you've put the label text in the wrong spot on your set up. Leave the label blank and put the text you want on your button in the \&quot;default\&quot; text box.

Since I can't see your admin, it's my guess that you forgot to put in the extra DIVs or didn't create the new class as I had mentioned in the other post.

Double check your code. Syntax problems are 99% of the issues.





Look at the class I created called, \&quot;sectionheader\&quot;
Put the text you want in a set of DIVs and give it that class.

Thanks for the quick reply Dave!

The Submit button label text is in the default box, exactly where it should be.

I keep going over the old post and it's not making sense to me.
Sorry, I am a CSS newbie.

Can you please explain in more detail...

Captcha: the text that goes in the CSS
Captcha: the text that goes in the Captcha Field Style

Submit button: the text that goes in the CSS
Submit button: the text that goes in the Submit Field Style

I really appreciate any help you can provide.

Michele<br><br>Post edited by: michele, at: 2008/05/22 17:21

You create a new legend section. Here is an example of my \&quot;first name\&quot; field.

I see you figured it out. Sorry, I couldn't get back to you sooner.

Dave, I still can't figure out the Captcha and Submit button styles.

Can you please post this...

Captcha: the text that goes in the CSS

Captcha: the text that goes in the Captcha Field Style

Submit button: the text that goes in the CSS

Submit button: the text that goes in the Submit Field Style

Thanks!

Can anyone here please help me style the Captcha and Submit fields?

Thanks!

Michelle,
I already told you that your code is wrong. Go back to your CSS file and fix the .captcha class. You didn't follow the tutorial correctly. It should be this:


Not what you have now.
As for your button, also check your syntax.

I also took a look at it again.

Your syntax is still wrong.

Problem one is that you don't have the class set up correctly. You're missing a period. You have \&quot;#myform captcha\&quot; when it MUST be \&quot;#myform .captcha\&quot; That's one reason your styling won't apply to the field.

Second, you have a lot of extra styling that is unnecessary. All you need in the captchs class is the \&quot;margin-left\&quot; parameter. Just change the px size till it aligns with your form elements.

Third, you have set a height requirement for your input fields. Remove that. A button is an INPUT field.

Believe me, I'm NOT a CSS expert. What I do do well is troubleshoot the issues and 99.9999999% of the time, it's syntax. The same holds true here.

I didn't want to literally point out the problems cause you won't learn that way. I'll bet you're kicking yourself now; wondering how the heck you missed those little things. In code, little things do A LOT .

Hope this one helps.

Hey Dave, thank you so much!

Your guidance helped fix the problems.

Hello,
This is an automatically generated message.
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 wish to receive our 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: http://www.rsjoomla.com/support-policy.html.

Thank You!
PLEASE NOTE: This topic is NOT locked and you can add replies to it. Other users are free to reply as well. This message has been generated by a bot and has no effect on the topic whatsoever.