Community Support Forums

I am working with the Custom Registration Fields. I have created a multi-option checkboxes field. I want to fix up the CSS as it is not aligned correctly by default. I have checked it with default WP theme and checkboxes are not aligned correctly there either. So...

I want to have two classes - "input" and "label" each with its own CSS styling. In the CSS Styles area of the Edit Registration Filed dialog (It has the following: Example: my-style-1 my-style-2), it is not clear how I determine which CSS is assigned to "input" and which is assigned to "label".

My question is how do I create CSS for each of my custom classes?

Follow-up questions:
- which CSS file is this information stored?
- where is the registration form stored?

Thanks in advance!

Toni

We need the very same question answered.
Has anybody found the solution to this problem?

You can use the ID for the input as a selector to style it from the theme's CSS file. For the label, if it doesn't have an ID, you can use the sibling selector. http://css-tricks.com/5514-child-and-sibling-selectors/

You can post a link to the form so I take a look and suggest something.

Hi Christián,

I have a multi-option Checkbox custom registration field (which contains 36 checkboxes). I would like to arrange the checkboxes into three columns. I don't imagine that it would be very easy to list these top to bottom, left to right. So I am hoping to set the width of the label to a static value which would force the checkboxes/labels to line up under each other as they wrap across the screen (if you know what I mean).

I have been looking at this issue, however I can't override the styles in question because of the style attribute within the label tags:

Code: Select all

<input id="ws-plugin--s2member-custom-reg-field-skillset-0" class="ws-plugin--s2member-custom-reg-field skillset" type="checkbox" tabindex="76" aria-required="true" name="ws_plugin__s2member_custom_reg_field_skillset[]" value="Coding">
<label class="ws-plugin--s2member-custom-reg-field-op-l" style="display:inline !important; margin:0 !important;" for="ws-plugin--s2member-custom-reg-field-skillset-0">Coding</label>

I have tried overriding this in many different ways, but I have not had any luck. FYI: At the moment, I am using a plugin called "Custom Login" to insert CSS on the login page.

Do you have any suggestions as to how I could override (or completely remove) the inbuilt style attribute created by S2Member?

Thank you.

Denis

I see... Have you tried if this does what you need?

FAQs wrote: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");
    }
?>

Hi Christian,

Thanks for your reply - apologies, I should've mentioned that I was not using the Pro version as I was still evaluating the plugin. However I am very happy with it, so I just purchased a license for the Pro version.

I have setup the s2-hacks.php as per the FAQ & your post. However, the styles are still present in the label tag. You can see the issue here (see any of the checkboxes towards the bottom of the page):
http://etpi.ie/wp-login.php?action=register

Any further suggestions?

Thank you.

Thank you for your support! I'm glad you're happy with s2Member.

I can see your problem. I'll ask Jason what could be done about that. Thanks for your patience.

Thanks Cristián. Looking forward to finding a resolution to this.

Thanks for the heads up on this thread.

By default, all of those checkboxes are displayed inline with their labels. With that many checkboxes, you might want to consider using a multi-option select menu instead; or, perhaps using some custom CSS and/or JavaScript to manipulate the display of those checkboxes. Perhaps something like this.

Create this directory and file:
/wp-content/mu-plugins/s2-hacks.php

Code: Select all

<?php
add_action ("login_head", "my_custom_css");
function my_custom_css ()
    {
        echo '<style type="text/css">';
        echo 'label.ws-plugin--s2member-custom-reg-field-op-l:after { content:""; display:block; clear:both; }';
        echo '</style>';
    }
?>

Jason,

Thank you very much for this - it is very useful. I am limited to checkboxes I'm afriad (requirement), but I was able to align them in using the code below (assigning a static label width and setting the display to inline-block).

Code: Select all

<?php
add_action ("login_head", "my_custom_css");
function my_custom_css ()
{
        echo '<style type="text/css">';
        echo 'label.ws-plugin--s2member-custom-reg-field-op-l:after { content:""; display:inline-block; clear:both; font-size:14px !important; color:#000000; width:140px;}';
        echo '</style>';
}   
?>


Thank you again, your help is very much appreciated.

Regards,
Denis

Great!