How do I customise the MEDIAMAKS UK webmail login page?

How do I customise the MEDIAMAKS UK webmail login page?

You can customise the webmail (StackMail) login page using HTML and CSS directly via the MEDIAMAKS UK control panel. We’ve included some example CSS below to help you get started!

To add the code:

• Login to MEDIAMAKS UK.
• Head to Reseller Preferences -> StackCP Theme-> Locate the Webmail Login Page section near the bottom.
• The examples below will need to be entered in to the CSS field.

Changing the Webmail Image

If you want to change the webmail image that currently sits to the left of the username and password fields then you can add the following CSS:

#login-form {
    background-image: url( );

    background-repeat: no-repeat;
}

You will need to add your image URL between the two brackets (e.g. ‘( )’). When you save, you can then head to your custom webmail URL and do a hard refresh (often CTRL + SHIFT + R) and you should see the updated webmail image.

In our example we’ve replaced the default webmail image with our business logo.

Updating the Header and Button Colours

To change the colour of both the ‘Login’ header and the ‘Login’ button, you can add the following CSS:

#login-form h1 {
  margin: 0;
  padding: 0 0 20px 0;
  color: #f7921e;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  }

#login-form input.button,
#login-form .formbuttons input,
#login-form .formbuttons input:active {
  background: #f7921e;
  padding: 8px 20px;
  color: #fff; }

#login-form .formbuttons input:hover {
  background-color: #e27a08 !important; }

The #login-form h1 section controls the ‘Login’ header colour – update the hex colour code to your chosen heading colour.

The #login-form input.button section controls the colour of the ‘Login’ button- update the hex colour code to the button colour you want.

The #login-form .formbuttons input:hover section controls the colour of the ‘Login’ button when you hover over it with your cursor. Traditionally, a slightly darker colour is used, however you could also use the same hex colour code as you used for active state of the button.

To follow on from our example above, you can see how the above CSS has updated the colours of the ‘Login’ header and ‘Login’ button.