Shorticals

ExpressionEngine custom log-in page

Just read a great article at 40horse.com on creating a custom ExpressionEngine2 Login Screen so decided to have a quick update to my own login screen. It is slightly frivolous as only I will ever see it hopefully but every little bit helps.

I edited the login.css found inside the main themes folder /default/css themes/
body {
background-color: #ffffff;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
font-size: 12px;
color: #ecf1f3;
margin: 0;
padding: 0;
}


Changed the main image:
#content {
text-align: left;
padding: 260px 20px 5px 20px;
margin: 20px auto 0 auto;
width: 440px;
background: url('/images/illustration.png') no-repeat center top;
}


Changed the submit button colour:
input.submit {
background: #91cb0a;
padding: 7px 16px 9px 16px;
color: #fff;
font-weight: bold;
border: 0;
width: auto;
}


And added some shape to the form element.
form {
background:#333333;
padding: 10px;
border-radius: 20px;
border-top: 1px solid #999999;
moz-border-radius: 20px;
webkit-border-radius: 32px;
}

Simple, quick and easy way to add a bit of pazzaz to a site. I have known about editing the login screen for a long time but was one of those things I had never tried so thanks to Josh Hopkins for the prompt!

You can see the final result below in the gallery.