How to change AfterLogic WebMail Lite PHP login logo to a custom image

I've used the AfterLogic WebMail Lite PHP script on a number of sites now and find it quite easy to install and use. It has some limitations but if you are after just basic webmail capability it does a great job. One of the things I wish was easier to change is the logo you see on the login screen. After a bit of work I managed to change it, here's how.

This is an example of a custom login logo. I used my blog's logo to demonstrate.

To make a similar change, you need to edit the skins/Default/styles.css file. The default @ symbol logo is actually defined by a character, not an image. This has to be removed first. Look for the following in the CSS file...

skins/Default/styles.css

.login_panel .header .icon:before {

content: "\e63c";

display: inline-block;

vertical-align: middle;

font-size: 140px;

height: 100%;

width: 100%;

margin-top: -20px;

color: #D7D3C8;

text-shadow: 0 1px 0 #ffffff, 0 -1px 0 #b4afa0, -1px -1px #d2c6a5;

}

Delete the content: "\e63c"; line. Next look for the following in the CSS file...

skins/Default/styles.css

.login_panel .header .icon {

height: 95px;

width: 130px;

}

Change this to something like...

.login_panel .header .icon {

height: 81px;

width: 95px;

background-image: url(url_of_your_image.png);

}

Adjust the width, height and the URL according to your image.
Your custom logo should now appear on the login screen.

-i