Is there a less color full theme/css for OpenEMR

Day-to-Day Users
1

bikash4grmtech wrote on Thursday, September 05, 2013:

Hi all,
I have just installed openemr and looking for a less color full theme (like sourceforge.net).

Is there any open-source theme/css available for OpenEMR ?

Thanks in-adv for your help.

2

fsgl wrote on Thursday, September 05, 2013:

Go to Administration/Globals/Appearance/Theme. There are 4 other choices in the drop down menu.

The Tree View under Layout Style is more compact and austere.

3

bikash4grmtech wrote on Friday, September 06, 2013:

Yes, I used those options. But I found them still more color full.
I like the sorceforge theme. Is a similar theme exist for OpenEMR.

4

fsgl wrote on Friday, September 06, 2013:

See this thread.

5

epsdky wrote on Friday, September 06, 2013:

Changing the appearance of a number of important OpenEMR interface components (left menu buttons, application header, large calendar header, provider selection box) in terms of color can be achieved by some simple changes to CSS code files.

To change large calendar header, provider selection box background color locate…

openemr/interface/themes/ajax_calendar.css

Change name of “ajax_calendar.css” to “ajax_calendarOrig.css” just in case…
Then clone contents to a file with original name.

In this file look for “#topToolbarRight” component…

#functions {
(...code here...)
}

#topToolbarRight {
background-color:#BBCCFF;
    float: right;
    width: 100%;
border-bottom:1px solid black;
border-TOP:1px solid black;
}
#dateNAV {

The line to change is…

“background-color:#BBCCFF;”

Change #BBCCFF to #FFFFFF (or any color you like)…

Next find the location in the code with “.view2” component…

.view1 {
font-size:10px;
}
.view2 {
background-color:#94D6E7;
font-size:10px;
}

.in_start
{
    background: transparent;
    z-index:2;
}

Change #94D6E7 to #FFFFFF

(save the file)

Continued next post…

6

epsdky wrote on Friday, September 06, 2013:

Next file…(for application header and menu buttons)

openemr/interface/themes/style_oemr.css

copy this to a new file called style_neutral.css

Open this new file and look for “.body_title”

.bgcolor2 { background-color: #fefdcf; } /* $GLOBALS['style']['BGCOLOR2'] */
.body_bottom { background: url('../pic/aquabg.gif') repeat; margin: 8px } /* $bottom_bg_line */
.body_title { background-color: #fedf98; } /* $title_bg_line */
.body_nav { background-color: #fefdcf; } /* $nav_bg_line */

In the component “background-color: #fedf98;”

Change #fedf98 to #FFFFFF

Now look for following block of code…

#navigation-slide li a.collapsed{
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe5301', endColorstr='#fefdcf'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fe5301), to(#fefdcf)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #fe5301, #fefdcf); /* for firefox 3.6+ */
}

#navigation-slide li a.expanded{
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdcf', endColorstr='#fe5301'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fefdcf), to(#fe5301)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #fefdcf, #fe5301); /* for firefox 3.6+ */
}

#navigation-slide ul li a.collapsed_lv2{
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac84', endColorstr='#fefdcf'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffac84), to(#fefdcf)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #ffac84, #fefdcf); /* for firefox 3.6+ */
}

#navigation-slide ul li a.expanded_lv2{
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefdcf', endColorstr='#ffac84'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fefdcf), to(#ffac84)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #fefdcf, #ffac84); /* for firefox 3.6+ */
}

In each of the four “-moz-linear-gradient” components change each appearance
of #fefdcf and #ffac84 with #FFFFFF (I am using Firefox, and so haven’t tried changing for other browsers (can’t see why changing colors to #FFFFFF for IE and webkit would not work) (Leave “background: #999” as is))

(I am not sure making the buttons uniform in color works in terms of function, simply a starting point for experimentation)

(Save file)

Clear cache in Firefox for current day.

Run OpenEMR

Select style_neutral.css in Administration–>Globals