40 Horse

Customizing the ExpressionEngine2 login screen to match your client’s branding guidelines and style is simple to do and will make them feel right at home when they login to manage their website. Congratulations, now you look like a professional.

Unlike other tutorials, this technique does not require modifying core EE files. With simple modification of images and CSS, you can make the login page something unique for your client. As always, it’s best to make copies of the original files that we will be modifying just in case something goes wrong. We are modifying an install of ExpressionEngine v2.1.3 Build: 20110411, so make sure your install is the same or newer. First, we will examine the files that compose the login screen.

The core framework contains a login page located at /themes/cp_themes/default/account/login.php. Luckily, customizing the login page does not require us to make any changes to the actual login.php code page. Modifying core files is something that should only be done if absolutely necessary, especially when the changes can be made inside the stylesheet. We could change the semantics of the file to load all images from CSS, but for sake of simplicity, we will just keep the default look and feel of the EE login page and modify the login stylesheet.

The majority of our changes will occur inside the login stylesheet. The login.css is located at /themes/cp_themes/default/css. To begin, we will add a dark noise background to the page.

body{background:#22211f url('../images/login_bg.gif') repeat}

Next, we will remove the background image from the default submit button and take advantage of stunning cross-browser CSS3 gradients. We will start by giving our button a gradient background for browsers that currently support it (WebKit and Mozilla). For this example, we override the background color with a CSS gradient that runs from orange to slightly lighter orange. We will also add a top border color and some other fancy CSS3 features.

input.submit {
	background: #c47429;
	background: -moz-linear-gradient(top,#a76323,#c47429);
	background: -ms-linear-gradient(top,#a76323,#c47429);
	background: -o-linear-gradient(top,#a76323,#c47429);
	background: -webkit-gradient(linear,left top,left bottom,from(#a76323),to(#c47429));
	background: -webkit-linear-gradient(top,#a76323,#c47429);
	border-radius: 3px;
	border-top: 1px solid #cc883f;
	moz-border-radius: 3px;
	webkit-border-radius: 3px
}

Notice that keeping the original solid background color prior to the gradient rules will degrade gracefully for browsers that don’t yet support CSS gradients. Genius!

The other changes will be made to the two images that comprise the top “powered by” bar. First, the repeating horizontal branding_bg.gif, located at /themes/cp_themes/default/images and the ee_logo_branding.gif located at /themes/cp_global_images.

Be sure to create a backup copy of the files and then change their filename extension by adding .original to the name. Next, using a photo editing program we will remove the default blue background from branding_bg.gif and ee_logo_branding.gif to make them match our noise background.

The last image to change is the EE Logo, /themes/cp_themes/default/images/ee_login_bg.gif. This will depend on the logo you will be replacing it with. For the image we will be using, the width is updated to reflect the image size.

#content {
	background: url('../images/logo_400x79.png') no-repeat center top;
	margin: 20px auto 0 auto;
	padding: 160px 20px 5px 20px;
	text-align: left;
	width: 400px;
}

With these changes, we should have gone from the default EE look to something more customized to match our branding guidelines.

We have created a download that contains the theme files and example files that you’ll need to start with. There is also a static HTML page to test your layout on before making changes in ExpressionEngine.

Download the source project files - 38.6 KB

Short url: http://40hor.se/nWwlXW