CMS Made Simple Forums

Hi all,

Firstly I'm blown away by Formbuilder. I'm using the latest 0.4 and it's a Pandoras box of goodies!! I'm looking to change some of the CSS, particularly the fieldset rule, I can see it embedded in the HTML but I can't find how to change it in FB's admin!

Can anyone offer me a clue as to where to look?

Thanks

Sarah

Sarah,

IIRC, is the default templates filled with a field called "CSS" tpye: "static text". That holds the styling. Make sure to view in HTML-source, so check the HTML/SOURCE button in WYSIWYG....

Ronny

if you don't find it there, I found it in the FormBuilder help page http://www.yourdomain.com/admin/listmod ... ormBuilder

Like RonnyK said, it's a field within the form. But it's kind of annoying to have it there, it invalidates your HTML also because it inserts the tag in the middle of your page. TinyMCE also keeps inserting a
tag on top, at least it did for me and it pushe my form's text lower than I wanted.

I'd suggest you create a separate stylesheet and attach to your main template.

hexdj wrote: I'd suggest you create a separate stylesheet and attach to your main template.

I did this on your recommendation in another post. And it works well

Do you understand the formbuilder template code? I can't get my head around modifying it.

what template do you need to modify?

Aaaaaaaahhhhhhhh, I see. I wondered how this CSS field related to things!!

So to anyone else (equally mentally challenged with this) this is where to find the CSS for the form:

Goto Formbuilder, select the form your using. Here you'll see all the fields your form currently uses, nae, email etc. Click on the 'CSS' field and you see the usual CMSMS editor box. Now (and this is where I went wrong) the box will look empty so click the 'HTML' button in the menu of the editor and, voila, all your CSS appears! Change as you want and click Update on the pop HTML window and Update again in the Formbuilder admin.

I have to say this is excellent. So much better than the CMSMS default It does have it's quirks though, like the invalid code it stuffs in to your HTML. But it works! But I think I'll follow dtism's post here and attach the CSS through another stylesheet. Seems a much cleaner thing to do.

I'm still working out the template, but seems straightforward enough so if you (dtism) have anything particular you want to do with it post it in another post and I'll see if I can help.

So big thanks to RonnyK for pointing me in the right direction!

Sarah

Thanks for the offer of help. All I basically want to achieve is something like this:

Your Name:
__________________________________
|__________________________________|

Your Email Address:
__________________________________
|__________________________________|

Message:
__________________________________
|                                                                    |
|                                                                    |
|                                                                    |
|__________________________________|

[SUBMIT]

So I suppose what I need to know is what to do to my css to force the input boxes to be below the field labels. I'm a bit of a css novice really, I only really know stuff like

#something { some properties }

some content

but I assume it will need to be a little more complex than that. Am I right in thinking that I'll need to code some css for the LABEL and INPUT tags?

That is what the original Contact Form that comes with FormBuilder looks like. Do you have a links so I can take a look at what you wanna change?

Here's the rendered form http://www.fentonwalsh.com/index.php?page=feedback

I'm using cmsms version 1.0.4 and formbuilder version 0.3 and my form css looks like this:

Read my explanation above, it tells you exactly where the CSS is.

Goto Formbuilder, select the form your using. Here you'll see all the fields your form currently uses, nae, email etc. Click on the 'CSS' field and you see the usual CMSMS editor box. Now (and this is where I went wrong) the box will look empty so click the 'HTML' button in the menu of the editor and, voila, all your CSS appears! Change as you want and click Update on the pop HTML window and Update again in the Formbuilder admin.

I actually deleted the CSS here and created another css file for the form and then associated it with the template which uses the form. Using the CSS you can make it look anyway you like.

Sarah

When you goto Formbuilder you'll see two tabs; forms and configuration. Below which you'll see all/any forms currently set up. The developer of this module has set two forms up with which you can experiment. Click on a 'Contact Form', now you'll see a list of all the fields that this form uses; name, email etc. and some will refer to other aspects of the form such as Fieldset. One of them will be CSS. Click this. Initially you won't see any CSS (that's what threw me originally!). You'll need to click the HTML button in the editor. And there's the CSS!

Like I said before I think it's a good idea to move this out to a separate CSS file. I find it easier to work with,

HTH

Sarah

lexscripta wrote: Ok Sarah_h

Thanks -  I found the CSS field - However, when I check the HTML/source button there is no CSS there...  Appears to be a blank file. Does the form inherit CSS from the applications styles sheet?

BY the way, I am uing FCKeditor.

Where are the classes ? Do I have to name new classes/selectors myself?

Thanks!

LexScripta

For anyone else with the "blank page" issue, I had this too (I was using IE7), so I accessed admin using Firefox - and voila! the code pops up in the WYSIWYG Html window!!!

UPDATE:  Not so good, entire css entered in popup window now displays on the frontend of the site!!!

When trying to access the CSS inline code for Form builder, you click it to edit and it doesn't show in the wysiwyg you have to hit the turn wysiwyg off and it appears...

This is just sample code that should be copied and put in another stylesheet, then removed from the form...

1) So you can edit it w/o having to go to FB to do it...

2) It will throw a warning in validation...

You can/should give all your fields a class in the Advanced Settings tab to help with styling, render the page and look at the source to see where they show up...