Feature Request: CSS for pro login form

I would like the ability to style the Pro s2Member login form, both when used as a widget in a sidebar and when placed directly on a page or in the theme using the php invocation. Here’s some of the attributes of this feature that would be awesome to have:

* A list of every class used in the pro login form for all controls; e.g., labels, text boxes, and submit button.
* Ability to specify an alternate image source for the submit button.
* Ability to control the parameters of the DIV containing the form to set inheritable characteristics and overall look.

The features provided by this form inside of the s2Member Framework are too great to simply replace it with other plugins for login/register/logout, but its current styling does not work well with all themes (Arjuna-X in particular), especially in the sidebar.

I’ve had to do some serious page/sidebar/plugin/theme hacking to get something workable for my situation, which could have all been handled by CSS. I can insert CSS into the theme, I just have no idea what classes and IDs are being used in this form, so it’s difficult to implement without that.

Thanks!

Thank you for the feature request, Randy. I have forwarded this request to Jason (the lead developer).

Thanks for the heads up on this thread.

* A list of every class used in the pro login form for all controls; e.g., labels, text boxes, and submit button.

Great idea. I’ll see what we can do about that. In the mean time, you can find most of the classes/IDs used in s2Member Pro Forms, by inspecting your site in Firebug, or by opening the Pro Form template files for your installation, which are located inside: /s2member-pro/includes/templates/forms/

* Ability to specify an alternate image source for the submit button.

For PayPal Standard Button Shortcodes, there is an image="" Attribute for the Shortcode documented here (Dashboard -› s2Member® -› PayPal® Buttons -› Shortcode Attributes (Explained)), which allows a site owner to override the default PayPal Button image. For Pro Forms, we are required to use the official PayPal Express Checkout button image, per the PayPal terms of service. The standard “submit” button for Pro Forms can be styled via CSS, if the default button styles for your theme are not adequate.

For example:

input.s2member-pro-paypal-submit
	{
		background: #FFFFFF;
	}

* Ability to control the parameters of the DIV containing the form to set inheritable characteristics and overall look.

I believe this is already possible. For instance, with PayPal Pro Forms, this class is attached to each Pro Form, regardless of it’s specific functionality: div.s2member-pro-paypal-form

For example:

/* Re-style all text input fields for Pro Forms. */
div.s2member-pro-paypal-form input[type="text"]
	{
		background: #EEEEEE;
	}

Jason,

Thank you for the detailed response! Are you saying that the login/registration form is part of the class containing “pro-paypal”? I’ll go look at that today in the template file you pointed me at. It’s the submit button for the reg form that I want to replace the image for, in addition to styling the whole form.

I do have an HTML inspection plugin for Firefox that I use, and I see some of the classes around the controls for the login/registration form. They are showing up as multiple and very long class names as if there were some sort of concatenation going on. I don’t have a lot of experience in reverse-engineering forms this way, so I’m not totally clear on the direction to take. But I’ll go look at that template file.

Anyways, this is the kind of stuff that I’d rather not spend days cranking on, and if at all possible for you guys to first have a codex page on the class and id names, that would be really great! Follow that up with an implementation that has the CSS broken out into a dashboard set of controls and that would be awesome.

If you’d like to see a nice example of this, check out the plugin “Custom Contact Forms” by Taylor Lovett. Take a look at the “Styles” tab in the admin interface.

Again, thanks for the pointers to the style sheet – will go work with that.