there. Does anybody have access to the exact CSS code used

Hi there.

Does anybody have access to the exact CSS code used on the Ultimate Branding 3 minute makeover video on the wpmudev YouTube channel?

That login box would work perfectly for what I'm doing and it looks fantastic.

Thanks in advance.

Regards.

  • Vinod Dalvi

    Hi @Dean,

    Welcome to the WPMU Dev community and thanks for posting on the forum.

    Are you talking about the following video and the CSS code shown in it to style login box?

    https://www.youtube.com/watch?v=iEUoreBS5l8

    If yes then currently we don't have the exact CSS ffor it but you can develop it by referring the information provided on the following blog post.

    https://premium.wpmudev.org/blog/create-a-custom-wordpress-login-page/

    Please advise if you have more questions.

    Kind Regards,
    Vinod Dalvi

  • Peter

    Hi @Dean,

    I had the same question and did a bit or research and came up with an Blog post on wpmudev that describes this customisation:

    https://premium.wpmudev.org/blog/customize-wordpress-login/?utm_source=tuicool

    Sarah's post describes this customisation and much more.

    It works nice on the site I am building. You an check it out my results (including beach image) at:
    http://www.dinghycruisingclub.org

    I copy the entire css code for your convenience below.

    Regards,
    Peter

    <em>css code:</em>
    body.login {
    background: url('http://www.timfrater.com/beach_bg.jpg') no-repeat fixed center;
    }
    
    .wp-core-ui .button.button-large{
    height: 50px;
    width: 257px;
    line-height: 28px;
    }
    
    .login form {
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    border: 1px solid rgba(0,0,0,.2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden;
    }
    
    .login form input {
    width: 240px;
    height: 48px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: block;
    }
    
    .login form input:focus,
    .login form textarea:focus {
    background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden;
    }
    
    .login label {
    color: #fff;
    line-height: 26px;
    }
    
    .login form .input,
    .login input[type="text"] { color: #8c8a8 }
    input#rememberme {
    height: 18px;
    width: 18px;
    display: inline;
    vertical-align: middle;
    margin: 10px 0;
    }
    
    input.button-primary {
    width: 138px;
    height: 44px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    float:right;
    border: 1px solid #3d5a5a;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
    background: -webkit-linear-gradient(top, #6da5a3, #416b68);
    background: -moz-linear-gradient(top, #6da5a3, #416b68);
    background: -ms-linear-gradient(top, #6da5a3, #416b68);
    background: -o-linear-gradient(top, #6da5a3, #416b68);
    background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
    padding: 10.5px 21px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    text-shadow: #333333 0 1px 0;
    color: #e1e1e1;
    }
    
    input.button-primary:hover {
    border: 1px solid #3d5a5a;
    text-shadow: #333333 0 1px 0;
    background: #416b68;
    background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
    background: -webkit-linear-gradient(top, #77b2b0, #416b68);
    background: -moz-linear-gradient(top, #77b2b0, #416b68);
    background: -ms-linear-gradient(top, #77b2b0, #416b68);
    background: -o-linear-gradient(top, #77b2b0, #416b68);
    background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
    color: #fff;
    }
    
    input.button-primary:active {
    margin-top:1px;
    text-shadow: #333333 0 -1px 0;
    border: 1px solid #3d5a5a;
    background: #6da5a3;
    background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
    background: -webkit-linear-gradient(top, #416b68, #609391);
    background: -moz-linear-gradient(top, #416b68, #6da5a3);
    background: -ms-linear-gradient(top, #416b68, #6da5a3);
    background: -o-linear-gradient(top, #416b68, #6da5a3);
    background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
    color: #fff;
    -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
    }

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.