I'm going to start with the usual disclaimers here. I recommend taking backups before changing any files in the core EE framework and if in doubt, please do not do it.

We've always 'skinned' our EE1.x login forms to either bring them into the style of the site we've built or to a corporate branding identity. Since rolling out with EE2.x we've been happy enough with the login page, but decided that it was about time we picked the structure apart and gave it a 'hippo' feel.

I've written this blog to hopefully help some of you who would like to style your own CP login forms.

Firstly, you need to understand the files you're going to be editing. From the core framework you only actually need to edit one file


This is the login page thats rendered for the CP. I'm not a big fan of making sweeping changes in core files, preferring to go down a more 'extensible' route by creating my own custom extensions to the core - that way, you can remove your custom branding with minimal ease if you need.

So, to start - simply open the aforementioned file and find the closing </style> tag (on or around line #110)

Now, simply add the following:

<style>@import url('<?=$cp_theme_url?>css/custom-ui.css');</style>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script src="<?=$cp_theme_url?>js/common.js" type="text/javascript"></script>

This adds another stylesheet option for you to add your custom overrides, as well and enabling jQuery on the page (which is always useful!).

Optionally, you can also add a 'footer' at the bottom of the page by finding the </body> tag and adding the following:

<div id="footer">
<br />
<?= APP_NAME . " " .APP_VER; ?>

You could leave the contents of the <div> blank if you want - but you'll understand why I've added the APP_NAME and APP_VER constants in later.

now you need to create some new files and a new folder. in the system/themes/cp_themes/default/css/ folder, create yourself a blank custom-ui.css file and also create the folder system/themes/cp_themes/default/js/ with a single file common.js

Now you're ready to customize!

Open the custom-ui.css file that you created earlier and you can now create your own custom overrides using the following selectors:

div#branding {}
div#content {}
div#content dl {}
div#content dt {}
div#content dd {}
div#footer {}

You now essentially be as creative as you want. I recommend the Firefox FireBug Addon to inspect the elements and create something truly fabulous!

We didn't really want to deviate from the core login, just something slightly more unique.



Finally, you'll see from our screenshots - theres footer text, we've done this using jQuery instead of editing the core files everytime and allows us to tweak it as often as we want.

simply open js/common.js and we've entered the following:

$("#footer").prepend("Powered by <a href='http://www.expressionengine.com' target='_blank'>ExpressionEngine</a> and supported by <a href='http://www.madebyhippo.com' target='_blank'>Made By Hippo</a>")

You can also download the attached zip file and place the appropriate files to get the style shown above as a base to tweak.

Feel free to take screenshots of your own login templates and email them to me (hello[at]madebyhippo.com) I'll follow up this post with a showcase of the variations!