Member Pro 2 - Login widget

Hi.
I am still trying to figure out this awesome member plugin. I have added a sidebar widget, but the default design/layout seems a bit "borring", are there any templates? How can i change the look of the widget. Please see attached files (screendumps) where the first image is of yours plugin widget and the next image is from WP eMembers ...

    Adam Czajczyk

    Hello Hamid,

    I hope you're well today and thank you for your question!

    The widget takes basic styles from the theme plus it "add up" to it from default plugin styles so it worked. The Membership 2 Pro plugin can use templates for some advanced customization and this is explained in plugin on "Membership 2 Pro -> Help -> Customize Membership 2" page.

    In this case though I think some custom CSS would suffice. Can you tell me please a bit more on how would you like that widget to look like (so it would suit your site's design)? Should I follow the screenshot from WP eMembers that you posted or could you please share some rough drawing/mockup of the widget with me?

    Best regards,
    Adam

    Adam Czajczyk

    Hello Hamid!

    Thank you for your replay.

    I think this CSS should help:

    .widget_ms_widget_login .ms-login-form {
    	background-color:#232323;
    	padding:20px 10px;
    	text-align:center;
    	font-weight:bold;
    	color:#FFF;
    }
    .widget_ms_widget_login .ms-login-form .login-submit input {
      background: #CB1E2F;
      background-image: -webkit-linear-gradient(top, #CB1E2F, #960E17);
      background-image: -moz-linear-gradient(top, #CB1E2F, #960E17);
      background-image: -ms-linear-gradient(top, #CB1E2F, #960E17);
      background-image: -o-linear-gradient(top, #CB1E2F, #960E17);
      background-image: linear-gradient(to bottom, #CB1E2F, #960E17);
      -webkit-border-radius: 3;
      -moz-border-radius: 3;
      border-radius: 3px;
    	border:none;
      font-family: Arial;
      color: #ffffff;
      font-size: 19px;
      padding: 10px 20px 10px 20px;
      text-decoration: none;
    	font-weight:bold;
    }
    .widget_ms_widget_login .ms-login-form .login-submit input:hover {
    	color:#FFAEA1;
    }
    .widget_ms_widget_login .ms-membership-form-wrapper a:last-of-type {
    	display:block;
    	width:100%;
    	background-color:#232323;
    	padding-bottom:10px;
    	font-weight:bold;
    	text-align:center;
    }

    You can add it to your site in one of the following ways:

    - add it to the "style.css" file of the child-theme of your current theme (if you are already using a child-theme)

    - add it to the "Custom CSS" option of Theme Options (if such an option is available)

    - add to the "Custom CSS" fields in "Appearance -> Customize" (if such option is available)

    - or use a Simple Custom CSS plugin that you will find here:

    https://wordpress.org/plugins/simple-custom-css/

    I hope that helps

    Best regards,
    Adam

    Predrag Dubajic

    Hi Hamid,

    Apologies for the delay here, please don't bump the threads as we answer them from oldest to newest so bumping the thread will actually push it down the queue.

    I noticed that everytime visiting my site then the view fokus is set on the login widget rather than the top.

    Login form has autofocus enabled by default, to disable it just add below code to widget "Shortcode Options" field:
    autofocus="no"
    Like this:

    After a user is logged in, the default small window is very limited.
    How can i add more infomation here.

    Membership login widget doesn't have an option to add more info in there.
    What you can do is add text widget above/below it and add this shortcode inside it:
    [ms-membership-account]
    If your widgets don't allow use of shortcode you can enable that by following instructions from here:
    http://www.wpbeginner.com/wp-tutorials/how-to-use-shortcodes-in-your-wordpress-sidebar-widgets/

    Can this logged in widget even has its own colors different from when logging in?

    When you login to site there will be new class added to body tag (logged-in) so you can use that class to change colors for logged in users.
    Here's an example on Adam's code above:

    .logged-in .widget_ms_widget_login .ms-membership-form-wrapper a:last-of-type {
    	display:block;
    	width:100%;
    	background-color:#232323;
    	padding-bottom:10px;
    	font-weight:bold;
    	text-align:center;
    }

    Please note, if you have multiple questions that are not closely related it would be best starting new threads for them, this helps us to keep better track of everything, followup more easily and provide you with faster responses.

    Best regards,
    Predrag

    Hamid

    Hi Predrag

    Thank you for awesome support. This is really great service.

    - Login form with autofocus, did the trick. Thank you

    - Regarding adding the [ms-membership-account] in a text widget. The widget works but please first attached screenshot. The invoice details are going out of the widget window. Also there are way to much info here. Preferely I would like just to have the personal details only. Can this be achieved?

    -Regarding last issue, I inserted your code in my themes custom CSS, but please see attached screeshot, no change to the logged in widget. The color i wanted to use for background is #232323

    Thank you much for supporting me

    Best regards Hamid


    Adam Czajczyk

    Hi Hamid!

    Regarding adding the [ms-membership-account] in a text widget. The widget works but please first attached screenshot. The invoice details are going out of the widget window. Also there are way to much info here. Preferely I would like just to have the personal details only. Can this be achieved?

    You can hide everything except personal details using this CSS:

    .ms-account-wrapper #account-activity, #account-invoices {display:none;}

    Regarding last issue, I inserted your code in my themes custom CSS, but please see attached screeshot, no change to the logged in widget. The color i wanted to use for background is #232323

    The color used for background is actually #232323. Is it that you want to use it on a "bigger area" of the widget (if so, can you post an example image - a rough sketch/mockup)? If I'm missing anything, please explain and I'm sure we'll find a way to make it happen

    Best regards,
    Adam

    Adam Czajczyk

    Hello Hamid!

    You may insert the code at the bottom of custom CSS, just like you did, and it should work there. This CSS shouldn't however affect top header or other parts of the site in anyway as it's targeted in specific parts of the widget on site. Furthermore, removing the code should undo any changes that it's causing.

    If changes are still there even after removing the code I would suspect some caching. Is there any caching plugin installed on your site or a cache on server? If yes, try clearing them entirely and see if that fixed those "messed up" parts.

    Let me know please!

    Best regards,
    Adam

    Hamid

    Allright.... You were spot on, it was caching issue...

    See attached image, I am still not able to change the color of the "logged in widget". When logged in I want this color #d1caca

    What or which line exactly do i change here:

    .widget_ms_widget_login .ms-login-form {
    	background-color:#232323;
    	padding:20px 10px;
    	text-align:center;
    	font-weight:bold;
    	color:#FFF;
    }
    .widget_ms_widget_login .ms-login-form .login-submit input {
      background: #CB1E2F;
      background-image: -webkit-linear-gradient(top, #CB1E2F, #960E17);
      background-image: -moz-linear-gradient(top, #CB1E2F, #960E17);
      background-image: -ms-linear-gradient(top, #CB1E2F, #960E17);
      background-image: -o-linear-gradient(top, #CB1E2F, #960E17);
      background-image: linear-gradient(to bottom, #CB1E2F, #960E17);
      -webkit-border-radius: 3;
      -moz-border-radius: 3;
      border-radius: 3px;
    	border:none;
      font-family: Arial;
      color: #ffffff;
      font-size: 19px;
      padding: 10px 20px 10px 20px;
      text-decoration: none;
    	font-weight:bold;
    }
    .widget_ms_widget_login .ms-login-form .login-submit input:hover {
    	color:#FFAEA1;
    }
    .widget_ms_widget_login .ms-membership-form-wrapper a:last-of-type {
    	display:block;
    	width:100%;
    	background-color:#232323;
    	padding-bottom:10px;
    	font-weight:bold;
    	text-align:center;
    }

    I

    Adam Czajczyk

    Hello Hamid!

    I'm glad the "mess up" issue has been solved

    As for account widget background. So far we were addressing the login form which is a separate widget so you'd want to add a new rule to your existing CSS:

    .textwidget .ms-account-wrapper {
    background:#d1caca;
    padding:10px;
    }

    You may also add settings for text colors inside that rule if you wish to. Give it a try please and I think it should help here

    Best regards,
    Adam