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.


Did you like this post or found it useful? Considering supporting this Blog to keep its web servers running, any amount helps! Thanks!
Have comments or feedback on what I wrote? Please share them below!
comments powered by Disqus
Other posts you may like...