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?
How to Attach Stylesheet to Formbuilder Form?
Re: How to Attach Stylesheet to Formbuilder Form?
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.
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?
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?
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?
This is also documented in the Support > Documentation link above...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.
Re: How to Attach Stylesheet to Formbuilder Form?
Thank you Mark for the reference, but I can't locate in the Documentation how to associate the CSS with the form.
Any suggestions?
Any suggestions?
Re: How to Attach Stylesheet to Formbuilder Form?
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
Maybe if you start here you will understand a little better...
http://wiki.cmsmadesimple.org/index.php ... d/Designer


