CSS FORMBUILDER 2.0

[kovver]

Hello,

has anyone yet styled the formbuider areas in a way that sattisfies? and how would the css look like. I looked at the forum, but didn't get any wiser.

thanx in advance!

David - www.kovver.com art portal

[RonnyK]

For the textarea:

http://forum.cmsmadesimple.org/index.ph ... l#msg52829

Ronny

[kovver]

i saw that. but what about the input areas like email and name? how to style those?

[matterhornpat]

I am working on it now...This little bit is a simple way to style the inputs and labels, but I am struggling with the check/radio etc. as I can't see how to wrap different elements.

.formbuilderform input {
display: block;
margin-bottom: 1.25em;
width: 150px;
border: solid #ccc;
border-width: 1px 2px 2px 1px;
}

.formbuilderform label {
background-color: #000;
color: #fff;
font-weight; bold;
padding: 4px;
text-transform: uppercase;

}

[Dr.CSS]

Have you added class to the various fields you created?...

I can't tell which page has the form, understand english only  ...

[Deblus]

I am not sure where to put this code, I thought the CSS for formbuilder could not be accessed

I am working on it now...This little bit is a simple way to style the inputs and labels, but I am struggling with the check/radio etc. as I can't see how to wrap different elements.

.formbuilderform input {
display: block;
margin-bottom: 1.25em;
width: 150px;
border: solid #ccc;
border-width: 1px 2px 2px 1px;
}

.formbuilderform label {
background-color: #000;
color: #fff;
font-weight; bold;
padding: 4px;
text-transform: uppercase;

}

[Dr.CSS]

Having a link to look at makes it easier to tell you how...

http://mobilitypartners.com/index.php?page=contact

and this one...

http://mobilitypartners.com/index.php?p ... te-papaers

This whole form was styled in CSS, the check box in the bottom in on the opposite side it started on, the labels have all been arranged and the text areas after the name email etc. are all aligned with CSS...

If you look at the source you see the classes assigned, when you make a 'field' it has a second tab Advanced Settings where can assign a class to be used in the CSS...

[Deblus]

thats good Mark

but its not done with formbuilder, which for those of us still learning css code it would be easier / better if formbuilder could be modified

[Dr.CSS]

thats good Mark

but its not done with formbuilder, which for those of us still learning css code it would be easier / better if formbuilder could be modified

"not done with formbuilder" I'm not sure what you mean, we used form builder to make both of those forms...

[Deblus]

well my apologies Mark

I based my comments on Calguy's indication to me in another thread where I asked how to modify the text and colours in the sample contact form "that it cannot be done as the css in formbuilder is not accessable"

Have I misinterpreted his comments or have you done it a different way?

[Dr.CSS]

I'm thinking he means the interface...

If you put classes on all the fields you should be able to pick each one out and style it any way you want, text-type, sizing, font-weight etc. ...

[Deblus]

Ok I follow that and can see how you have done it

What I am not sure of is where / how do I insert the code I want?

{cms_module module='FormBuilder' form='contact'}

[Dr.CSS]

On the main interface page for the Formbulider module it gives you the tag, such as the one in your post...

This can go in a content edit box in the page edit mode of any page you want, or in a template, stick with a page unless you have a single template just for it...

If you go to Extensions > Modules then click on the module name or the word Help to the right you will get the parameters for the module....