Formatting Issue w/ Private Messaging

Hi There,

I am having a problem with Private Messaging where it is not displaying properly. I have tested on my dev environment and the issue is still present, with all plugins deactivated except WPMU. I will attach a screenshot of the problem I'm having.

Also. Registrations on our website are closed. The only way to gain access to our website is either by signing in with a social media login or by making a purchase.

The private messaging screen that I have set up, shows a logged-out user an option to resister for site access. Can we remove this function? I do not wish for logged-out customers to be presented with an option to register on the website. I would only like a login screen to be displayed on this page.

Thanks!

  • Rupok

    Hi Nick

    Hope you had a wonderful day.

    I am having a problem with Private Messaging where it is not displaying properly

    Thanks for sending the screenshot. But I'm not exactly sure where the design is breaking. Could you please try with annotations? That will help us understand your issue faster and we can also resolve it faster. Moreover, can you please provide a link where we can see it live?

    The private messaging screen that I have set up, shows a logged-out user an option to resister for site access. Can we remove this function?

    Yes, we can remove this function but first I need to see this live and I'm waiting for the link where I can see this live.

    Have a nice day. Cheers!
    Rupok

  • Ivan Shulev

    Hey Nick,

    I hope you are having a good day.

    Your menu was positioned on top of the message form and placed it behind.

    Also, the CSS below will hide the sign up part for guest visitors.

    If you do not have a custom CSS section in your theme, I would recommend installing a plugin like https://wordpress.org/plugins/simple-custom-css/ and paste the following:

    .mm_sign_up {
        display: none;
    }
    div#top-header {
        z-index: 99;
    }
    header#main-header {
        z-index: 100;
    }

    I hope this helps and I wish you an awesome day ahead!

    Ivan

  • Nick

    Hi Ivan,

    Excellent! Thank you! I've added that to my Custom CSS box and all is well. One tweak though. Is there any way that I can center the Messaging screen in the middle of the div box?

    Here is a screenshot of what it looks like now. I'd like it to be centered in the middle of the screen.

    I just realized there is an email address listed there in the image. Can you please remove this screenshot after you see it? Thanks

  • Nick

    Ok, we're close. So when logged in the compose message button is having some formatting issues now. The H1 tag "PRIVATE MESSAGING SYSTEM" is centered. I'd like the H1 title to be left justified, just as the message tool bar is.

    I only wanted the login form to be centered in the middle of the page, when viewed as logged out.

    See Attachment.

    The H1 tag "PRIVATE MESSAGING SYSTEM" is centered. I'd like the H1 title to be left justified, just as the message tool bar is. I only want the login form to be centered in the middle of the page, as viewed when logged out.

    See Attachment.

    I will leave the code in there that you gave me. Please just let me know what I need to remove or replace in your reply.

  • Rupok

    Hi Nick

    Hope you had a wonderful day.

    The H1 tag "PRIVATE MESSAGING SYSTEM" is centered. I'd like the H1 title to be left justified, just as the message tool bar is.

    You can achieve this with the following custom CSS Code:

    .et_pb_text.et_pb_module.et_pb_bg_layout_light.et_pb_text_align_left.et_pb_text_0 h1 {
      margin-left: 45px;
      text-align: left;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Can you please check and confirm if this works?

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Nick

    Oops! This is not what I'm seeing on my browser. Please check the attached screenshot for reference.

    Please replace the previous custom CSS Code with the following:

    .et_pb_text.et_pb_module.et_pb_bg_layout_light.et_pb_text_align_left.et_pb_text_0 h1 {
      margin-left: -18px;
      text-align: left;
    }

    To make the toolbar left justified, can you please try the following custom CSS Code?

    .mmessage-container .col-md-10.co-sm-12.col-xs-12.no-padding.mm-toolbar-btn {
      float: left;
    }

    Please let us know if you have any further inquiry. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Nick

    I do apologize I missed your query regarding "Compose" button. I can't see the button as I'm not logged in. I could give you exact custom CSS Code to reposition the button if I could inspect the element on your site. Would you mind allowing Support Access so we can have a closer look at this?

    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Have a nice day. Cheers!
    Rupok

  • Nick

    I have a whole slew of CSS now for this Private Messaging Plugin. Please be sure to review the other H1 on other pages. As I don't want the other pages formatting to change.

    /* "BEGIN" Private Messaging Plugin WPMU DEV Positioning Fix & Removal of Registration Screen */
    .mm_sign_up {
    display: none;
    }
    div#top-header {
    z-index: 99;
    }
    header#main-header {
    z-index: 100;
    }
    .mmessage-container .mm-toolbar-btn {
    margin: 0 auto;
    display: block;
    width: 420px;
    float: none;
    }

    .page-id-10366 h1 {text-align: center;}

    .mmessage-container .col-md-6.no-padding {
    margin: 0 auto;
    float: none;
    }
    /* "END" Private Messaging Plugin WPMU DEV Positioning Fix & Removal of Registration Screen */

  • Rupok

    Hi Nick

    I went to your site with Firefox but some CSS are not loading. They are loading in Chrome just fine. After investigating deeper, I found this script https://cdn.domain.com/wp-content/plugins/private-messaging/assets/jquery.leanModal.min.js - is not loading on Firefox. Please check the attached screenshot for reference.

    Can you please check and confirm? I'll check your CSS list in optimum state so we can confirm perfect solution.

    Have a nice day. Cheers!

  • Kasia Swiderska

    Hello Nick,

    Please try this code for the toolbar:

    .mmessage-container .mm-toolbar-btn {    float: right;
        margin-right: 49px;}
    .mmessage-container .mm-toolbar-btn + .col-md-2 hidden-xs.hidden-sm.no-padding.text-right {
        float: left;
        margin-top: -30px;
        margin-right: 231px;
        width: 71px;
    }

    With it toolbar should like this:

    styles will be applied only for toolbar.

    I was checking your site regarding problem with scripts in Firefox (first I disabled minification in Hummingbird). On Firefox all of JS scripts are not loaded due to

    An error occurred during a connection to cdn.domain.com. Peer's Certificate has been revoked. Error code: SEC_ERROR_REVOKED_CERTIFICATE

    Scripts are loaded from CDN. It looks like there is problem with SSL certificate - please contact your SSL provider regarding this issue - they should be able to fix it.

    kind regards,
    Kasia

  • Nick

    I contacted my host. They had accidentally installed the wrong certificate on the CDN. Thank you for pointing that out. It has since been corrected and should be okay now.

    As far as the CSS code you sent me. Can you please revise what I am attaching below to include that new code you just sent me? Also, I need the H1 test to be left justified. Not centered. I also need you to test the code to ensure that other H1 tags within the website have not been moved to the right. Which is what has been happening with all of this code.

    Thanks for your help... Cutting and pasting what I currently have in the CSS Options below. Please revise with code you're sending me and left justify H1 text.

    /* "BEGIN" Private Messaging Plugin WPMU DEV Positioning Fix & Removal of Registration Screen */
    .mm_sign_up {
    display: none;
    }
    div#top-header {
    z-index: 99;
    }
    header#main-header {
    z-index: 100;
    }
    .mmessage-container .mm-toolbar-btn {
    margin: 0 auto;
    display: block;
    width: 420px;
    float: none;
    }

    .page-id-10366 h1 {text-align: center;}

    .mmessage-container .col-md-6.no-padding {
    margin: 0 auto;
    float: none;
    }

    /* "END" Private Messaging Plugin WPMU DEV Positioning Fix & Removal of Registration Screen */

  • Rupok

    Hi Nick

    Hope you had a wonderful day.

    Please revise with code you're sending me and left justify H1 text

    I need to install a plugin temporarily on your site to revise and confirm CSS Codes for your issues. Is it ok if I install "Simple Custom CSS" on your site, test and add CSS if required, check on all pages, and then confirm?

    If you don't want redundant plugins, I can uninstall it after checking. Can you please confirm?

    Have a nice day. Cheers!

  • Ivan Shulev

    Hey Nick,

    I hope you are having a nice day so far!

    First of all, the submit blue button is added after the other action buttons and it will take a bit more to achieve exactly what you want. The current version, after adding the following code will look like so:

    I decided to not stick it to the other buttons since it is a different action and it makes sense to be different from a user experience perspective. If you want to change that, we will.

    Regarding the h1 element, I will ask you to add a class to the production element (I already added it on staging) like so:

    Edit the private messaging page and open the module settings for the element that holds the h1:

    And then add the custom-align-left class in the Class input of the Custom CSS section:

    Here is the CSS from staging, which you should paste in production:

    /* "BEGIN" Private Messaging Plugin WPMU DEV Positioning Fix & Removal of Registration Screen */
    .mm_sign_up {
    	display: none;
    }
    div#top-header {
    	z-index: 99;
    }
    header#main-header {
    	z-index: 100;
    }
    .mmessage-container .mm-toolbar-btn {
    	margin: 0 auto;
    	display: block;
    	width: 420px;
    	float: none;
    }
    .page-id-10366 h1 {
    	text-align: center;
    }
    
    .mmessage-container .col-md-6.no-padding {
    	margin: 0 auto;
    	float: none;
    }
    .mmessage-container .mm-toolbar-btn {
    	float: left;
    	margin-right: 0;
    }
    .mmessage-container .mm-compose {
    	float: left;
    }
    .mmessage-container .mm-toolbar-btn + .col-md-2 hidden-xs.hidden-sm.no-padding.text-right {
    	float: left;
    	margin-top: -30px;
    	margin-right: 231px;
    	width: 71px;
    }
    .custom-align-left h1 {
    	text-align: left;
    	margin-left: -15px;
    }
    /* "END" Private Messaging Plugin WPMU DEV Positioning Fix & Removal of Registration Screen */

    I believe the centering of the login form has been resolved by my colleagues and excuse me if I missed any other remaining issues.

    I hope this is helpful and I wish you an awesome day ahead!

    Ivan