latest stable versions: v150827 (changelog)

Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

How can I control form field width?

Home Forums Community Forum How can I control form field width?

This topic contains 2 replies, has 2 voices. Last updated by  AnotherOpus 3 years, 8 months ago.

Topic Author Topic
Posted: Sunday May 12th, 2013 at 12:16 pm #49780

Hello,

I used the s2Member hack file (s2-o.php) to remove s2Member CSS from the forms–but they still look the same. Every field spans the entire page width. It makes our website look less than professional.

I inspected CSS and discovered that all labels and fields have unique identifiers.

How can I use CSS to tell all labels to do something and all field to do something without requiring a five foot long CSS addition to manage all the unique s2Member elements with all s2member elements defined?

e.g.

.s2member-label {text-decoration:none; margin-top:20px;}
.s2member-field {width:40%;}

Thank you for your help finding the freedom to design our forms the way we want them to look.

I’m genuinely disappointed at the way form elements are laid out and designed as if it were government work.

Chris

List Of Topic Replies

Viewing 2 replies - 1 through 2 (of 2 total)
Author Replies
Author Replies
Posted: Sunday May 12th, 2013 at 10:07 pm #49801
TJ
Username: wellwater

Are you sure the CSS hack you’re using has really removed the .css file from being loaded? If it still looks the same, it seems to me that it’s either still there (check the source code) or there’s some other styles in another separate stylesheet that’s stretching your form fields across.

The way I customized the s2member form was to prevent the default CSS from loading (same as you), wrapped a div tag with .form class around the s2member shortcode, then styled all the form fields to be the same width. Here’s some sample code:

.form {
  width: 400px; /* the width of the checkout form */
}
.form input,
.form select {
  -webkit-box-sizing: border-box; /* see: http://css-tricks.com/box-sizing/ */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.form input[type="text"],
.form input[type="password"],
.form select {
  width: 100%; /* stretch text and password fields and select boxes all the way across */
}


/* following styles are just cosmetic for IE7 (may need to fidget with values) */
.form input[type="text"],
.form input[type="password"] {
  *width: 92%; /* for IE7 and below, as it doesn't understand box-sizing */
}
.form select {
  *width: 98%; /* for IE7 and below, as it doesn't understand box-sizing */
}

That’s just the basics. You can style the fields to look nicer with some additional CSS.

Now, if you don’t want all your fields to have the same length, then you’ll have to target them by class or ID.

Posted: Monday May 13th, 2013 at 1:23 am #49804

TJ!

Elegant, simple and perfect solution!

I only wish our friends at s2Member had designed the CSS classes and IDs so that all fields could be changed with single code elements (e.g. s2member-field-email, s2member-field-first-name, etc).

…but this is a superb work around!

And it gives an excellent way to refine the forms.

Thank you,

Chris

Viewing 2 replies - 1 through 2 (of 2 total)

This topic is closed to new replies. Topics with no replies for 2 weeks are closed automatically.

Old Forums (READ-ONLY): The community now lives at WP Sharks™. If you have an s2Member® Pro question, please use our new Support System.

Contacting s2Member: Please use our Support Center for bug reports, pre-sale questions & technical assistance.