Mobile app version of vmapp.org
Login or Join
Sue5673885

: How do I change the appearance of the DHIS 2 login screen? 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

@Sue5673885

Posted in: #Dhis2

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?

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Sue5673885

2 Comments

Sorted by latest first Latest Oldest Best

 

@Welton855

You can find the answer in the following tutorial: 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:
example.com/api/files/style/external
Please note that when you post a new file to
example.com/api/files/style it will overwrite the current
version you have to include all of your previous changes.

10% popularity Vote Up Vote Down


 

@Smith883

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:
www.dhis2.org/doc/snapshot/en/developer/html/ch01s44.html

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme