For those of you who are using SquirrelMail, you might have noticed that it looks a bit well, let’s just say amateurish That doesn’t go to say it isn’t a good package! (I personally love it and I think it does a pretty good job — hence my additions to this software.) However, as every open-source package in its early stages, there is still a lot more to be done to get it to a stage where it works beautifully and looks just as good! If you have been using it for a while chances are you have already installed some of the plugins and configured them to your needs. Some of these plugins as you know allows certain visual customizations to SquirrelMail to make it look more pleasant to the eye.
It is one of these plugins that captured my attention, as I figured out straight away it will allow me to customize the login page! And here’s how:
First of all download the Login Notes plugin. This plugin allows you to add your HTML code at the top and bottom of the login page. (Some of you might see already where this is going I guess, but for the others, I will go into details about how to use this.) Follow the plugin installation instructions (provided in the tar gzipped file) and enable the plugin.
For obvious reasons, I will use throughout this article the paths that I have used to configure and install SquirrelMail on my machine, but the same notes should apply for any other configurations as long as you replace the paths with the ones you have used in your configuration.
I am using a Debian Linux distribution, so my SquirrelMail plugins are installed under
/usr/share/SquirrelMail/plugins/ and the Login Notes plugin gets installed therefore under
/usr/share/SquirrelMail/plugins/login_notes — your configuration might be different but the only path we are really interested in is the plugin directory. (You might also want to take a note of the images directory if you want to use images to customize your SquirrelMail login page — in my case, they rely under
/usr/share/SquirrelMail/images/, but you might use a different path.) In order to avoid using the complete paths throughout this article, I will be referring to
/usr/share/SquirrelMail/images as the images directory and to
/usr/share/SquirrelMail/plugins as the plugins directory. Also, the
/usr/share/SquirrelMail/plugins/login_notes becomes the Login Notes directory.
So, you’ve installed the plugin, and enabled it in your SquirrelMail configuration (use
SquirrelMail-configure on Debian systems). Next, if you visit your SquirrelMail login page, you will notice a simple “Welcome” note at the top of the login page and a Tux image at the bottom of the page. You might think straight-away that even so the login page still doesn’t look that much more appealing. Don’t panic — these are just the default HTML tags that the plugin creator has put in! We’re going to change these to make the login page look prettier.
If you go to the Login Notes directory, you will notice that there is a
config.php file and a few other files, but we’re only going to use this particular file to customize the login page. Simply open it in a text editor, and you will find the following 2 variables:
bottomText. You don’t have to be a PHP programmer to spot these, as the file itself contains very few lines: one line that declares these 2 variables as global variables and then 2 more sections/lines which assign values to these variables. It is exactly the assignment sections we are going to change.
As you can imagine, the
topText variable stores the HTML code that will be inserted in the login page before the login controls; while the
bottomText variable stores the HTML code that will be inserted after the login controls. So, let’s start with the top one:
Typically, at the top of the page you would want to put some branding for your server, in order to remind the user the server s/he is logging into. Also, ISPs would probably want to add some self-promotion banners or some sort of “offer of the day”, which the user might click on in order to get access to more services for their hosting. Also, this is probably the place to put any banners that might instruct the user that the server will be unavailable for a certain period due to hardware upgrades and such. Remember that any images you refer in this HTML code have to be present in your images directory, otherwise the browser will show them as broken links/images! In my case for instance, I have chosen to show just a simple stylish keyboard with the server name embossed on top of that, so the code looks like this:
$topText = "<center><table border='0' width='100%'>" . "<tr><td width='100%' align='center'><img src='/images/keyboard.jpg'></td></tr>" . "</table></center>";
(remember that the dot in PHP is used for string concatenation.) Of course, you can have anything else that takes your fancy here.
Let’s now look at the bottom HTML part. Remember that this HTML code is pretty much placed in the page right before we’re closing the
You would wonder why not do this via CSS in the top of the page? Well for starters, the top of the page is written after we have opened the
<body> tag, and W3C says that the styling should be applied in the
For instance, if you want to apply a background color to your page and change the default font, all you need is a script like this one:
(again bear in mind that any image referenced here should be copied in your images directory; either that or change the path
/images/ to reflect where you have placed the image file). Simply, all this function does is retrieves the first
<body> element (there has to be one single such element in the DOM!) and applies on-the-fly styling in terms of background and default text. You will notice now that if you reload the page, the tables used to align the login controls will still have the (default) white background. This can be changed again in the same script like this:
Or if you want to customize the Login button, you can do something like this:
NOTE: This article was published initially on my old website (outside WordPress); having looked recently at some of the searches done in Google and then in my WordPress installation, I figured out that the article must have been pretty popular so I decided to resurrect it. I since migrated my hosting a bunch of times so I stopped using SquirrelMail — which might mean that this article is out of date. I have re-directed the original link though so it redirects to this article, so search engine users should get at least this page rather than a 404.