---
type: Article
title: ExpressionEngine custom log-in page
description: How I customised the ExpressionEngine log-in page for a more on-brand experience.
resource: https://www.simoncox.com/short-articles/2011-10-12-expressionengine-custom-log-in-page/
tags: [Shorticles, Web]
timestamp: 2025-10-25
---

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!

![Customised ExpressionEngine log-in screen](/assets/img/content/ee-login-screen-customisation.png)

## 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.

[Read full article](https://www.simoncox.com/short-articles/2011-10-12-expressionengine-custom-log-in-page/)