wakie87 wrote on Friday, March 23, 2012:
Hi, Long time stalker first time poster. We are currently looking at implementing openEMR into clinics around Australia. While messing about with some CSS styles I decided to take a stab at “modernizing” the login page. It also includes links to the facebook, twitter and google+ page. What are your thoughts? (I am also in the process of doing the same thing for the admin part of the site.)
jcahn2 wrote on Friday, March 23, 2012:
Ahoy Wakie87
It looks very nice indeed. I think we underestimate how this influences potential users of OpenEMR. Are the links to social media just that, or do they somehow supply login credentialing?
Jack Cahn MD
OEMR Board
sunsetsystems wrote on Friday, March 23, 2012:
Welcome!
Modernizing is good. I’d prefer to omit the social networking links though, as I’m sure a clinic’s management will want their staff to focus on the business at hand. Also the system should work without requiring Internet access.
Of course it would be great to provide a way to easily plug in such things.
bradymiller wrote on Friday, March 23, 2012:
Hi Wakie87,
It looks great. To clarify the social links for Jack and Rod, I’m betting the social links simply direct to to the OpenEMR facebook/twitter/google+ pages. Are you able to post the code, so we can look at it and provide guidance, if needed? Best way is via git/github, but we are very flexible with new developers. Here’s some developer documentation (and the later link is a tutorial on setting up a github OpenEMR repository):
http://open-emr.org/wiki/index.php/OpenEMR_Wiki_Home_Page#Developer_Manuals
http://open-emr.org/wiki/index.php/Git_for_dummies
-brady
OpenEMR
wakie87 wrote on Saturday, March 24, 2012:
Hi Guys,
Thanks for the feedback. The social icons are just links to their respective OpenEMR pages. I thought having the social links would bring a bit more awareness to this great project. I am new to github so I will do some study/experimentation over the weekend and get back to you with the code.
Scott
blankev wrote on Saturday, March 24, 2012:
My thoughts on a new front page….
Would be a nice improvement, but only for the Demo versions. I would not like to have these on my daily version, although thinking of it, I would not even notice these little squares after a couple of days and so these would not distract me from login procedures. Just as the Copyright, I did not notice it was there all the time.
Pimm
bradymiller wrote on Saturday, March 24, 2012:
Hi,
I agree the social links will bring more awareness to the project considering about 150 unique users pass through the demo daily. We can make this an option that we turn on in the demos, but not the official production releases (we do the same thing with the ‘dummy’ language), if needed. Will leave it up to the community.
-brady
OpenEMR
anonymous wrote on Saturday, March 24, 2012:
I think it makes sense for the social media links to be a demo only feature. To reiterate what Rod said, the links may encourage employees to check their facebook or twitter while on the clock, which is not something I prefer.
yehster wrote on Saturday, March 24, 2012:
I’m not even sure it’s appropriate to have the social networking links on the demo site, as they will give a first impression that those links are part of the official application. More links does not necessarily imply better.
The demo should reflect what a user could expect to see in production. The potential to “turn off” a potential user because they think the social networking links are something that’s integrated in the system or that using OpenEMR requires those tools seems like a bigger downside as compared to the upside of a random visitor to the demo getting some additional awareness/information from links on the login page.
A visitor to the demo page is unlikely to have gotten there without having been to the open-emr.org wiki demo page, where those social networking links are already present.
jcahn2 wrote on Saturday, March 24, 2012:
I agree with Yehster.
Jack
wakie87 wrote on Wednesday, March 28, 2012:
So I have finally figured out Git and have the code up on github now. After reading some of thew comments I understand that social links are probably not needed/wanted as they may offer distractions to users. I have also added some code into the CSS for some new buttons that use pure CSS without any pictures needed. I don’t know if this is something that should be integrated as it could help reduce loading times.
http://valuedstandards.com/static/test/buttons/#
Check out this page to see the buttons in action.
Scott
bradymiller wrote on Wednesday, March 28, 2012:
Hi Scott,
Posted your github branch link below, so others can get to it:
http://github.com/Wakie87/openemr/commits/Login_Screen
-brady
OpenEMR Project
bradymiller wrote on Wednesday, March 28, 2012:
Hi Scott,
Place a review on your github code.
thanks,
-brady
bradymiller wrote on Wednesday, March 28, 2012:
to clarify above:
I just reviewed (left comments) your code on github.
yehster wrote on Wednesday, March 28, 2012:
Nice to see the code…
I learned some new/cool CSS tricks. Specifically pseudo-elements.
wakie87 wrote on Wednesday, March 28, 2012:
Hi Guys, thanks again for looking at the code. I am very new to git and version control etc. so still trying to get a grips on it. (Please bear with me). In regards to the pseudo elements, here are some great articles.
http://www.red-team-design.com/just-another-awesome-css3-buttons
http://www.paulund.co.uk/css-buttons-with-icons-but-no-images
Scott
jwallace00 wrote on Wednesday, March 28, 2012:
I think that looks really nice. I would really like to see the entire application take on a look/feel like that. I think it would help people adopt OpenEMR more easily if it looked more modern in the interface.
Great work!
sunsetsystems wrote on Wednesday, March 28, 2012:
I added a couple of comments to the first commit.
Thanks for the CSS links, cool stuff!
wakie87 wrote on Thursday, March 29, 2012:
So I figured out that I had stuffed up by not using the latest update of openEMR. So I decided to start again. This time I have looked at all the comments and updated with a new login.css file and a lot of the changes last time was just due to me using an older version of that file.The URL for the code is as follows
https://github.com/Wakie87/openemr/compare/master…login_mod
Jwallace00 - I have been watching Open EMR for about 1 year now, but the thing that put me off was that it was looking very dated compared to some of the others available. I think we a new coat of CSS and some modification of the layout (Which I think I saw someone is working on) It will give it a more user friendly feel and hopefully grow the user base.
Rod - http://valuedstandards.com/static/test/buttons/ - Check this out I like the idea of having imageless buttons, this is a demo of what can be achieved.
Again thanks for looking at the code and I await some more feedback 
Scott
yehster wrote on Thursday, March 29, 2012:
I pulled your code and have it running on my system for the moment. Viewing it in IE9 the curves don’t work among other things.
A very useful “next step” would be to come up with a button-less/image-less css style for the current buttons.
In each of the .css file in the themes directory are css definitions for buttons. The images used have a lot of artifacts, and it should be pretty simple to replace these styles with a better looking theme.
/*
* CSS BUTTONS
*/
.css_button_small {
background: transparent url( '../../images/bg_button_a_small.gif' ) no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: bold 9px arial, sans-serif;
height: 19px;
margin-right: 3px;
padding-right: 10px; /* sliding doors padding */
text-decoration: none;
}
.css_button_small span {
background: transparent url( '../../images/bg_button_span_small.gif' ) no-repeat;
display: block;
line-height: 20px;
padding: 0px 0px 0px 10px;
}
.css_button {
background: transparent url( '../../images/bg_button_a.gif' ) no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: bold 10px arial, sans-serif;
height: 24px;
margin-right: 3px;
padding-right: 10px; /* sliding doors padding */
text-decoration: none;
}
.css_button span {
background: transparent url( '../../images/bg_button_span.gif' ) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 10px;
}