How do I create CSS for each Custom Class in Editing Reg?

[retrieverbeliever]

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

[cexpert]

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

[Cristián Lávaque]

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.

[banta]

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

[Cristián Lávaque]

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

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

[banta]

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.

[Cristián Lávaque]

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.

[banta]

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

[Jason Caldwell]

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>';
    }
?>

[banta]

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

[Cristián Lávaque]

Great!