Openmrs general color(Resolved)

marafa · August 23, 2020, 1:09pm

Hello everyone,

i will like to know which module and which files i can modify to change the general color of openmrs.

i would like to change the green color to blue.

thank you.

jwnasambu · August 23, 2020, 1:14pm

Could this https://demo.openmrs.org/openmrs/uicommons/styleGuide.page be what you are looking for?

marafa · August 23, 2020, 1:18pm

Thank you @jwnasambu.

i believe this page is just a guide. it doesn’t show me where to do the changes.

jwnasambu · August 23, 2020, 2:02pm

You can play around with the css page and see the outcome.

marafa · August 23, 2020, 5:16pm

there is so many css files i don’t know where to start. i will see what i can do.

Thank you.

marafa · August 23, 2020, 5:33pm

Hello @sharif Any idea? you have talked about it in a post. any guidance?

thank you

sharif · August 23, 2020, 6:43pm

This may be of help Change Brand Color, let me know if you still need more guidance on this thanks

marafa · August 23, 2020, 9:18pm

THANKS @sharif i will look into the login.css file but it will not help me to change the color of the other pages. in the uicommons module i have looked inside the styles folder but there is nothing there for changing the header and the widget colors

sharif · August 23, 2020, 9:24pm

If your ideal is to customise the color of the main bar as the screenshot is showing, u only change the login.css file .color in reference application module. FYI that theme bar will change the color only. which other parts are you intending to change the color?

marafa · August 23, 2020, 9:44pm

yes i want to change the main bar color but like i show in the image above i also want to change the color of the widgets bar on the patient dashboard so it matches the main bar color. do you mean that if i change the color in login.css it will also affect the main bar or just the bar of the login page.

i have looked in the login.css of the reference application and i can’t find any reference to the bar color.

thank you

ayesh · August 23, 2020, 9:59pm

Hi @marafa

So login page is different from the other pages and modules it’s in a seprate jsp page. For other pages if you look at jsp pages you can find the below include.

For an example here

github.com

openmrs/openmrs-module-registrationapp/blob/master/omod/src/main/webapp/pages/findPatient.gsp#L5


<%
    if (sessionContext.authenticated && !sessionContext.currentProvider) {
        throw new IllegalStateException("Logged-in user is not a Provider")
    }
    ui.decorateWith("appui", "standardEmrPage")
    ui.includeCss("registrationapp", "findPatient.css")


    def baseUrl = ui.pageLink("registrationapp", "findPatient", [appId: appId])
    def afterSelectedUrl = '/registrationapp/registrationSummary.page?patientId={{patientId}}&appId=' + appId


%>
${ ui.includeFragment("uicommons", "validationMessages")}


<script type="text/javascript">

So you should work on this jsp page if you want to change the color or format. Change the css which are included in this page.

github.com

openmrs/openmrs-module-appui/blob/master/omod/src/main/webapp/fragments/decorator/standardEmrPage.gsp

<%
    sessionContext.requireAuthentication()

    def title = config.title ?: ui.message("emr.title")
    def timezoneOffset = -Calendar.getInstance().getTimeZone().getOffset(System.currentTimeMillis()) / 60000
    def jsTimezone = new java.text.SimpleDateFormat("ZZ").format(new Date());
    def includeBootstrap = config.containsKey('includeBootstrap') ? config.includeBootstrap : true;  // include bootstrap unless specifically excluded

	ui.includeFragment("appui", "standardEmrIncludes", [ includeBootstrap: includeBootstrap ])

    if (includeBootstrap) {
        ui.includeJavascript("appui", "popper.min.js")
        ui.includeJavascript("appui", "bootstrap.min.js")
        ui.includeCss("appui", "bootstrap.min.css")
    }
    else {
        ui.includeCss("appui", "no-bootstrap.css")
    }

    ui.includeCss("appui", "header.css")

This file has been truncated. show original

fyi :- some pages have their own css files as well. In some cases u have to go through them as well to modify page components. But here I think u have to modify only this page.

marafa · August 23, 2020, 10:09pm

thank you @ayesh

i will have a look at it.

sharif · August 24, 2020, 5:48am

Yes just change the login.css btw you need to look into that file and only rename the color to your preference . thanks @ayesh for that option

marafa · August 24, 2020, 12:18pm

Hi @sharif i’m not sure i’m understanding. here is the login.css i have in reference app. penyacom.org/p?q=cDI4RWY

i don’t see anywhere i can change the color.

sharif · August 24, 2020, 2:48pm

Am not sure if its ok to paste this but take a look after inspection

If your main aim is to change the color of the theme bar go to openmrs-referenceapplication\omod\src\main\webapp\resources\styles\referenceapplication.css. then change line 768 in the header section to the color of your preference.in the case of the screen shot its line 764 let us know for any progress or blocker

sharif · August 25, 2020, 6:03am

@marafa was that helpful, @ayesh do you have any other idea about how to overcome this

marafa · August 25, 2020, 7:08am

hello @sharif sorry for the late feedback. i have used your method and it worked perfectly. i have even managed to find where to change the color of the dashboard widgets headers in the same file . for those who are interested in changing the widgets colors just look for (.dashboard .info-header) in the same referenceapplication.css file. from there you can change the colors the different elements of the dashboard.

Thank you very much

sharif · August 25, 2020, 9:17am

Congs Am glad that you have been helped