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

| Views: 633
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.


Have comments or feedback on what I wrote? Please share them below! Found this useful? Consider sending me a small tip.
comments powered by Disqus
Other posts you may like...