Facebook login button, and membership 2 pro

1. I have added facebook authentication. But the size of the fB login button is very small. How can I increase it? I have added a picture [Picture 1] to demonstrate.

2. How do I setup the Membership 2 Pro plugin to configure working with just Facebook as discussed? So, I don't want the user to register using an email, and only want to give him access using the facebook login. Is there a way to integrate facebook login with membership, so that I can use all the features of membership 2 pro without having to let the user sign up using just email?

    Milan

    Hello Impronto ,

    Hope you are well today and thanks for asking us.

    Let's take down your questions one by one.

    1. I have added facebook authentication. But the size of the fB login button is very small. How can I increase it? I have added a picture [Picture 1] to demonstrate.

    You could use this snippet to make it bit larger.

    div._4z_b[role="button"]{
        padding: 5px;
        width: 152px;
    }

    2. How do I setup the Membership 2 Pro plugin to configure working with just Facebook as discussed? So, I don't want the user to register using an email, and only want to give him access using the facebook login. Is there a way to integrate facebook login with membership, so that I can use all the features of membership 2 pro without having to let the user sign up using just email?

    No, this is not possible. Ultimate Facebook and Membership 2 Pro are not integrated in any way. You could offer registration with Facebook by enabling Allow user to register option of plugin. Take a look at attached screenshot.

    Otherwise this would require custom coding to be done. So You may want to hire developer for this or use our Job Portal if you wish.

    Hope this helps you.
    Best Regards,
    Milan

    Adam Czajczyk

    Hello Impronto!

    could you please explain where I need to drop this snippet (for increasing the size)?

    First, check your current theme's settings for a "Custom CSS" field and if there's such an option put the code there. If there's no such option, please install this pluing:

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

    You'll then be able to add the code to the "Appearance -> Custom CSS" custom CSS box.

    I hope that helps!

    Best regards,
    Adam

    Impronto

    Hi Milan
    I am referring to my first question from my first post above.
    The size of the fB login button is very small. How can I increase it?

    I tried inserting your snippet to the CSS file but nothing changed. So, I am putting all the code from the CSS file here, in case that helps you find a solution. Please let me know!

    .widget .widgettitle {
    color: #c09533;
    font-size: 24px;
    line-height: 1.25em;
    margin: 0 0 15px;
    }
    .widget .widgettitle:after {
    content: none;
    }
    .widget ul, .widget ol {
    margin: 0 0 15px 20px;
    }
    .widget_search .search-form {
    display: table;
    }
    .widget_search .search-form > label {
    display: table-cell;
    }
    .widget_search .upfront-search-submit_group {
    display: table-cell;
    width: 1%;
    }
    .widget_search .search-form input {
    display: inline-block;
    }
    .widget_search .search-field {
    box-sizing: border-box;
    font-size: 15px;
    line-height: 40px;
    padding: 0 15px;
    width: 100%;
    font-family: "Lato", Arial, sans-serif;
    font-size: 15px;
    font-weight: 300;
    border-radius: 4px 0 0 4px;
    }
    .widget_search .search-submit {
    background-color: #ufc0;
    border-bottom: 1px solid #ufc5;
    color: #ufc2;
    font-family: "Lato", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 2em;
    padding: 0 15px;
    border-radius: 0 4px 4px 0;
    text-transform: uppercase;
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
    height:40px;
    line-height: 40px;
    }
    .widget_search .search-submit:hover {
    background-color: #ufc5;
    }
    .widget_calendar table {
    width: 100%;
    }
    .widget_calendar table tr td {
    font-family: Lato;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    line-height: 28px;
    padding: 2px auto;
    }
    .widget_calendar caption {
    padding: 5px;
    }
    .widget_calendar thead {
    border-bottom: 2px solid #ufc0;
    }
    .widget_calendar thead th {
    padding: 5px 0;
    }
    .widget_calendar thead, .widget_calendar caption {
    background-color: rgba(42,42,42,0.99);
    color: #ufc2;
    }
    .widget_calendar a {
    color: #ufc1;
    display: block;
    transition: .2s ease;
    }
    .widget_calendar a:hover, .widget_calendar a:focus {
    }
    .widget_calendar #prev a, .widget_calendar #next a {
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    display: block;
    border-radius: 4px;
    line-height: 30px;
    text-transform: uppercase;
    background-color: #ufc0;
    border-bottom: 2px solid #ufc5;
    transition: all .2s ease-in-out;
    color: #ufc2;
    margin-top: 8px;
    }
    .widget_calendar #prev a:hover, .widget_calendar #next a:hover {
    background-color: #ufc5;
    }

    div._4z_b[role="button"] {
    padding: 5px;
    width: 152px;
    }

    Adam Czajczyk

    Hello Impronto!

    The "Login with Facebook" button comes from some plugin that you are using and is created using Facebook API. It is loaded to the site using an "iframe" element which is essentially a kind of "browser in browser". Such an element cannot be affected directly by any CSS style of your site.

    In theory that could be achieved using some JavaScript but would only be possible to do if the source of an "iframe" element (so the "page that's loaded into your page") would come from the same domain. Otherwise all browsers will block any attempts to change it using JavaScript in order to prevent "hijacking attack".

    The only way to change the button parameters would be to adjust Facebook API call (though I'm not that familiar with FB API to know if there is such an option) but that would require changes in plugin code.

    Kind regards,
    Adam

    Milan

    Hello Impronto

    Hope you are well today.

    Seems like my colleague Adam missed that you are using our plugin. But what he said about iFrame is very true as by its nature its kind of browser inside browser.

    I've already flagged our plugin developer for this to find out possible workaround. Once there would be any update for this, you'll get notified. We appreciate your cooperation here.

    Best Regards,
    Milan