Change the appearance of the DHIS 2 login screen

Learn how to change the appearence of the DHIS 2 login screen and keep it up to date even when the DHIS 2 application is updated.

A common challenge when you updated your installation of DHIS 2 is that custom changes to appearance (such as the login page) are overwritten when the application is updated. If you want customize the look of DHIS 2 with a Cascading Style Sheet (CSS), here is an example of a clean way to use your own CSS, and to keep it up to date even if the DHIS 2 application is updated.In this example we'll hide the flag and the footer on the DHIS 2 login page to illustrate the approach.

Start by creating a file mystyle.css (the name doesn’t matter). Note that we specify some custom styling for the #flagArea and #footerArea elements.

#flagArea
{
visibility: hidden;
position: absolute;
top: 22px;
left: 52px;
border: 1px solid #d5d5d5;
border-radius: 2px;
max-width: 105px;
margin-bottom: 5%;
}

#footerArea
{
visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
padding: 10px 0 9px 0;
font-size: 13px;
border-top: 1px solid #416f9d;
color: #6b90b8;
width: 100%;
}

Next, we will send the custom style sheet to the server using a curl command.

curl -d @mystyle.css "https://example.com/api/files/style" -H "Content-Type:text/css" -u username:password

Be sure to use the correct URL for your server, along with an authorized username and password.
If you view the source of the home page you’ll notice a call to

<link type="text/css" rel="stylesheet" href="../../api/files/style/external" />

If you look here you’ll be able to see the CSS that was created above: https://example.com/api/files/style/external

Please note that when you post a new file to https://example.com/api/files/style it will overwrite the current version you have to include all of your previous changes.

This tutorial was submitted by BAO Systems.