Most Appropriate Way to Style [s2Member-Pro-PayPal-Form]

[BobTabor]

Hi, just looking for a little guidance / recommendation on how best to modify the appearance of the form output by the [s2Member-Pro-PayPal-Form] short code.

I just need to tighten up the form to fit a smaller space. Specifically, I want to:

-- Hide some text generated by the form (i.e., section titles like "Create Profile", "Security Code", "Complete Registration")

-- Remove the icons and horizontal rules beneath the section titles

-- Keep the titles and the form fields aligned (currently, the form fields seem to be set at 100% ... so they are automatically moved to a new "line" on the form)

Ideally, I would do this in a way that would not be broken when the next version of s2Member is released. I imagine I'll need to use some serious CSS ... any examples available of a highly styled version of a form?

thanks!
Bob

[Cristián Lávaque]

You can customize the pro-forms if you want.

Is it possible to modify the PayPal® and/or Authorize.Net® Pro Form templates?

Usually not necessary. But yes, if you really need to. Please check your /s2member-pro/includes/templates/forms/ directory. You can take the default templates, and place some ( or all of them ) into your own WordPress® theme directory. s2Member Pro will automatically find your custom templates there. By placing custom templates into your theme directory, you can be sure they won't get overwritten in a future upgrade. Either that, or you can just use the default templates like they are, and customize them with your own CSS rules inside the Stylesheet for your WordPress® theme ( i.e. style.css ). If you're using a PriMo Theme ( for instance, the s2Clean Theme ), check your Theme Options Panel, under: Custom CSS / Style Sheet.

You tell your pro-form to use your template file with the template shortcode attribute. WP Admin -> s2Member -> PayPal Pro-Forms -> Shortcode Attributes (Explained)

template="" 100% optional. This can be a custom template file that exists inside your WordPress® theme directory. For example: template="checkout.html".

I hope that helps.

[BobTabor]

Awesome ... followup question: reCaptcha. It seems to be controlled outside of the paypal-registration-form.html template and I want to style / redo its title, etc. I looked through the other folders for a file that contained the word "recaptcha" but nothing jumped out at me. Could you point me in the right direction?

[BobTabor]

And in addition to the reCaptcha question ...

It seems like you guys insert paragraph tags around stuff even though they are not present in the template file.

I'm trying to get the "First Name *" and the input box on the same line for example. I attempt to remove all the formatting tags that might affect it. So, I remove the br tag and the span tags around the text First Name in my copy of the template file. So, BEFORE:

Code: Select all

<span>First Name *</span><br />
            <input aria-required="true" type="text" maxlength="100" name="s2member_pro_paypal_registration[first_name]" id="s2member-pro-paypal-registration-first-name" class="s2member-pro-paypal-first-name s2member-pro-paypal-registration-first-name" value="%%first_name_value%%" tabindex="10" />


And AFTER my edits:

Code: Select all

            First Name *
            <input aria-required="true" type="text" maxlength="100" name="s2member_pro_paypal_registration[first_name]" id="s2member-pro-paypal-registration-first-name" class="s2member-pro-paypal-first-name s2member-pro-paypal-registration-first-name" value="%%first_name_value%%" tabindex="10" />


I refresh the browser and look in Firebug and, while *those* tags are gone, there's a bunch of other stuff in there. Here's the code that's output that I copied from Firebug:

Code: Select all

<p>
<br>
<br>
First Name *
</p>
<input id="s2member-pro-paypal-registration-first-name" class="s2member-pro-paypal-first-name s2member-pro-paypal-registration-first-name" type="text" tabindex="10" value="" name="s2member_pro_paypal_registration[first_name]" maxlength="100" aria-required="true">


I then copied and pasted those fields outside of the div tags (thinking there's some magic javascript somewhere) where they are embedded and I get the same behavior. Yikes!

How can I take TOTAL control of the output of this form? At a minimum, I'm trying to get the label and the form field to appear on the same horizontal position.

[BobTabor]

... and BTW I can live without First and Last name ... (in fact, I turned these off just now) ... but the same holds true with email, username and password, which I really need to fit into a small area.

[BobTabor]

Ok, I can't explain it, and I don't have time to investigate it, but once I start stripping things down (removing the Label and complex Div tags from around the various form fields) it generates HTML I can work with. So, either you guys are doing some funky JavaScript stuff or stuff on the server side, or Firefox / Firebug is "imagining" things. At any rate, I'm getting results closer to what I need so forget the previous posts regarding formatting the form fields.

Still need a bit of input about reCaptcha ... but it's low priority. Thanks!

[Cristián Lávaque]

Awesome ... followup question: reCaptcha. It seems to be controlled outside of the paypal-registration-form.html template and I want to style / redo its title, etc. I looked through the other folders for a file that contained the word "recaptcha" but nothing jumped out at me. Could you point me in the right direction?

Would the captcha attribute for the shortcode help? WP Admin -> s2Member -> PayPal Pro-Form -> Shortcode Attributes (Explained) -> captcha

captcha="clean" When you set this Attribute, visitors must prove they're human by typing a captcha/security code. Possible values: 0 = do NOT require a captcha code on this Form; clean = DO require a captcha code on this Form; using the clean theme style. Possible theme styles include: red, white, clean, and blackglass. This service is powered by Google's reCaptcha system.

[Jason Caldwell]

Yea, the captchya box is implemented by Google's reCAPTCHA service, via JavaScript. The only way to control the output of this, is to change the captcha="" Attribute in your Shortcode. It can be one of: captcha="clean|red|white|blackglass".

Or, if you really want to get creative with this, you might check the docs here:
http://code.google.com/apis/recaptcha/
( Custom Theming )

[BobTabor]

Actually, I'm talking about your inclusion of the horizontal rule, the title, the icon, etc. Things that are distinctive to YOUR inclusion of the reCaptcha in s2Member. Thanks!

[Jason Caldwell]

Those portions of the output are generated by this routine:
/s2member-pro/includes/classes/gateways/paypal/paypal-form.inc.php

The icon and overall styles are applied via CSS, which you can modify if you like, through your theme. Also, it is possible to take full control over reCaptcha, by adding it yourself, to your own custom template file. Using the default template as a starting point, remove the %%captcha%% Replacement Code from your template file, and replace that with whatever code you prefer. If you want to call upon s2Member's implementation of reCaptcha within your custom template file, you can do something like this:

Code: Select all

<?php echo c_ws_plugin__s2member_utils_captchas::recaptcha_script_tag ("clean", 300); ?>

* Wrap this PHP tag with whatever HTML you prefer over s2Member's default implementation. The first argument indicates the style, and the second argument ( i.e. 300 ) indicates the tabindex property you'd like to use.