Welcome to 20i Support

Web Hosting Knowledge Base

How do I customize the 20i webmail login page?

You can customize the webmail (Stackmail) login page using HTML and CSS directly via the 20i control panel. We've included some example CSS below to help you get started!

To add the code: 

  • Login to My20i.
  • 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:

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. 

Webmail login comparison

Updating the Header and Button Colors

To change the color of both the 'Login' header and the 'Login' button, you can add the following CSS:

The #login-form h1 section controls the 'Login' header ccolor- update the hex cocolorode to your chosen heading colcolorp>

The #login-form input.button section controls the colocolorthe 'Login' button- update the hex coloucolor to the button colourcolorant.

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

To follow on from our example above, you can see how the above CSS has updated the ccolorsof the 'Login' header and 'Login' button. 

Colour changes in webmail login