PriMoThemes — now s2Member® (official notice)

This is now a very OLD forum system. It's in READ-ONLY mode.
All community interaction now occurs at WP Sharks™. See: new forums @ WP Sharks™

S2Member Pro CSS

s2Member Plugin. A Membership plugin for WordPress®.

S2Member Pro CSS

Postby seofeed » August 19th, 2011, 2:37 pm

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!
User avatar
seofeed
Registered User
Registered User
 
Posts: 51
Joined: August 10, 2011

Re: S2Member Pro CSS

Postby Jason Caldwell » August 20th, 2011, 3:18 pm

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
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA

Re: S2Member Pro CSS

Postby seofeed » August 20th, 2011, 3:32 pm

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.
User avatar
seofeed
Registered User
Registered User
 
Posts: 51
Joined: August 10, 2011

Re: S2Member Pro CSS

Postby afeefmirza » October 19th, 2011, 6:37 pm

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!
User avatar
afeefmirza
Registered User
Registered User
 
Posts: 10
Joined: October 14, 2011

Re: S2Member Pro CSS

Postby Eduan » October 19th, 2011, 9:14 pm

With change it do you mean change the order in which the fields are shown?
Now officially accepting Professional s2Member installations along with Bruce C (a.k.a. Ace).

If you're interested in a Professional s2Member Installation, or a Custom Coding Job, you can send your request here.
User avatar
Eduan
Experienced User
Experienced User
 
Posts: 1154
Joined: August 27, 2011
Location: Taxco de Alarcón, Guerrero, México.

Re: S2Member Pro CSS

Postby afeefmirza » October 20th, 2011, 3:11 am

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
User avatar
afeefmirza
Registered User
Registered User
 
Posts: 10
Joined: October 14, 2011

Re: S2Member Pro CSS

Postby Jason Caldwell » October 20th, 2011, 3:49 pm

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 <head></head> 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: Select all
<?php
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: Select all
<?php
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
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA

Re: S2Member Pro CSS

Postby Jason Caldwell » October 20th, 2011, 3:51 pm

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
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA

Re: S2Member Pro CSS

Postby Jason Caldwell » October 20th, 2011, 3:52 pm

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.
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA

Re: S2Member Pro CSS

Postby Deyson » November 15th, 2011, 3:57 pm

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.
User avatar
Deyson
Registered User
Registered User
 
Posts: 67
Joined: December 28, 2010

Re: S2Member Pro CSS

Postby Jason Caldwell » November 15th, 2011, 4:31 pm

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
SNAG-0120.png (42.96 KiB) Viewed 6727 times
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA

Re: S2Member Pro CSS

Postby Deyson » November 15th, 2011, 4:50 pm

Thank you! :)
User avatar
Deyson
Registered User
Registered User
 
Posts: 67
Joined: December 28, 2010

Re: S2Member Pro CSS

Postby Deyson » November 15th, 2011, 5:12 pm

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 :)
User avatar
Deyson
Registered User
Registered User
 
Posts: 67
Joined: December 28, 2010

Re: S2Member Pro CSS

Postby Jason Caldwell » November 15th, 2011, 6:10 pm

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: Select all
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
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA

Re: S2Member Pro CSS

Postby Deyson » November 15th, 2011, 9:28 pm

Thank you, the !important worked :)
User avatar
Deyson
Registered User
Registered User
 
Posts: 67
Joined: December 28, 2010

Re: S2Member Pro CSS

Postby Raam Dev » November 17th, 2011, 7:17 pm

When my Pro Forms showed up entirely without styles, I located the link my <head> 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
Raam Dev || Wherever you are, be there. || Please rate s2Member!
User avatar
Raam Dev
Developer
Developer
 
Posts: 810
Joined: October 26, 2011

Re: S2Member Pro CSS

Postby Jason Caldwell » November 20th, 2011, 4:40 pm

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?
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA

Re: S2Member Pro CSS

Postby Raam Dev » November 20th, 2011, 4:59 pm

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.)
Raam Dev || Wherever you are, be there. || Please rate s2Member!
User avatar
Raam Dev
Developer
Developer
 
Posts: 810
Joined: October 26, 2011

Re: S2Member Pro CSS

Postby Jason Caldwell » November 20th, 2011, 7:31 pm

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?
~ Jason Caldwell / Lead Developer
& Zeitgeist Movie Advocate: http://www.zeitgeistmovie.com/

Is the s2Member plugin working for you? Please rate s2Member at WordPress.org.
You'll need a WordPress.org account ( comes in handy ). Then rate s2Member here Image
.
User avatar
Jason Caldwell
Lead Developer
Lead Developer
 
Posts: 4045
Joined: May 3, 2010
Location: Georgia / USA


Return to s2Member Plugin

Who is online

Users browsing this forum: No registered users and 1 guest

cron