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

NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the FAQ for more details.
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.


Skip down to comments...
A quick disclaimer...

Although I put in a great effort into researching all the topics I cover, mistakes can happen. If you spot something out of place, please do let me know.

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.
comments powered by Disqus
Other posts you may like...