cformsII Support Forum
Current User: Guest *Frequently Asked Questions*
Search 
Search Forums:


 




Left align form?

Add a New Topic Reply to Post
Post

Yoda - Guest

11:29 am - December 10, 2007

Please replace the ??? with your data!


Hi!

First off: great plugin! I'm very impressed with how feature-rich cforms is and I enjoy the fact that you can customize nearly everything. There is, however, one little problem that I currently struggle with: I would like the whole form to be left aligned. I dug around in the CSS stylesheet (using wide_open_no_border.css), but I couldn't get it right. Also checked the contact page with Firebug but couldn't find the align property of the form.

This question probably has a very simple answer, but this is really a last resort. If anyone could provide me with a little help here, I would really appreciate it.

Thanks in advance! 

Oliver - Admin

7:21 pm - December 10, 2007

posts 3899

You need to adjust the class .cforms in your cforms CSS theme file. Simply remove the auto from margin and replace it with whatever suits you.

Also, check out the CSS guide and webcast in this forum (stick posts at the top!) 

KSteele - Guest

5:41 am - April 8, 2008

1st and foremost - GREAT JOB w/ the scripts Guys and Gals.... Very Clean!!!! A CLASS ACT!!!!


I too have a positioning problem... this is a fresh install, with the latest updates.

Here's a link to view: http://mobilecompmedic.com/seopro/

.cform was the 1st place that I went to make this adjustment but after several trys I decided to bring it here... my apologies. I've come to the conclusion that the .cform code is correct and that it is the Wordpress CSS that is keeping this module confined to the right column, thus pushing the form off the page - or better spoken, making the page width expand off screen the number of pixels I set for margin-right (in the example below: 600px)

.cform {
margin:0 0 600px 0;
width: 410px;
}

Any advice for a quick fix? If so please be specific, I'm pretty slow :>)

Thanks, "K"

Oliver - Admin

7:17 am - April 8, 2008

posts 3899

I too have a positioning problem... this is a fresh install, with the latest updates.

A positioning problem is always relative, it depends on what you're trying to achieve, which you haven't explained.

Looking at your page, I see you added the form via the widget control to your sidebar, so this worked ok, although it looks broken (can't squeeze a 400px wide form in a 200px wide sidebar!).

Two options:

  1. Either choose the proper cforms CSS theme for the sidebar position: "sidebar layout"
  2. Or remove the widget, and include your contact form in a post / page (see HELP! page for detailed instructions)

KSteele - Guest

7:59 am - April 8, 2008

I thought that might be the case, Thank you for that quick reply Oliver... if there is a way I can help spread the good word for the cause, please let me know. i.e.- a link back to (?)

Best regards, "K"

KSteele - Guest

5:26 pm - April 8, 2008

NP Oliver, will do. In the meantime... in case anyone else is interested in having the Shiny Style contact form in their WordPress sidebar, the following is the altered CSS stylesheet I used.


1.) Resize the top and bottom images width to 180px (../images/customform_shiny_bg.jpg) & (../images/customform_shiny_bg_bottom.jpg)


Cut, Copy & Paste the following to replace the existing stylesheet: shiny_style.css

That's It!!!! Good Luck, and thanks again Oliver


/* */
/* custom code on top the default style sheet */
/* */
/* ** if you want this to apply to a different */
/* ** form than to just the 2nd form change the '2' */
/* ** (or remove for your 1st, default form) */
@import "calendar.css";

.cform fieldset.cf-fs1 {
background: url(../images/customform_shiny_bg.jpg) no-repeat;
padding-bottom:0;
}
.cform fieldset.cf-fs1 ol.cf-ol {
margin:50px 0 0 0!important;
}

/* */
/* main 'top-level' form elements */
/* */
.cform {

margin:0 0 0 0;
width: 180px;
}

.cform fieldset {
margin:10px 0 0 0;
padding:5px 0 15px 0;
border:none;
background:white;
}

.cform .cf_hidden {
display:none;
border:none!important;
background:none!important;
padding:0!important;
margin:0!important;
}

.cform legend {
display:none;
}

ol.cf-ol {
margin:0!important;
padding:0!important;
}
ol.cf-ol li {
background:none!important;
margin:5px 0!important; /*some themes may interfere otherwise*/
padding:0;
list-style:none!important;
text-align:left;
line-height:1.3em;
}

/* */
/* just for text-only fields (no input) */
/* */

ol.cf-ol li.textonly {
color:#a2a2a2;
padding:4px 0;
text-align:center;
}

/* */
/* global definitions for field labels */
/* */

.cform label {
color:#666666;
width:90px;
margin:4px 10px 0 0;
display:-moz-inline-box; /*for mozilla*/
display:inline-block; /*for Opera & IE*/
text-align:left;
vertical-align:top;
}
.cform label span {
color:#666666;
width:90px; /* must be the same as above!*/
display:block;
}

label.cf-before {
margin:4px 10px 0 0;
}

label.cf-after {
margin:4px 2px 0 6px;
width:70px;
text-align:left;
}

label.cf-after span {
width:70px;
display:block;
}

label.cf-group-after {
margin:4px 4px 0 2px;
width:125px;
text-align:left;
}
label.cf-group-after span {
width:125px;
display:block;
}

/* */
/* FORM FIELDS general formatting */
/* */

.cform input,
.cform textarea,
.cform select {
color:#333;
padding:3px;
background: #fefefe;
border: 1px solid #ddd;
vertical-align:top;
letter-spacing:1px;
line-height:normal;
padding:4px 3px;
vertical-align:top;
font:bold 9px Arial;
}

.cform input:hover,
.cform textarea:hover,
.cform select:hover {
background:#f2f2f2;
}

.cform input:focus,
.cform textarea:focus,
.cform select:focus {
background:#fefefe;
}

.cform textarea,
.cform input {
width:175px;
}
.cform select {
width:183 px; /* attempt to have equal length */
}

.cform select.cfselectmulti {
height:7.5em;
}

.cform textarea {
overflow:auto;
}

/* */
/* formatting for text: "(required)" & other */
/* */

span.reqtxt,
span.emailreqtxt {
color:#a2a2a2;
margin:3px 0 0 5px;
font:normal 9px Tahoma;
display: -moz-inline-box;
vertical-align:top;
letter-spacing:1px;
}

/* */
/* radio button title */
/* */

ol.cf-ol li.cf-box-title {
color:#a2a2a2;
padding-left:100px; /* check with label 'width' incl. */
margin:6px 0 0 0!important;
}

/* */
/* check boxes */
/* */

input.cf-box-a,
input.cf-box-b {
margin:2px 0 0 0;
width:16px;
height:22px;
border:none!important;
background:none!important;
}

input.cf-box-a {
margin-left:100px; /* check with label 'width' incl. */
}

/* */
/* check box groups */
/* */

ol.cf-ol li.cf-box-group {
margin:0pt !important;
padding: 0 0 5px 100px;
}

/* */
/* FORM submit button */
/* */

p.cf-sb {
text-align:center;
padding:0!important;
margin:0;
background: url(../images/customform_shiny_bg_bottom.jpg) no-repeat bottom left;
}
.cform input.sendbutton {
color:#FFFFFF;
cursor:pointer;
font:14px Arial;
height:31px;
line-height:31px;
margin: 0px 10px 10px 0px;
padding: 0 0 5px;
width:120px;
background: white url(../images/customform_shiny_submit.jpg) no-repeat;
border:none;
}
.cform input.sendbutton:hover {
background-position:0 -31px;
}

/* */
/* FORM FIELDS enhanced error display */
/* */
ol.cf-ol li.cf_li_err {
background:#FFDFDF url(li-err-bg.png) repeat!important;
border-color:#DF7D7D;
border-style:solid;
border-width:1px 0pt;
padding:5px 0!important;
margin:5px 0!important;
}

ol.cf-ol li ul.cf_li_text_err {
margin:0 0 0 100px;
padding:0;
color:#333;
}

ol.cf-ol ul.cf_li_text_err li {
background:url(icon-alert.png) no-repeat left 1px!important;
list-style:none!important;
font-weight:bold;
text-indent:0;
margin:0 0 2px!important;
padding-left:15px;
}
ol.cf-ol ul.cf_li_text_err li:before {
content:'';
}

/* */
/* 'visitor verification' related styles */
/* */

label.secq,
label.seccap {
vertical-align:text-bottom;
margin-bottom:4px;
margin-right:20px;
}

input.secinput {
vertical-align:text-bottom;
}

#cforms_captcha6,
#cforms_captcha5,
#cforms_captcha4,
#cforms_captcha3,
#cforms_captcha2,
#cforms_captcha {
height:15px;
width:50px;
padding: 4px 4px;
margin: 10;
vertical-align:text-bottom;
}

img.captcha {
vertical-align:text-bottom;
margin:0 0 0 30px!important;
padding:0!important;
border:none!important;
float:none!important;
}

img.captcha-reset {
vertical-align:text-bottom;
background: url(captcha_reset_silver.gif) no-repeat;
margin:0 0 2px 3px;
width:21px;
height:21px;
border:none;
}

img.imgcalendar {
border:none;
}

/* */
/* change formatting of response msgs here */
/* */

div.cf_info {
color:#333;
display:none;
padding:0 0 0 0!important;
width:180px;
line-height:1.3em;
margin:auto;
align:center;
}
div.cf_info ol {
margin:0;
padding:5px 15px 0 30px;
}
div.cf_info ol li {
padding:1px 0;
margin:2px 0;
}
div.cf_info a {
color:#ad2929!important;
text-decoration:underline!important;
}
div.success {
background:white none repeat scroll 0%;
color:#AAAAAA;
display:block;
letter-spacing:3px;
}
div.failure {
display:block;
background:#FFDFDF url(li-err-bg.png) repeat!important;
border-color:#DF7D7D;
border-style:solid;
border-width:1px 0pt;
}

/* */
/* formatting for invalid user inputs */
/* */
.cform .cf_error {
color:#ad2929;
border:1px solid #ad2929;
}
div.mailerr {
display:block;
}
.mailerr,
.cform .cf_errortxt {
color:#ad2929;
}

/* */
/* disabled fields [disabled] does not work on IE! */
/* */

[disabled] {
color:#dddddd;
border-color:#dddddd!important;
background:none!important;
}
.disabled {
border-color:#dddddd!important;
}

/* */
/* upload box styling */
/* */

.cform input.cf_upload {
width:220px;
background: #f9f9f9;
border:1px solid #888888;
}

/* */
/* Other: link love */
/* */
.linklove {
width:180px;
margin:0 auto 10px!important;
padding:0!important;
text-align:center!important;
}
.linklove a,
.linklove a:visited {
font-size: 0.8em;
font-family: Tahoma;
color:#aaaaaa!important;
}

/* */
/* Other: browser hacks */
/* */
* html ol.cf-ol,
* html ol.cf-ol li,
* html span.reqtxt,
* html span.emailreqtxt {
display: inline-block; /*for ie6*/
}
*+html ol.cf-ol,
*+html ol.cf-ol li,
*+html .cform label,
*+html span.reqtxt,
*+html span.emailreqtxt {
display: inline-block; /*for ie7*/
}
*+html img.captcha {
margin-bottom:1px!important;
}
* html img.captcha {
margin-bottom:1px!important;
}
* html select {
margin-top:3px!important;
}

Add a New Topic Reply to Post


Reply to Topic: Left align form?
PLEASE READ THE FAQs FIRST! THANK YOU.

NOTE: New Posts are subject to administrator approval before being displayed

Guest Name (Required):

Guest EMail (Required):

Guest URL (required)

Math Required!
What is the sum of: 2 + 9        (Required)

Topic Reply:


 
© Simple:Press Forum - Version 3.1.3 (Build 356)