|
|
These forums are to discuss any RSjoomla! related questions. Please note that official support is offered via Customer Support Ticketing System only, responses in the forum are not guaranteed.
TUTE: Styling your RSForms (1 viewing)
|
|
TOPIC: TUTE: Styling your RSForms
|
dniezby (User)
Expert Boarder
Posts: 136
|
| TUTE: Styling your RSForms 2008/02/05 18:38 |
Karma: 7 |
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. Post edited by: dniezby, at: 2008/02/05 16:43 |
|
|
|
The administrator has disabled public write access. |
alex (Admin)
Admin
Posts: 518
|
| Re:TUTE: Styling your RSForms 2008/02/08 09:22 |
Karma: 10 |
|
Thanks dn for your hard work, much appreciated.
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/08 16:26 |
Karma: 7 |
|
Not a problem.
|
|
|
|
The administrator has disabled public write access. |
mrwild (User)
Fresh Boarder
Posts: 8
|
| Re:TUTE: Styling your RSForms 2008/02/19 12:23 |
Karma: 0 |
|
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?..........
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/19 16:22 |
Karma: 7 |
|
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.
|
|
|
|
The administrator has disabled public write access. |
guid (User)
Fresh Boarder
Posts: 5
|
| Re:TUTE: Styling your RSForms 2008/02/20 12:32 |
Karma: 0 |
|
Thank You for that great tutorial!
I was looking a very long time for a solution like that. Now it´s done!
The only thing i could not fix is the mouse-over description box:
The box is displaying far away on the right border of the browser so that one has to scroll a lot horizontal to see it.
I cant find the responsible setting in the css?
One more: How can the input-fields be designed?
e.g. border 1px instead of the default html-inputboxes
Post edited by: guid, at: 2008/02/20 11:18
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/20 17:12 |
Karma: 7 |
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: | Code: |
/* 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: 60%;
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;
}
|
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. |
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/20 17:16 |
Karma: 7 |
Here is the corrected tutorial. There was a typo that might cause some problems with the placement of the help text display. |
|
|
|
The administrator has disabled public write access. |
guid (User)
Fresh Boarder
Posts: 5
|
| Re:TUTE: Styling your RSForms 2008/02/20 21:11 |
Karma: 0 |
|
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?
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/20 21:25 |
Karma: 7 |
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.. | Code: |
#rsform input {
border: 1px solid #EEEEEE; /* Whatever color you want */
color: #808080; /* This will color the text */
font-weight: bold;
font-family: "Lucida Grande" ,Verdana,sans-serif;
height: 1.1em;
padding-left: 30px;
padding-top:6px;
width: 300px;
font-size: 1em;
vertical-align: middle;
text-decoration: none;
}
|
|
|
|
|
The administrator has disabled public write access. |
guid (User)
Fresh Boarder
Posts: 5
|
| Re:TUTE: Styling your RSForms 2008/02/21 08:54 |
Karma: 0 |
|
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.
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/21 18:38 |
Karma: 7 |
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:
| Code: |
#rsform input.mytextboxes {
}
|
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. Post edited by: dniezby, at: 2008/02/21 16:44 |
|
|
|
The administrator has disabled public write access. |
Mac (User)
Fresh Boarder
Posts: 1
|
| Re:TUTE: Styling your RSForms 2008/02/22 06:05 |
Karma: 0 |
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 Post edited by: Mac, at: 2008/02/25 04:24 |
|
|
|
The administrator has disabled public write access. |
zANavAShi (User)
Fresh Boarder
Posts: 9
|
| Re:TUTE: Styling your RSForms 2008/02/25 00:55 |
Karma: 2 |
Thanks for this dniezby, it's just what I needed to get me started with styling my forms |
|
|
|
The administrator has disabled public write access. |
learning99 (User)
Fresh Boarder
Posts: 3
|
| Re:TUTE: Styling your RSForms 2008/02/25 10:45 |
Karma: 0 |
|
Hi dniezby,
Can you tell me how do you create the "instruction" class and "Section" with RSform?
I noticed the form you created on your website has 2 "instruction" and "Section". 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 "instruction" class and "Section" by rsform which has no such classes
, like you did for the forms on your wesite. Your tutorial has css for "instruction class" 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 "*" (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 "*" be different colour with their title texts?
Any help will be greatly appreciated indeed.
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/25 16:31 |
Karma: 7 |
1) I could not find out how to create the "instruction" class and "Section" by rsform which has no such classes
, like you did for the forms on your wesite. Your tutorial has css for "instruction class" but did not mention how to create.
2). The descriptions appear on the form, left to the field titles.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.
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.Change the width of your labels. | Code: |
#rsform label {
float:left;
color: #ffffff;
width: 160px; /* Change this so that your form field labels fit the way you want them to. */
margin-right: 10px;
text-align:left;
font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
|
4). All stars "*" (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 "*" be different colour with their title texts?
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. Post edited by: dniezby, at: 2008/02/25 14:32
|
|
|
|
The administrator has disabled public write access. |
biltong (User)
Fresh Boarder
Posts: 6
|
| Re:TUTE: Styling your RSForms 2008/02/25 19:05 |
Karma: 0 |
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 ( http://www.holiday-gite-france.co.uk/index.php/component/option,com_forme/fid,1/) and the 1st problem does not exist but the 2nd does.) There are two things:
- Empty rectangular object with round cornered border appears above the form. This should not appear.
- 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 Post edited by: biltong, at: 2008/02/25 17:25 |
|
|
|
The administrator has disabled public write access. |
mrwild (User)
Fresh Boarder
Posts: 8
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
| Re:TUTE: Styling your RSForms 2008/02/25 23:38 |
Karma: 7 |
|
Ok, for your problem, to get rid of the the pop up box with empty text just remove the <span></span> 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.
|
|
|
|
The administrator has disabled public write access. |
dniezby (User)
Expert Boarder
Posts: 136
|
|
|
|
The administrator has disabled public write access. |
|
|
|
|
|
