Guide to VS2013 LightSwitch HTML Themes

Guide to VS2013 LightSwitch HTML Client Themes

LightSwitch HTML Themes, tweaks and Tools

Visual Studio 2013 was published on Friday 18th October 2013. This blog post is the anchor to a series of articles covering the A-Z of themes that we are editing and evolving over time.

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

The LightSwitch HTML Client in VS2013 targets the jQuery Mobile framework and the themes are implemented as Cascading Style Sheets (CSS).

Headers, Footers and Toolbars

Here is a HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support. The LightSwitch implementation does not use the JQuery Mobile header classes by default. See this post:

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Client Orchard theme drag and drop list items

Selection List and Options

The HTML SELECT element is not easy to style and control through just CSS markup. For full control it is usual to use a custom control that mimics the SELECT element by using DIV’s and SPAN’s.

Styled LightSwitch HTML Choice List

The SELECT element popup is implemented outside of the browser. The blue selection rectangle is not controllable in CSS and by default your themes will always be black, white and blue. We will extend the theme mark-up to do better styling in LightSwitch as in the above screen shot.

Rounded Corners

The use of rounded corners in themes can be aesthetically pleasing. The LightSwitch themes need extending to properly support them.

Clipped text and rounded corners

The screen shots above show the adjusted rounded corner support.

Previewing LightSwitch Themes

We have an easy implementation of theme swapping and view port selection for different form factors.

Swatches

What are they and how can they be used in LightSwitch HTML applications.

Cloud Business Apps and Site Chrome

Creating dynamic themes and features to integrate with SharePoint and site chrome.

Mega-Theme Pack

It would not be complete without a theme starter pack. The preview containing 19 themes was released soon after the VS2013 in December 2013 and is currently available in a bumper bundle offer of AIDE 2013 for Visual Studio which also include a preview of 4 new Advanced Screen Templates.

The themes target jQuery Mobile and are not specific to LightSwitch. They are integrated into the Visual Studio IDE as new JavaScript Item Templates with supporting short descriptions and preview images. This extension supports VS2012 and VS2013. The themes are widely used in our other blog articles.

See this blog article: LightSwitch HTML Screen Template – Auto-Tile Menu

See this blog article: jQuery Mobile Themes suitable for LightSwitch Apps

Conclusions

The Visual Studio 2013 RTM was released in late 2013 and Xpert360 joined the party upgrading samples, themes, extensions and tools to support VS2013. We will take you through all the shortcuts and tweaks to give style to your LightSwitch HTML applications and Cloud Business Apps!

ooo

Failed upgrades, unloadable projects, old extensions, AIDE for LightSwitch will be there to help you through! Xpert360 consultants have real-world experience of reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting your LightSwitch projects.

ooo

Company information: Xpert360 Ltd, founded in 2009, based upon three decades of IT experience, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

“Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2012 – 2013.