Best plugins to customize the Wordpress Login and/or a modal login box on front page

Hi all.

We would like to have a completely different look for the backend login - the WPMUDEV plugin Login Message, unfortunately, does only add a logo and footer message but does not enable to to customize it i.e. with another background image or a transparent login box, perhaps even with different structure i.e. 2 rows and which would work also on mobile of course.

Thanks for your ideas

Andi

  • Sajid

    Hello Andi,
    Hope you are doing good today :slight_smile:

    If you want the login page to look exactly like front-end then I would suggest using Theme My Login plugin.

    You can also use Ultimate Branding plugin. Once you have it installed, enabled Login Image to replace default logo with your own site logo and also enable Custom Login CSS module to add some custom CSS code on login page to further style it out.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,
    Sajid - WPMU DEV Support

  • Andi

    Well I used Ultimate Branding today and tried what can be done via CSS - it is a lot

    Insert this css into Ultimate Branding and have a look for the result.

    While doing that I thought it might be a great asset for Ultimate branding if it would provide some sample CSS for the login screen but also for the admin area. You could collect samples from WPMUDEV users here and with one click they could simply install them

    Here is the code for what you see on the image but as background, I took a WPMUDEV image
    then it looks like that

    All modifications are done only by css without touching actually the wp-login page itself.

    Here is the code:

    body {
        background-size: cover;
        background-repeat: no-repeat;
        background-color: transparent;
        background-image: url("https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/plugins-bg.jpg");
        background-attachment: fixed;
        background-position: center;
        min-width: 0;
        color: #ddd;
    }
    .login form, .login h1 a {
        overflow: hidden;
    }
    .login #backtoblog, .login #nav {
        font: 16px/26px "Raleway",sans-serif;
        font-weight:100;
        color: #f00;
    }
    .login #backtoblog a, .login #nav a {
        color: #ccc;
    }
    .login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
        color: #0f0;
    }
    .login h1, .login form, .login #nav, .login #backtoblog {
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .login h1 {
        padding: 20px 20px 1px;
        border-radius: 100px 5px 0 0;
    }
    .login h1 a {
        margin: 0 auto 0px;
        height: 100px;
    }
    .login form {
        padding: 20px;
    }
    .login #nav {
        text-align: center;
    }
    .login #backtoblog {
        padding: 40px;
        border-radius: 0 0  100px 5px;
    }
    .login form p:first-child, #login form p:first-child + p {
        position: relative;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.5);
        margin-bottom: 16px;
        padding: 20px 0 10px;
    }
    .login form p:first-child {
        padding-top: 0px;
    }
    .login form label[for=user_login]:before {
       font-family: FontAwesome;
       content: "\f21b";
       display: inline-block;
       padding-right: 10px;
       font-size: 40px;
       vertical-align: middle;
    }
    .login form label[for=user_pass]:before {
       font-family: FontAwesome;
       content: "\f084";
       display: inline-block;
       padding-right: 10px;
       font-size: 40px;
       vertical-align: middle;
    }
    .login form label {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 100;
        font-size: 16px;
        position: relative;
    }
    .login form .input, .login form input[type="checkbox"], .login input[type="text"] {
        background: transparent;
        border: 0;
        color: #f00;
    }
    .login form .input, .login input[type="text"] {
        font-size: 24px;
        width: 100%;
        padding: 3px;
        margin: 0;
    }
    .login #login_error {
        background:rgba(111,0,0,0.5);
        color:#fff;
        font-weight: 600;
    }
    .login .message {
        background:rgba(0, 3, 204, 0.8);
        color:#fff;
        font-weight: 600;
    }
    .wp-core-ui .button.button-large {
        width: 100%;
        margin-top: 10px;
        padding-bottom: 10px;
        height: 50px;
        font-size: 40px;
        font-weight: 100;
        background:rgba(0, 3, 204, 0.9);
        border-color: #fff;
    }
    .wp-core-ui .button.button-large:hover {
        border-color: #0f0;
    }

    It has to go into the Custom Login CSS field of Ultimate Branding

    Save and check the output.

    Perhaps the CSS can still be improved so feel free to bring up your versions too. It would be nice to see lots of different login screens for WordPress.

    Kind regards and a nice sunday

    Andi

  • Andi

    Slightly improved with aiowps calculating captcha.

    body {
        background-size: cover;
        background-repeat: no-repeat;
        background-color: transparent;
        background-image: url("https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/plugins-bg.jpg");
        background-attachment: fixed;
        background-position: center;
        min-width: 0;
        color: #ddd;
    }
    .login form, .login h1 a {
        overflow: hidden;
    }
    .login #backtoblog, .login #nav {
        font: 16px/26px "Raleway",sans-serif;
        font-weight:100;
        color: #f00;
    }
    .login #backtoblog a, .login #nav a {
        color: #ccc;
    }
    .login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
        color: #0f0;
    }
    .login h1, .login form, .login #nav, .login #backtoblog {
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .login h1 {
        padding: 20px 20px 1px;
        border-radius: 100px 5px 0 0;
    }
    .login h1 a {
        margin: 0 auto 0px;
        height: 100px;
    }
    .login form {
        padding: 20px;
    }
    .login #nav {
        text-align: center;
    }
    .login #backtoblog {
        padding: 40px;
        border-radius: 0 0  100px 5px;
    }
    .login form p:first-child, #login form p:first-child + p, .aiowps-captcha-equation {
        position: relative;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.5);
        margin-bottom: 16px;
        padding: 20px 0 10px;
        font-size: 16px;
        font-weight: 100;
        line-height: 16px;
    }
    .login form p:first-child {
        padding-top: 0px;
    }
    .login form label[for=user_login]:before {
       font-family: FontAwesome;
       content: "\f21b";
       display: inline-block;
       padding-right: 10px;
       font-size: 40px;
       vertical-align: middle;
    }
    .login form label[for=user_pass]:before {
       font-family: FontAwesome;
       content: "\f084";
       display: inline-block;
       padding-right: 10px;
       font-size: 34px;
       vertical-align: middle;
    }
    .aiowps-captcha-equation:before {
       font-family: FontAwesome;
       content: "\f1ec";
       display: inline-block;
       padding-right: 10px;
       font-size: 34px;
       vertical-align: middle;
    }
    .login form label {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 100;
        font-size: 16px;
        position: relative;
    }
    .login form .input, .login form input[type="checkbox"], .login input[type="text"] {
        background: transparent;
        border: 0;
        color: #f00;
    }
    .login form .input, .login input[type="text"] {
        font-size: 26px;
        font-weight: 600;
        width: 100%;
        padding: 3px;
        margin: 0 0 0 40px;
        letter-spacing: 5px;
    }
    .login #login_error {
        background:rgba(111,0,0,0.5);
        color:#fff;
        font-weight: 600;
    }
    .login .message {
        background:rgba(0, 3, 204, 0.8);
        color:#fff;
        font-weight: 600;
    }
    .wp-core-ui .button.button-large {
        width: 100%;
        margin-top: 10px;
        padding: 0;
        height: 65px;
        font-size: 40px;
        font-weight: 100;
        background:rgba(0, 3, 204, 0.9);
        border-color: #fff;
    }
    .wp-core-ui .button.button-large:hover {
        border-color: #0f0;
    }
  • Denitsa

    Hey there Andi,
    I hope you're well and thanks for sharing your solutions here!

    While doing that I thought it might be a great asset for Ultimate branding if it would provide some sample CSS for the login screen but also for the admin area. You could collect samples from WPMUDEV users here and with one click they could simply install them

    Seems like a nice feature suggestion, so I'm moving this thread over to the Features&Feedback section. The more +1’s this feature request gets from other users, the better - this makes it more likely it would be considered for development.

    Thank you for being a WPMU DEV member and have a nice day!

    All the best,
    Denitsa

  • Andi

    Hi Dentista where actually to give the like - on the Thread itself, where I wrote the Feature request or where you repeated it. This is not really clear where to vote - Isn't there a possibility to write down the Feature request itself and then people can vote.

    Possibilities would be "Feature Request and here you list all of them in a reverse order, newest first.
    Or you edit the topic and add a banner or button or some other optical sign that it is a feature request and of course you write it down in the header (that would be the option I would prefer.) This way it would be also easier to find feature requests.

    Thanks Andi