Community Support Forums

Re: S2Member Pro CSS

2011-11-20T19:31:34-05:00

Ah, nice work Raam! Good to know that.
I'll reference this in that mod_security article too, for the benefit of others.

In the mean time, if you think of anything s2Member could do to avoid this, please let me know. s2Member doesn't set permissions on any files or directories in WordPress, except it's own /s2member-logs/ and /s2member-files/ directory.

The /s2member-logs/ directory is never viewed on the web, so no issue there in this regard. However, if a site owner is using s2Member's Advanced Mod Rewrite Rules in the /s2member-files/ directory, which defaults to 777 permissions, I suppose suPHP could cause an issue there as well, you think?

See Dashboard: s2Member -> Download Options -> Advanced Mod Rewrite Linkage.

Anyway, glad to see you figured this out. If you think of anything s2Member could do to avoid this, please let me know. Perhaps we could detect it and report it to the site owner in the Dashboard?

Statistics: Posted by Jason Caldwell — November 20th, 2011, 7:31 pm

Re: S2Member Pro CSS

2011-11-20T16:59:47-05:00

Jason Caldwell wrote:
So because your plugins directory was writable, mod_security was not allowing a file inside that directory from being loaded by Apache? Is that correct?

Actually, this is incorrect.

To confirm my hypothesis before replying to you, I tried disabling mod_security by adding SecFilterEngine Off to my .htaccess file, however I still received the errors mentioned above.

I now believe the error is related to the suPHP module. The suPHP module "is a tool for executing PHP scripts with the permissions of their owners".

My plugins/ directory is owned by me, but because it had loose permissions (allowing writable access to groups and others), Apache threw the SoftException and refused access to the file. (This blog post seems to confirm my new hypothesis.)

Statistics: Posted by Raam Dev — November 20th, 2011, 4:59 pm

Re: S2Member Pro CSS

2011-11-20T16:40:05-05:00

Thanks for posting this Raam.
So because your plugins directory was writable, mod_security was not allowing a file inside that directory from being loaded by Apache? Is that correct?

Statistics: Posted by Jason Caldwell — November 20th, 2011, 4:40 pm

Re: S2Member Pro CSS

2011-11-17T19:17:33-05:00

When my Pro Forms showed up entirely without styles, I located the link my that loaded the CSS for the Pro Form:

https://raamdev.com/wordpress/wp-content/plugins/s2member/s2member-o.php?ws_plugin__s2member_css=1&qcABC=1&ver=111105-111105-1516097562

I tried accessing that link directly and instead of returning the s2Member CSS, I was getting a 404.

Looking at my Apache logs, I found these two lines:

[Thu Nov 17 17:14:04 2011] [error] [client 72.87.158.232] Premature end of script headers: /home/raamdev/public_html/wordpress/wp-content/plugins/s2member/s2member-o.php

SoftException in Application.cpp:601: Directory "/home/raamdev/public_html/wordpress/wp-content/plugins" is writeable by group

I changed the permissions on my wp-content/plugins/ directory by removing Group and Other writable access. This fixed the problem and now my Pro Form is styled correctly.

I believe this is related to Apache mod_security and more information on problems with mod_security and s2Member can be found here: viewtopic.php?f=36&t=14787

Statistics: Posted by Raam Dev — November 17th, 2011, 7:17 pm

Re: S2Member Pro CSS

2011-11-15T21:28:17-05:00

Thank you, the !important worked

Statistics: Posted by Deyson — November 15th, 2011, 9:28 pm

Re: S2Member Pro CSS

2011-11-15T18:10:35-05:00

I would tackle this using Firebug for Firefox. That way you can see what your changes will do in real-time, and it takes some of the guess work out of the equation when you're dealing with overlapping styles. In some cases you might need to apply the !important declaration to override your theme's existing styles.

Code:: div.s2member-pro-paypal-form-description-div { font-size: 140% !important; font-family: 'Consolas', 'Courier New', monospace !important; }

See: http://www.w3.org/TR/CSS2/cascade.html#important-rules

Statistics: Posted by Jason Caldwell — November 15th, 2011, 6:10 pm

Re: S2Member Pro CSS

2011-11-15T17:12:03-05:00

Also I did the following to customize the default CSS?
I created create this directory and file: /wp-content/mu-plugins/s2-hacks.php
adding the code above to the s2-hacks.php.

I then copied the css code : div.s2member-pro-paypal-form-description-div{font-size:140%;font-family:'Consolas','Courier New',monospace} to make changes to the font type in my custom css for my theme, but changes do not happen.

I am missing something? I am trying to make some changes to the Pro Forms to make it match my theme.

Thank you

Statistics: Posted by Deyson — November 15th, 2011, 5:12 pm

Re: S2Member Pro CSS

2011-11-15T16:50:13-05:00

Thank you!

Statistics: Posted by Deyson — November 15th, 2011, 4:50 pm

Re: S2Member Pro CSS

2011-11-15T16:31:59-05:00

Thanks for the follow-up.

Please check your Dashboard here:
s2Member -> General Options -> Registration/Profile Fields & Options
( you'll just need to enable this functionality on your installation )

SNAG-0120.png

Statistics: Posted by Jason Caldwell — November 15th, 2011, 4:31 pm

Re: S2Member Pro CSS

2011-11-15T15:57:51-05:00

I see on the sample page you linked to show the sample Pro Form has two input lines for passwords. My form does not have this, how can I add a password field, so my members can add their own password.

Statistics: Posted by Deyson — November 15th, 2011, 3:57 pm

Re: S2Member Pro CSS

2011-10-20T15:52:59-05:00

And here is another option that is available to advanced site owners.

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.

Statistics: Posted by Jason Caldwell — October 20th, 2011, 3:52 pm

Re: S2Member Pro CSS

2011-10-20T15:51:16-05:00

Changing the order of Custom Registration/Profile Fields is possible through your Dashboard, using the up/down arrows provided by s2Member. See attached screenshot.

SNAG-0042.png

Statistics: Posted by Jason Caldwell — October 20th, 2011, 3:51 pm

Re: S2Member Pro CSS

2011-10-20T15:49:38-05:00

Thanks for reporting this important issue.

s2Member Pro Forms come with basic structural CSS, giving Pro Forms a professional appearance, but still leaving plenty of room for style inheritance from your WordPress theme.

On your installation, your Pro Forms should look something like our demo here: http://dev.primothemes.com/s2clean/payp ... kout-demo/

If your Pro Forms look shoddy or unprofessional, here are some things I would have a look at:

1. Is s2Member Pro properly loading its JavaScript/CSS files on your installation?
( take a look in the of your site, are these files functional? )

2. Is your WordPress theme overriding s2Member's default structural styling in some way?
( try testing with the default WordPress themes, or with the s2Clean theme for s2Member )

3. If all else fails, you can remove all of s2Member's CSS following these instructions, and then apply your own stylesheet which will need to completely re-style the s2Member Pro Forms on your installation.

How can I prevent s2Member Pro from loading it's default CSS?
You can create this directory and file: /wp-content/mu-plugins/s2-hacks.php

Code:: add_action ("ws_plugin__s2member_after_loaded", "remove_s2_pro_css"); function remove_s2_pro_css () { remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_css_js::css"); } ?>

Or, you could remove only specific action Hooks; based on Payment Gateway.

Code:: add_action ("ws_plugin__s2member_after_loaded", "remove_s2_pro_css"); function remove_s2_pro_css () { remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_alipay_css_js::alipay_css"); remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_authnet_css_js::authnet_css"); remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_ccbill_css_js::ccbill_css"); remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_clickbank_css_js::clickbank_css"); remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_google_css_js::google_css"); remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_paypal_css_js::paypal_css"); } ?>

If you go this route, the following details may also be useful...
The easiest way to recreate and/or override s2Member's CSS, is to load up your site with s2Member's default CSS file, as it is created dynamically, based on your configuration of s2Member. Then download the whole file by loading up: http://yoursite.com/?ws_plugin__s2member_css=1

Either that, or if you'd like to investigate the core CSS files, you'll find more of them inside:
/wp-content/plugins/s2member-pro/includes/separates/gateways/
Also see: /s2member/includes/s2member.css
Also see: /s2member-pro/includes/s2member-pro.css

Statistics: Posted by Jason Caldwell — October 20th, 2011, 3:49 pm

Re: S2Member Pro CSS

2011-10-20T03:11:22-05:00

Possibly, and also the formatting. I want the fields of Paypal Pro Free Registration form to be on the side of the labels, embolden the labels, change some labels etc. At the moment, the form looks like this. Attached.form.jpg

Statistics: Posted by afeefmirza — October 20th, 2011, 3:11 am

Re: S2Member Pro CSS

2011-10-19T21:14:47-05:00

With change it do you mean change the order in which the fields are shown?

Statistics: Posted by Eduan — October 19th, 2011, 9:14 pm

Re: S2Member Pro CSS

2011-10-19T18:37:03-05:00

Hi, I can't seem to change the layout of my paypal pro form. Can somebody give me a detailed step by step procedure to change it?

Thank you!

Statistics: Posted by afeefmirza — October 19th, 2011, 6:37 pm

Re: S2Member Pro CSS

2011-08-20T15:32:06-05:00

Thanks for the answers. This is what I was after:

/wp-content/plugins/s2member-pro/includes/separates/gateways/

I hadn't found that. Glad other gateway integration is possible. Hoping it will work for our situation.

Statistics: Posted by seofeed — August 20th, 2011, 3:32 pm

Re: S2Member Pro CSS

2011-08-20T15:18:41-05:00

I've had the Pro Plugin for a few weeks now and all I can say is wow. Without a doubt, hands down, the best membership plugin on WordPress and it's not even close.

Thanks for the KUDOS. Much appreciated!

1. Can we add our own payment gateways like RegNow or others? Haven't looked at the yet but wondering.

Yes, I won't say it's an easy task, but we have left room for other gateways to be integrated with s2Member through s2Member's core PayPal IPN processor and the use of a Proxy Key. Please check your Dashboard under this section:
3rd-party-integrations.png

2. Where is the rest of the s2member-pro-paypal-form CSS code? I found a little bit in /s2member-pro/s2member-pro.css but that's not all of it. There's a bunch more called when the actual form runs and I can't find it to save my life. I've searched through all sorts of files. Where's it hiding so I can design fully and then override in custom.css? I've already overridden some of it.

The easiest way to recreate and/or override s2Member's CSS, is to load up your site with s2Member's default CSS file, as it is created dynamically, based on your configuration of s2Member. Then download the whole file by loading up: http://yoursite.com/?ws_plugin__s2member_css=1

Either that, or if you'd like to investigate the core CSS files, you'll find more of them inside:
/wp-content/plugins/s2member-pro/includes/separates/gateways/
Also see: /s2member/includes/s2member.css
Also see: /s2member-pro/includes/s2member-pro.css

Statistics: Posted by Jason Caldwell — August 20th, 2011, 3:18 pm

S2Member Pro CSS

2011-08-19T14:37:43-05:00

I've had the Pro Plugin for a few weeks now and all I can say is wow. Without a doubt, hands down, the best membership plugin on WordPress and it's not even close.

Couple of questions:

1. Can we add our own payment gateways like RegNow or others? Haven't looked at the yet but wondering.

2. Where is the rest of the s2member-pro-paypal-form CSS code? I found a little bit in /s2member-pro/s2member-pro.css but that's not all of it. There's a bunch more called when the actual form runs and I can't find it to save my life. I've searched through all sorts of files. Where's it hiding so I can design fully and then override in custom.css? I've already overridden some of it.

Thanks!

Statistics: Posted by seofeed — August 19th, 2011, 2:37 pm