Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

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


A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. Use of any information from my blog posts should be at own risk and I do not hold any liability towards any information misuse or damages caused by following any of my posts.

All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle). Use of any information contained in this blog post/article is subject to this disclaimer.
Hi! You can search my blog here ⤵
NOTE: (2022) This Blog is no longer maintained and I will not be answering any emails or comments.

I am now focusing on Atari Gamer.