Lightswitch HTML Client Theme with Rounded Corners

Discussions of aesthetics and usability in software user interface design have a tendency to lead to unwinnable wars of opinion, so I’ll try to avoid that here. I’ll just say that, there are very good reasons to consider using rounded corners in the design of your application UI.

As an alternative to the default Lightswitch HTML Client theme, I’m posting the dotnetlore-blue-theme as a starting point for those who prefer a more rounded look to their UI elements.


rounded_themerounded_theme2

Download it from Bitbucket

To make use of it, you’ll first want to install the Lightswitch Runtime Update 1.

In your default.htm file, you’ll need to find the line:

    	<link href="Content/light-theme.css" rel="stylesheet" type="text/css" />

and replace it with:

    	<link href="Content/dotnetlore-ls-blue.min.css" rel="stylesheet" type="text/css" />

You’ll also need to add the dotnetlore-ls-blue.min.css (and dotnetlore-ls-blue.css if you wish) to the Content folder of your HTML Client project.

 

Update: Microsoft has made some styling changes with msls-2.0.0.  These were causing a few unsightly box shadows on lists/tilelists/buttons.  I’ve made updates to dotnetlore-ls-blue.css that should fix this.

14 thoughts on “Lightswitch HTML Client Theme with Rounded Corners

    • Thanks for letting me know… looks like there’s a bug with the wordpress theme I’m using – I’ve coded a workaround for now.

  1. Holy crap this looks sooo nice! Took me a while to get around to trying this and I love it! There appears to be an alignment issue that I hope you can help me with. I can’t post my screen shot unfortunately it contains member details, is there a way that I can send it to you ?

    • Thanks Nicolas… if you like, you can email the screenshot to jewel at dotnetlore. com and I’ll see if I can help.

  2. Hi,
    Sooo nice. Thanks. Works great under VS2012 but under VS2013 there are some issues. The buttons has a line under and listview aligns wrong. The top bar is also to lightgrey
    Can it be fixed?
    Thanks again for a super theme :)
    Regards
    Sven

    • Thanks Sven,

      I updated the css files on bitbucket a couple of weeks ago to address those problems with VS2013 – you may want to try those.

  3. It worked great but there is still a small White line above the tabs. Know why?
    Tried to remove it but could not find the issue in the css.
    Thanks
    Sven

    • Ah… thanks for pointing that out – it’s so light on my monitor I didn’t notice it.
      Find the “button inner top highlight” section in the css and remove it.

  4. Screen back button is almost invisible in light theme.
    Please fix “ui-btn-inner” class visibility.

Comments are closed.