Page 1 of 1

How to Attach Stylesheet to Formbuilder Form?

Posted: Sun Jan 11, 2009 9:00 pm
by CMSmonkey
Newbie here.

I have read that it is best not to use the "CSS static text field", rather - attach a stylesheet. 

I have searched the forums and documentation and cannot find something that gives simple directions for adding a stylesheet to a form.

Can someone help me with this, please?

Re: How to Attach Stylesheet to Formbuilder Form?

Posted: Sun Jan 11, 2009 10:44 pm
by Loopy
Go to the Stylesheets section and add a new stylesheet, eg. "myForm". This should have the css for your form and save it. This is now in your list ofstylesheets. Next, Under "Layout - Templates" select the template you're using for your layout. Click the small button "css" top right hand side. At the bottom of the list of stylesheets attached there is a dropdown list that will include you form stylesheet "myForm". Select 'myForm" and click "Add a Stylesheet". This will attach your new form stylesheet to your template and should apply your styles to your form.

This next bit of info comes from the help link in formbuilder and will be a start for your form stylesheet:
Styling and CSS

Paul Noone graciously provides us all with a pretty good standard CSS that you can use for forms:

/* Sample FormBuilder CSS base */
form {margin-top:0}
form, td, th, li { font-size: 100%}
form div {margin-bottom:0}
fieldset div {
margin-bottom:0.5em;
margin-left:1em;
}
fieldset div div {
margin-top:0.5em;
margin-left:1em
}
fieldset {
margin-bottom:1em;
border:1px solid #F60;
padding:0.5em
}
fieldset label {
width:auto;
}
legend {
color:#FFF;
background:#F60;
font-style:italic;
font-size:1.2em;
margin-bottom:0.5em;
padding:0.2em;
width:auto;
border:1px solid #CCC
}
textarea {
margin: 0.5em 0;
width:98%;
height: 6em
}

/* Apply this class to text/select input fields with shorter labels
to help alignment */
.short-label label {float:left; width:10em}
.short-label fieldset div input,
.short-label fieldset div select {width:16em}

/* Pretty up your Captcha image output */
.captcha {
margin:0.5em 0;
width:200px;
text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em}

Hope this works.

Re: How to Attach Stylesheet to Formbuilder Form?

Posted: Mon Jan 12, 2009 4:37 pm
by CMSmonkey
Hi Loopy,
Thank you so much for your simple instructions.  Now how does the form know which CSS stylesheet to use?  Is there something that I have to put in the form for it to know?

Re: How to Attach Stylesheet to Formbuilder Form?

Posted: Mon Jan 12, 2009 7:29 pm
by Dr.CSS
Loopy wrote: Under "Layout - Templates" select the template you're using for your layout. Click the small button "css" top right hand side.
At the bottom of the list of stylesheets attached there is a dropdown list that will include you form stylesheet "myForm".
Select 'myForm" and click "Add a Stylesheet".
This will attach your new form stylesheet to your template and should apply your styles to your form.
This is also documented in the Support > Documentation link above...

Re: How to Attach Stylesheet to Formbuilder Form?

Posted: Tue Jan 13, 2009 6:37 pm
by CMSmonkey
Thank you Mark for the reference, but I can't locate in the Documentation how to associate the CSS with the form. 

Any suggestions?

Re: How to Attach Stylesheet to Formbuilder Form?

Posted: Tue Jan 13, 2009 8:54 pm
by Dr.CSS
You can't per say attach a style sheet to the form itself, you attach it to the template used for the page displaying the form...

Maybe if you start here you will understand a little better...

http://wiki.cmsmadesimple.org/index.php ... d/Designer