How do I change the appearance of the DHIS 2 login screen?

Question

I want to tailor the look of DHIS 2 to my organization. How can I change the flag in the top-left corner and put a notification on the login screen of DHIS 2?

Answer 1

You can find the answer in the following tutorial: https://www.dhis2.org/change-appearance-of-dhis2-login-screen

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.

Answer 2

The appearance can be changed by going to Apps > Settings > Appearance. From here you can set an application title, notification, left-side footer, right-side footer and flag to appear on the login page.

Answer 3

If you need an even higher level of customization, DHIS 2 lets you upload your own CSS files through the Web API. You can inspect the HTML structure and classes of the login page, create your own stylesheet (CSS file) and upload the file through the Web API. The process is documented here:

https://www.dhis2.org/doc/snapshot/en/developer/html/ch01s44.html