Interspire Email Marketer (IEM) login page customization

Hello World ! Interspire Email Marketer is a complete email marketing suite. It has got almost all necessary features for proper email marketing. But the interface has been so complex and unattractive, at least to me. So maybe we can do some polishing over it. Complete reskining if IEM will need huge customization on many of its core files. We will try to explain how to resking IEM in some other days.

Today I am gonna show you how to customize your Interspire Email Marketer (IEM) Login page. IEM traditionally have a common login page, which was very boring. So I decided to make some styles on it and iyt wasn't so hard. You can set your own custom logo in place of IEM default logo. But, first, lets see how would it look like after the modification.

View Demo

you have to modify the two following files:

    http://your_iem_installation/admin/includes/styles/stylesheet.css
    http://your_iem_installation/admin/com/templates/login.tpl

Step 1:

Copy gradient2.jpg from the zip file and paste it to your /admin/images/ folder. Now, add the following code to the beginning login.tpl file:

body { background: #ededed url(../../images/gradient2.jpg) repeat-x; }

Find loginBox class, change the td styles like the following:

    style="
            border: 1px solid #AAAAAA;
            padding: 20px;
            background-color: #e5e7e7;
            width: 300px;
            box-shadow: 0 0 20px #999999;"

Step 2:

Open your

    http://your_iem_installation/admin/includes/styles/stylesheet.css

file and change it like the following:

    body
    {
        color: #676767;
        background-color: #ededed;
        font: 12px Arial,Tahoma,Verdana,Helvetica,Sans-Serif;
        margin: 0;
        padding: 0;
        background: #ededed url(../../images/gradient.jpg) repeat-x;
    }
    .popupBody {
        color: #000000;
        font-size: 11px;
        line-height: 1.5;
        margin: 20px;
        padding: 0;
    }
    .popupContainer {
        border: 0 none;
        padding:20px;
    }
    .loginBox td {
        color: #676767;
        font-size: 12px;
    }

Step 3:

Login your IEM admin panel, go to:

    http://your_iem_installation/admin/index.php?Page=Settings&Tab=8

change the Application footer and change the Application logo at the bottom of that page..

The logo should be in PNG format and in 250 x 60 size. If you want to modify the uploaded image, then go to the following directory

    http://your_iem_installation/admin/temp/

and applicationlogo.png is the desired logo file. Edit and replace it as you like.

Download files

You can download the modified files below and replace them with your existing one (keeping the directory structure ok) if you have not made in customization on those files before. Alternately, you can use Kaleidoscope for mac or Meld for windows/ linux to make a diff and commit the changes.

Happy Mailing !