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 pizazz 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!
Update October 2025
I did switch away from ExpressionEngine for this site – though io still use it for others and highly recommend it. I have a tendency to try out different systems on my own site and have used four different ones to date since ExpressionEngine.
Next short: Aperture tidy up
Previous short: I never met Steve Jobs
