How to Attach Stylesheet to Formbuilder Form?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
CMSmonkey
Power Poster
Power Poster
Posts: 290
Joined: Thu Nov 27, 2008 4:58 pm

How to Attach Stylesheet to Formbuilder Form?

Post 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?
Loopy
Forum Members
Forum Members
Posts: 38
Joined: Sat Jun 10, 2006 5:34 pm

Re: How to Attach Stylesheet to Formbuilder Form?

Post 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.
CMSmonkey
Power Poster
Power Poster
Posts: 290
Joined: Thu Nov 27, 2008 4:58 pm

Re: How to Attach Stylesheet to Formbuilder Form?

Post 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?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How to Attach Stylesheet to Formbuilder Form?

Post 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...
CMSmonkey
Power Poster
Power Poster
Posts: 290
Joined: Thu Nov 27, 2008 4:58 pm

Re: How to Attach Stylesheet to Formbuilder Form?

Post 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?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: How to Attach Stylesheet to Formbuilder Form?

Post 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
Post Reply

Return to “Layout and Design (CSS & HTML)”