: 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
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?
More posts by @Sue5673885
2 Comments
Sorted by latest first Latest Oldest Best
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.
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
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.