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.

Feature Request: CSS for pro login form

Home Forums Community Forum Feature Request: CSS for pro login form

This topic contains 3 replies, has 3 voices. Last updated by  Randy King 4 years, 10 months ago.

Topic Author Topic
Posted: Wednesday Feb 29th, 2012 at 6:18 pm #6821
Randy King
Username: RandyKing

List Of Topic Replies

Viewing 3 replies - 1 through 3 (of 3 total)
Author Replies
Author Replies
Posted: Wednesday Feb 29th, 2012 at 10:22 pm #6844
Raam Dev
Username: Raam
Staff Member

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

Posted: Wednesday Feb 29th, 2012 at 11:42 pm #6857
Staff Member

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;
	}
Posted: Thursday Mar 1st, 2012 at 9:33 am #6886
Randy King
Username: RandyKing

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.

Viewing 3 replies - 1 through 3 (of 3 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.