Unique DIVs for membership plugin and associating CSS

Hi,

How can I get the membership plugin registration form to use the registration div used in buddypress registration? I have a theme which I like the look of the buddypress registration, but the membership plugin registration page looks like a dogs breakfast. I thought I could add custom CSS to fix this, but the registration form does not make use of unique DIVs.

My theme has the following DIV tags within the CSS file and it makes it easier if I can just re-use existing CSS div tags if at all possible. How can I do this?

body.registration .site {

}
div#register-page p {

}

  • PC

    Hey there Graeme,

    Greetings and thanks for posting on the forums.

    Membership has its own CSS for the registration forms (standard or Pop Up)

    If you want to force it to use your own div's and CSS, you can modify the CSS accordingly.

    The files are located here : \membership\membershipincludes\css

    I hope that helps you get started :slight_smile:

    Please feel free to ask if you have more questions on the same and we would be around to assist.

    Cheers, PC

  • Graeme

    Hi PC,
    Thanks for the response. I have version 3.4.6.1 installed and in the directory you've listed there is CSS for popup registration form, but I cannot see the CSS file for original application form.

    I tried the popup registration form and it looks suitable, but it doesn't load the additional profile fields required which I have created using buddypress Xprofile fields.

    Do you have any suggestions?

    Cheers,
    Graeme

  • Graeme

    So, after waiting for a reasonable response from the team at Incsub, I'm sort of wondering why I paid for membership to WPMU.

    Before signing up I read sales pitches like "unlimited support" , "Hundreds of amazing WordPress plugins you'll love, with support that'll blow your mind" and "Average under-an-hour responses". All comments which make you feel warm and fuzzy and think, "Perhaps this company knows what they are doing". However, after signing up, I'm yet to have my mind blown with the level/quality of support and with regards to the response rate - I feel as though I may as well be waiting for Godot.

    Incsub should keep in mind that as an Australian based company they are subject to Australian Consumer Laws including the Competition and Consumer Act (2010); which cannot be contractually side-stepped. As such, they need to be careful of the representations they make about their product offerings - irrespective of the liberal use of GPL licensing within their products.

  • DavidM

    Hi @Graeme,

    Sorry for the delay here. As you've noticed the popup registration form doesn't currently include BP profile fields so it would be best to try and get the standard registration form more suited to your theme.

    On that note, the plugin does provide a main div with a class of membership-wrapper. I wonder if we might be able to use that here.

    Would it be possible for you to share a link to the site?

    If not, that's fine, just wanted to see if we could make that easier. But if not, could you let us know what sort of div configuration you need?

    Is it just the tag ids and classes you mentioned in your original post?

    @PC, hope you don't mind my chiming in, just wanted to see if I can help out here. :slight_smile:

    Thanks,
    David

  • Graeme

    Hi David,

    Thanks a heap for looking at this issue I'm having. Unfortunately at the moment I am unable to share a link as I am developing on a local server. I am using the Buddyboss Theme which uses the DIV tags I mentioned above for the buddypress registration. (which is bypassed by the membership plugin) If I hack the membership plugin adding in the DIV tags I get a reasonable looking layout based on the buddyboss CSS, but this isn't maintainable long term and prefer not to do it.

    If I disable the Buddyboss theme and use the TwentyTwelve theme I get similar layout issues as there is no CSS associated with the DIV tags used by the membership plugin. So I'd like to fix this as the long term solution.

    I've attached a screenshot of the DIV tags which are available along with the layout I am seeing. I'm not a CSS expert, so any assistance in getting this to look reasonable would make me a happy camper.

    Thanks.

  • PC

    Hey there Graeme,

    I have just tested this on my lab site with 2013 theme and Membership plugin and it does not appear fine out of the box and it certainly needs some CSS love in order to provide a better control.

    While I do not have a copy of BuddyBoss theme, if you could send that to me, I can test on that theme as well and suggest how we can make it look better on that theme. You can send it to contact[at]wpmudev[dot]org to my attention and a link to this thread should be included.

    In the meantime, I have sent a note to our developer @Eugene Manuilov as well so that is also aware about this issue.

    Cheers, PC

  • Graeme

    Hi PC,

    I'm not going to send you the theme files I have as they are the intellectual property of a third party. As even mentioned by yourself, the issue actually lies within the plugin and not the specific theme I am using.

    However, for your reference, the theme uses the DIV tags shown below within the supplied CSS - which I suspect are standard buddypress DIV tags. (I'm not exactly familiar with buddypress and have not confirmed this is the case)

    body.registration .site {
    
    }
    div#register-page p {
    
    }
    div#register-page .register-section p,
    div#register-page .security-question-section p {
    
    }
    div#register-page .register-section h4,
    div#register-page .security-question-section h4 {
    
    }
    div#register-page .register-section,
    div#register-page .security-question-section {
    
    }
    div#register-page #signup_form.standard-form div.submit {
    
    }
    div#register-page #signup_form.standard-form div.submit input {
    
    	}

    Perhaps @Eugene Manuilov can modify the rendering of the registration page to make use of these DIV tags so that all themes supporting buddypress can take advantage of it. (Which sort of makes sense considering WPMU Membership plugin supports buddypress)

    Oh, I forgot to mention - I'm sort of keen to have this issue resolved so I can launch my website.

  • Eugene Manuilov

    Hi @Graeme

    Could you please try to install a beta version from attach? I have added standard BuddyPress wrapper which contains #buddypress > #register-page.page divs to the registration form. So now I suppose it has to be better compatible.

    Let me know how it looks like on your end. If it still looks odd, give me a link on a page where I can investigate it.

    P.S.: don't forget to delete previous version from your site (you won't lose your settings or members).

    Regards,
    Eugene

  • Graeme

    Hi @PC and @Eugene Manuilov,

    I have noticed that the beta version is missing some code within the bp.registration.form.php file.

    At approx line 165 you will need to add the code below to enable the visibility toggle and support for additional field types within buddypress Xprofile. Without this additional code sections of the registration form will not render. I was a little hasty with accepting the beta version. Will this code be added to the future stable release?

    <?php do_action( 'bp_custom_profile_edit_fields_pre_visibility' ); ?>
    
       <?php if ( bp_current_user_can( 'bp_xprofile_change_field_visibility' ) ) : ?>
           <p class="field-visibility-settings-toggle" id="field-visibility-settings-toggle-<?php bp_the_profile_field_id() ?>">
    	 <?php printf( __( 'This field can be seen by: <span class="current-visibility-level">%s</span>', 'buddypress' ), bp_get_the_profile_field_visibility_level_label() ) ?> <a href="#" class="visibility-toggle-link"><?php _ex( 'Change', 'Change profile field visibility level', 'buddypress' ); ?></a> </p>
    
        <div class="field-visibility-settings" id="field-visibility-settings-<?php bp_the_profile_field_id() ?>">
    	 <fieldset>
    	     <legend><?php _e( 'Who can see this field?', 'buddypress' ) ?></legend>
    
    	   <?php bp_profile_visibility_radio_buttons() ?>
    
    	 </fieldset>
    	<a class="field-visibility-settings-close" href="#"><?php _e( 'Close', 'buddypress' ) ?></a>
    
        </div>
    	<?php else : ?>
             <p class="field-visibility-settings-notoggle" id="field-visibility-settings-toggle-<?php bp_the_profile_field_id() ?>">
    	<?php printf( __( 'This field can be seen by: <span class="current-visibility-level">%s</span>', 'buddypress' ), bp_get_the_profile_field_visibility_level_label() ) ?>
            </p>
    <?php endif ?>

    This code was copied from line 157-178 from the \bp-themes\bp-default\registration\register.php file from within the buddypress plugin.

  • Graeme

    Hi,

    After some additional testing I am going to amend my previous request to this:

    at line 165 of bp.registration.form.php add this only.
    <?php do_action( 'bp_custom_profile_edit_fields_pre_visibility' ); ?>

    The previous request would have been nice, but it relies on the bp_is_register_page function, which returns false within the membership plugin. To modify membership to make use of the additional visibility labels would be more than a 5 minute job to modify the code and may require additional testing which would potentially delay a release.

    The code addition request within this post allows for the rendering of custom field types as used in: "Buddypress Xprofile Custom Fields Type" plugin.

  • Graeme

    Hi @Eugene Manuilov,

    The attached beta version has a similar issue to what I encountered above with my original code change suggestion. The visibility settings for each of the fields is incorrectly shown to be "anyone" and not the correct value. Also, if you change the visibility settings they are not saved.

    I traced this back to being because bp_is_register_page() equates to false within the function call bp_get_the_profile_field_visibility_level_label().

    I'm not familiar enough with the new beta version of membership plugin and what you have planned. To support the xprofile visibility settings would require additional functions to be written to replicate the above functions from buddypress. I lack time to do this at the moment, so reverted my request to being just adding:

    <?php do_action( 'bp_custom_profile_edit_fields_pre_visibility' ); ?>

    at line 165. Which gets past the real issue I was having with lack of support for xprofile custom field types. At the registration process I'm not too fussed if users can see the visibility of fields. If they really want to change them, it is still possible within the buddypress profile EDIT.

  • Eugene Manuilov

    I traced this back to being because bp_is_register_page() equates to false within the function call bp_get_the_profile_field_visibility_level_label().

    Could you please comment two lines 81 and 82 of the following file?

    membership/classes/Membership/Module/Frontend.php

    It will make bp_is_register_page function returning true when the membership registration form is shown.

    Let me know if it fixes the "bp_is_register_page() equates to false" issue.

    Regards,
    Eugene

  • Eugene Manuilov

    Quick question, what was the original purpose for the commented out code?

    The core BuddyPress considers Membership's registration page as a regular page. I have added custom logic which hooks BuddyPress registration page determination. So now BP treats Membership registration page as it's own.

    Is there something else I need to check to ensure still works with it removed?

    No there is nothing else to check.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.